Top

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

WordPressをカスタマイズする(5)カスタムヘッダーを設置する

WordPressをカスタマイズする(4)カスタムメニューを設置する の次
とうとうここまで来ちゃいましたよ!
...それだけ説明がわかりやすく親切、ということの証明です。今回もありがとうございました。
WordPressテーマの作り方
まず、出来上がりのようすをどうぞ うさオク写真館(仮)
a0026762_23571972.jpg

右上の写真画像、これです。これがダッシュボードで入れ替えができる仕様になりました。これってすごいよ、きっとすごいことなの!
カスタムヘッダーを設置する
いつもの通り、指示通りにひとつづつ。

その前に...前回いい気になってカスタマイズしたメニューを、デザインはそのままお手本のHTML、CSSに従って書き換えることから。そうしておかないと、初心者にはわからなくなるのです。面倒がらずにちゃんと作っておけばよかった...最初から。
1. functions.phpを編集する
お手本とおりです。関数ってなに?という人間は何も考えない方がいいです、たぶん。
default-image:デフォルトで表示する画像ファイルを指定します
フォルダ内の適当な画像を使います。
width, height:カスタムヘッダー画像のサイズを指定する
header-text(false):文字色カスタマイズ機能をOFFにする
少し大きめの画像にしました。背景を見せたいのでタイトル部分を広くとりたいこと、タイトル下部分にテキストのスペースを多めにほしいこと、が理由です。
これで300*225(4*3が好きらしいw)
サイズや縦横比が変わっても問題ありませんから自由にやっちゃいます。
2. デフォルト画像の用意
すでにアップされているものを使っていますのでサイズだけ変更。とりあえずの画像なので歪んでも関係ナシということにします。
a0026762_07563.jpg
気にしない気にしないw
3. ダッシュボードのヘッダー設定
難しくありません。
a0026762_23572263.png
ヘッダーという項目が新しく加わっています。なんかうれしい♪
a0026762_094356.png
ウィジェットだけだったのが、メニュー、ヘッダーと追加されました。

a0026762_2357252.jpg
何枚もアップして、ランダム表示(動画ではない)もできます。
あー、これでトップページの画像管理が楽になるかも!どこの位置に来たっていいん...だよね?
4. header.phpを編集する
お手本とおりです。やはり関数に縁のない人間には...。

おまけ・仕上がりを見ながらCSS追加
タイトルと説明部分をfloat: left、画像をfloat: rightとしますが、padding-leftをとって、左を空けています。ちいさなブラウザでもうさリョーシカさんの顔が見えますね。CSSの問題なので後から微調整すればOK。それには、どんなに面倒でもCSSの微調整で済むように作っておくこと、と肝に銘じました。

今日の感想。
カスタマイズについてはずいぶんいろんなサイトを見て回ったのですが、コレだ!というのになかなか巡り会えずにいました。まぁ、PHPの初歩的知識もないのですから、仕方ありません。CSSでなんとか変える方法はないもの?と探していたのですから。でも実際わかりやすい解説でイチから作って(たとえコピペでも)みると、今までわけわかんなかったサイトでも、なんとなく言ってる意味がわかるような?ああ、こういう意味だったのねと。長くて長くてうんざりだったCSSもちょっと短く見えてきました(笑)そんなものですね。

さて、そうなるとまた「こうなったらもっといいよね?」が増えてしまいます。
[PR]
by usa-log | 2013-03-05 00:00 | デザインやなんかのこと | Comments(0)
<< WordPressで投稿する。... わさびいなり、3月のライオン風... >>