まだWordCamp Tokyoの興奮も冷めない感じでいるところですが、そのWordCamp Tokyoの前日、WordBench東京の勉強会&交流会でお話をさせていただいてきました！
始めにお話を頂いたときは本当にびっくりして「ホントに私でいいんですか？」と思いましたが、お話を聞いてみると、
「もっともっと色々な方にWordPressに親しんでもらいたい」
というお話で、それは私が思っていることでもあったし、少しずつ誰かに何かを返していかないとな〜と思っていたこともあり、思い切ってお引き受けさせていただいきました。
ずいぶん長々とした記事が続いたので、今日はさくっと、「続きを読む」をCSSでボタンにする方法をご紹介します。
「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ（6）で、「続きを読む」を画像に置き換える方法などを書きましたが、今回はCSS3をつかってカラフルなボタンをつくります。
長々と書いてきましたが、CSSのロールオーバーの基本的な考え方はなんとなく分かっていただけたでしょうか。
今日は『完結編』ということでWebourgeonのフッターのメニューを実際に作ってみたいと思います。
Webourgeon フッターの作り方として、カスタムメニューを画像に置き換える方法について書いています。
前回は背景画像の表示についてとテキストを画像に置き換えるところまでを書きました。今日はその背景画像をCSSでロールオーバーさせる仕組みについて書きたいと思います。
これが分かれば、Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみるではテキストの横にロゴを表示させるのみでしたが、全体を画像にする事もできます。
理解してしまえば、一粒で2度、3度、おいしいですよ。がんばっていきましょう。
続きを読む
前回は、カスタムメニューを画像に置き換える方法の下準備まで書きました。
今日は、背景画像の表示のおさらいと、画像置き換えの基礎について書きたいと思います。苦手な方はぜひどうぞ。結論が知りたい方、もう少しおつきあい下さい。
では、いきますよ〜〜
Twenty Tenのstyle.cssを見ると、
=Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
というコメントで始まる部分があります。
Twenty TenのCSSにコメント入れてみた 長いから前半までねでちょっとだけ触れましたが、この部分がいわゆるリセットCSSになります。
このリセットCSSっていったいどういうものなんでしょうか。
WordPressのテーマTwenty Tenのカスタマイズを中心にブログを書いていますが、テーマを解説して、「ここを変えればいいですよ」という所までで、CSSの細かいところまではなかなか書ききれないように感じていました。検索されているキーワードや、昨日いただいたコメントのことなども考えると、もう少しCSSについて突っ込んで書いてみてもよいのかな、と思いました。そこで、「はじめてでもきっと分かるCSSの小技」として、主にテーマのカスタマイズで取り上げたCSSについて少し詳しく書いてみることにします。
第一弾は、なんとなくアクセスの多い気がする、ヘッダーのロゴに関連して、「文字の後ろや左に背景画像を入れる」、いきます！