Twenty Tenでヘッダーのイメージサイズを変更したい、というお問い合わせをいただきましたので、こちらでちょっと書いてみたいと思います。
今まではCSSでするTwenty Tenのカスタマイズについて色々考えてきました。CSSだけでも本当にいろんなことが出来ますね。ただ、本格的に色々やってみよう、と思い始めると、CSSだけではなくテーマのファイルも変更していかなくてはならなくなってきます。
本当はテーマの構造から説明していこうと思っていたのですが、いきなりここから始めちゃいますね。
Twenty Tenでヘッダーのイメージサイズを変更したい、というお問い合わせをいただきましたので、こちらでちょっと書いてみたいと思います。
今まではCSSでするTwenty Tenのカスタマイズについて色々考えてきました。CSSだけでも本当にいろんなことが出来ますね。ただ、本格的に色々やってみよう、と思い始めると、CSSだけではなくテーマのファイルも変更していかなくてはならなくなってきます。
本当はテーマの構造から説明していこうと思っていたのですが、いきなりここから始めちゃいますね。
WordPress3.2のデフォルトテーマ、Twenty Elevenでは、だいぶいろいろな構造が変わっています。レイアウトに関わる大きい部分のidなんかも変わっているので、残念ながらTewnty Tenの子テーマとして作ったものをそのまま使う事はできません。
もちろん、雰囲気は似ていても全く新しいテーマですから、それでいいと思うのですが、戸惑う方もいらっしゃるかもしれませんね。
ですから、テーマ本体のおはなしの前に、出力されるHTMLの構造をざーっと見ていきたいと思います。Twenty Tenと比べてみたい方はTwenty Ten テーマの構成(レイアウト)-1を見てくださいね。
お久しぶりです、バタバタしてる間にWordPressも3.2になり、新しいデフォルトのテーマ、Twenty Elevenが出ましたね!もう試された方も多いのではないでしょうか。このブログも3.2に上げました、と言いたいところですが、テーマを3.2用に新しくしようと思っていたりするのでもう少しあとになりそうです。でも、色々と試しているところですよ〜。
ですからこのブログでも今まで書いてきた「Twenty Ten」のカスタマイズの記事をもとに、今度はテーマファイルやテンプレートタグの方にも目を向けながら、「Twenty Eleven」を中心にWordPressのカスタマイズについてもう少し深く考えていこうと思います。
前の記事になりますが、Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(2)で画像置き換えの方法のひとつをご紹介させて頂きました。
コメントを頂き、この方法についての記述が不十分でしたので、追記をさせていただきました。
ご覧いただき、画像置き換えについてはメリット、デメリット、また様々な方法がありますので、どうぞ、十分に注意してお使いください。
お仕事に追われている間にWordPressも3.2になり、新しい標準のテーマ、Twenty Elevenも出てしまいました!
そろそろこちらのことについても書いていかなければ、と思っています。
今日は、お知らせまで。
ずいぶん長々とした記事が続いたので、今日はさくっと、「続きを読む」をCSSでボタンにする方法をご紹介します。
「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ(6)で、「続きを読む」を画像に置き換える方法などを書きましたが、今回はCSS3をつかってカラフルなボタンをつくります。
長々と書いてきましたが、CSSのロールオーバーの基本的な考え方はなんとなく分かっていただけたでしょうか。
今日は『完結編』ということでWebourgeonのフッターのメニューを実際に作ってみたいと思います。
Webourgeon フッターの作り方として、カスタムメニューを画像に置き換える方法について書いています。
前回は背景画像の表示についてとテキストを画像に置き換えるところまでを書きました。今日はその背景画像をCSSでロールオーバーさせる仕組みについて書きたいと思います。
これが分かれば、Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみるではテキストの横にロゴを表示させるのみでしたが、全体を画像にする事もできます。
理解してしまえば、一粒で2度、3度、おいしいですよ。がんばっていきましょう。
続きを読む
前回は、カスタムメニューを画像に置き換える方法の下準備まで書きました。
今日は、背景画像の表示のおさらいと、画像置き換えの基礎について書きたいと思います。苦手な方はぜひどうぞ。結論が知りたい方、もう少しおつきあい下さい。
では、いきますよ〜〜
カスタムメニューを画像に置き換える方法についての、リクエストをいただきました。
Webourgeonのブログでもサイト上部やフッターのメニューをカスタムメニューを使って作り、画像に置き換えています。ということで、「Webourgeonのフッターの作り方」を大公開!
いえ。大公開ってほどのものでもないですが。。
本当はもっとかっちりしたメニューっぽいメニューの方がいいんでしょうが、こんな不規則な感じでもいけますよってことで、おつきあい下さい。
昨日、コメントで、functions.phpをアップするとサイトが見られなくなってしまう、という質問を頂きました。
私もWordPressを始めたばかりで、PHPのこともよくわからず、色々なコードをコピペしては勉強していた頃、やっちゃったんです。
真っ白な画面。
ほんと怖かったですね〜。いったい何をしてしまったのかと。
いつか書こうと思っていたことなので、今日はこのことについて書いてみようと思います。