Top

usa*log 晴れ。ときどき、うさぎ王国

WordPressをカスタマイズする(4)カスタムメニューを設置する

WordPressをカスタマイズする(3)人間の欲望は果てしないのつづき

「カスタムメニューを設置する」新しい記事がアップされてたので、早速やってみました。WordPressテーマの作り方
Tae様、今回も大変お世話になりました。ありがとうございました。
a0026762_13385594.png
こちら 合わせてこのブログのカスタムメニューも同じデザインにしました。

設置の手順カスタムメニューを設置する

functions.php
まず、functions.phpの中にメニューを有効化するコードというのを書き加えます。自分で書くことはできないけど意味はわかったような気がする(?)
ダッシュボードを見ると、以前にあった「現在のテーマはメニューに対応していませんが...」が消えています。このメニューに対応してませんが...のままだとウィジェット利用になるわけです。サイドバーに表示されるのでちょっと残念なんですよね。

メニュー項目の設定
メニューはダッシュボードから設定できるので、簡単。項目が増えたり変わったりするたびにタグをいじる必要がないんですね。すごいなぁ。

header.php
次はheader.phpにメニュー出力関数を挿入。うーん、これもわかったような...いやあんまりわかってないけど(笑)とにかくこうすれば見える、ということです!そこが大事。
サイト出力して、該当するHTMLを確認します。これも確認しました。ちゃんとリンクされてます。
a0026762_13114261.png


CSSあれこれ
最初の頃の「HTMLからWPテーマを作成する」で設定はしてたので、手直しだけです。これが直す前。
a0026762_13145149.png
あとでやるからいいや的な雰囲気漂ってます。←できなかっただけ(笑)

メニュー部分のCSS。リスト表示になっています。
a0026762_13481094.png

floatがrightになっています。これは左を空けて、小さめのブラウザでもうさリョーシカさんの顔が見えるようにするため...なんですけど。

このfloat:rightはなかなか曲者で、align rightのような右寄せではなくて、右から順に表示...みたいなことになります。なのでメニューの順番を逆にしないとなりません。1番上に書いたものがいちばん右、2番目が右から2番目...となります。
以前、これをboxに入れた画像でやって、最新のものが左に来なくて気がつきました。逆から更新すればいいのですけど、面倒で自分でわからなくなるのでやめましたが。

それとline-height。指定した高さの中におさめるために。こういう細かいところまでキチっとできていてきれいなCSSだなぁと。自分の絵を見せるための大雑把なCSSを恥じ入ったり。。
ここの26pxというのは、メニューのheightが30pxなので、上下のボーダー分を引いた数字です。そうしないと下が切れちゃう。

メディアクエリ
a0026762_14444742.png
画像はiPhoneのもの。メディアクエリもまだ未対応ですが、横にすればなんとか見えていますね。タブレットなら問題なさそうです。
こういったサイトでメディアクエリ対応しても見やすくないかも。アプリからこのブログ見てるけど、行ったり来たりがめんどうだし、それで画像一覧ていうのを作って、画像から記事をみつけられるようにしたのかな?いずれにしてもCSSの振り分けだけじゃちょっと。。

サイドバーの背景色透過。
a0026762_13573183.png
あと、どうでもいいかもしれないけど、サイドバーは背景色(#FFFFFF)を透過させて、背景画像はフィックス(iPhoneでは有効でない)。スクロールすると背景のお花がちょこっと見えたりするようになっています。

ファビコン
a0026762_14565159.png
さらにどうでもいいんですけど...こうやって眺めると、やっぱりファビコンも設置したい。。
[PR]
by usa-log | 2013-02-28 14:13 | デザインやなんかのこと | Comments(0)
<< 手編みのサシェ♡ うさぎラッピング(布バージョン) >>