テーマを自作する~その⑤~新しいテーマについて少しだけお見せします。

photo credit: Kenn Wilson via photopin cc
スポンサーリンク

どうも、リョウ(@ryskyshd)です。

WordPressのテーマをコツコツと自作しているのですが、今日はちょっとだけチラ見せしつつ参考にしたサイトをご紹介したいと思います。
現在トップページがこんな感じです(画像クリックで拡大します)。

Sorairo

テーマカラーは空の色(#26ade4)

やっぱりこのテーマカラーが決まってないと始まりませんでした。
色々と検討を重ねた結果、どういう経緯だったかはもう忘れましたがこの色(#26ade4)に落ち着きました。

そして、この0to255のサイトを利用してその他の相性の良いカラーをチョイスしています。
一番の使いどころはページ上部のグローバルナビゲーション。
こちらのナビゲーションは以下のエントリーを大いに参考にしました。

とても分かりやすい記事ですね。
私の場合、カテゴリーのメニュー部分を階層化し、マウスオンでカテゴリーの一覧が出てくるようになっています。
Sorairo2

SNSボタンはページの右上に配置

先日作成したSNSのボタンですが、やはりサイトの目立つ位置に置きたかったのでページの右上に配置するようにしました。
こちらは以下のエントリーを参考にしてマウスオンで出てくる吹き出しを付けています。

こちらも参考になります。

こんな感じです。
Sorairo1

CSS3って面白い

例えばボタンのデザインを角丸にしたい場合、CSS2までは画像を使わないと難しかったんですがCSS3では簡単にできてしまいます。
同じくボックスシャドウとかグラデーション、さらにはアニメーションまでCSSだけで表現できます。
これは凄い。
もちろんブラウザごとの挙動を制御するために色々とやるんですけどね。

で、多用してます(笑)
ブログのタイトルロゴ、SNSアイコン、アイキャッチ画像、ボタンすべてにマウスオンでフワッと背景が薄くなる仕掛けを施しました。
Sorairo4
こんな風に。分かりにくいですが。

画像にオンマウスで薄くなるってのには以下を参考にしています。

テンプレートタグは難しい

WordPressのテンプレートタグは便利なんですが、少しでもカスタマイズしたいと思うと途端に分からなくなります。
PHPもいつか勉強したい。

ところで、サイドバーの月別アーカイブやカテゴリーアーカイブのリスト表示について、それぞれの投稿数を表示させるとaタグの外に投稿数が出力されるのでdisplay: block;を指定すると意図した通りのデザインが実現できません。
詳しくは下のエントリーをご参照ください。

今のところ投稿数だけにspanでclass指定して右側に寄せるのはできました。

Sorairo3

でも本当は括弧も外したいのでその辺はこれからまだまだ勉強します。

最後に

いかがでしたでしょうか。
まだまだ公開するには至っていませんが、今のところ細かくこだわってカスタマイズできていますので満足です。
今後もマイペースで自作テーマを進めていきますので温かく見守っていてください(笑)

スポンサーリンク

この記事をシェアする

3 件のコメント

  • 「テンプレートタグは難しい」で記事を紹介していただいた者ですw

    括弧を外す場合は、記事中で紹介したコードを少し変更します。
    参考にしていただければと・・・・


    echo preg_replace('/ (\([0-9]*\))/', ' $1', $string);



    $string = preg_replace('/ (\([0-9]*\))/', ' $1', $string);
    $serach = array('(',')');
    echo str_replace($serach, '', $string);

  • Kyasper様
    わざわざご訪問いただき、しかもコードまで!
    ありがとうございます!
    やってみます!

  • ちゃんとできました!
    重ね重ねありがとうございます!

  • コメントを残す

    メールアドレスが公開されることはありません。