mootoolsでWP Theme

By Rika on DESIGN

Rif.3rd

Javascriptやプラグインを複数導入して動かなかった場合、使用しているテーマが多機能だと、何が邪魔をしているのかさえ分からずに断念すること、しばしば。
何を優先したいか、なんですけど。私のように知識が無い場合、やりたいことだけが先走ってドツボにハマります。

とりあえず、何にも無いテーマから一歩づつ進んでみようかと思いまして、結局ドツボにハマっていた訳であります。

なるべくプラグインに頼らず、(無理)jQueryを使ったオリジナルテーマを作りたいとはじめたんですが、理由が「なんとなく」だったので、mootoolsになってしまいました。だって、魅力的な紹介記事がたくさんあったから。
以下、現在使用させていただいているJavaScriptのご紹介です。

image menu

via:image menu
有名なimage menuですが、トップメニューに使用しました。
サンプルではひとつづつ違う写真を使っていますが、それをどうにか文字に変えて表示したいとチャレンジしてみました。Firefoxではどうにか納まっていますが、IEだと、一番右端の格納してあるはずの文字が飛び出てます。
やり方なんでしょうが、私にはこれが限界でした。
あとできることといえば、画像を変えてごまかすことぐらい。
しかも、やらなきゃいいのに透過PNGを使っていて、重なる画像が反映されない。他はJavaScriptで透過されたのに..

lightbox

via:lightbox
image menuでmootoolsを読み込んでいるので、lightboxもWordpressのプラグインでは無く、こちらを使用させていただきました。軽い気がします。(なんとなく。)

The Tiny Scrolling(s)

via:The Tiny Scrolling(s)
「トップに戻る」には、これを選びました。滑らかです。
トップに戻る以外にも使えて、例えば今回から目次作成のWordpressプラグインを導入したのですが、h3などがあると勝手に目次を作ってくれて、目次をクリックするとこのThe Tiny Scrolling(s)効果でするする~っと移動してくれます。このページのようにね。

iepngfix

via:iepngfix.js
必需品というか、ブログのおともというか、IE6でも透過PNGをきれいに表示してくれるやつです。
しばらくIEのことは忘れていたのですが、っていうか、ずっと忘れていたいのが本音。

JavaScript以外のメモ

IEのことは、しばらく忘れていたということは、随分長い間、IEを使用されている方にはとっても恥ずかしいものをお見せしていた訳で、(今もだけど。)
今回IEでチェックして一番驚いたことは、背景として指定していた画像が表示されていないということ。
ずっと、backgroundのURL,repeat,positionは、省略して記述していましたが、それだと表示されないんですね?
早く教えてよ。(誰に言ってるんだか。)
省略せずに記述したら表示されました。IE6,IE7。なんてこった…

you may want to subscribe to my RSS feed. Thanks for visiting!

関連する投稿
3 Responses to “mootoolsでWP Theme”
  1. yutaka

    Rikaさん、このテーマかっこよすぎるわ(´ω`)
    これなら有料で販売できるなぁ
    で、完成だよね もう?

  2. Rika

    びんさん、お久しぶりです。
    なんかね、

    青いの作るとピンクが良くなって、2カラム作ると、1カラムが恋しくなる私をどうにかしてください。

    あ、スマイリー忘れてる!(泣

    ・・・びんさんのとこでコメントしても、エラーになっちゃうんだけど、私だけ?

  3. yutaka

    Rikaさん、おはよう〜
    今までの中で最高傑作だとおもうけど。かっこいいので真似してみようと思ってもまねが出来ないほど難しい。コメントクイックタグとスマイルは欲しいなぁ

    コメントエラーの件はあまりご無沙汰で遊びに来てくれない人には、そうやってエラーを出して警告するようにしてるんです(笑)

    エラーってどんなエラー? そりゃエラーこっちゃ(´ω`)

Have Your Say

RSS feed

rss rss

Category

TagCloud

ADS

BottomBar