カテゴリー別アーカイブ: CSSで考えるTwenty Ten カスタマイズ

WordPress3のデフォルトテーマであるTwenty Tenのカスタマイズを、CSSの面から考えていきます。

WordBench東京でお話させていただきました

まだWordCamp Tokyoの興奮も冷めない感じでいるところですが、そのWordCamp Tokyoの前日、WordBench東京の勉強会&交流会でお話をさせていただいてきました!

始めにお話を頂いたときは本当にびっくりして「ホントに私でいいんですか?」と思いましたが、お話を聞いてみると、
「もっともっと色々な方にWordPressに親しんでもらいたい」
というお話で、それは私が思っていることでもあったし、少しずつ誰かに何かを返していかないとな〜と思っていたこともあり、思い切ってお引き受けさせていただいきました。

続きを読む

追記をしました

前の記事になりますが、Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(2)で画像置き換えの方法のひとつをご紹介させて頂きました。

コメントを頂き、この方法についての記述が不十分でしたので、追記をさせていただきました。

ご覧いただき、画像置き換えについてはメリット、デメリット、また様々な方法がありますので、どうぞ、十分に注意してお使いください。

お仕事に追われている間にWordPressも3.2になり、新しい標準のテーマ、Twenty Elevenも出てしまいました!
そろそろこちらのことについても書いていかなければ、と思っています。

今日は、お知らせまで。

[CSS3]コピペで使える「続きを読む」をCSSでかわいいボタンに変えるコード

ずいぶん長々とした記事が続いたので、今日はさくっと、「続きを読む」をCSSでボタンにする方法をご紹介します。

「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ(6)で、「続きを読む」を画像に置き換える方法などを書きましたが、今回はCSS3をつかってカラフルなボタンをつくります。

続きを読む

Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(4)『完結編』

長々と書いてきましたが、CSSのロールオーバーの基本的な考え方はなんとなく分かっていただけたでしょうか。

今日は『完結編』ということでWebourgeonのフッターのメニューを実際に作ってみたいと思います。

続きを読む

Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(3)

Webourgeon フッターの作り方として、カスタムメニューを画像に置き換える方法について書いています。

前回は背景画像の表示についてとテキストを画像に置き換えるところまでを書きました。今日はその背景画像をCSSでロールオーバーさせる仕組みについて書きたいと思います。

これが分かれば、Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみるではテキストの横にロゴを表示させるのみでしたが、全体を画像にする事もできます。

理解してしまえば、一粒で2度、3度、おいしいですよ。がんばっていきましょう。
続きを読む

Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(2)

前回は、カスタムメニューを画像に置き換える方法の下準備まで書きました。

今日は、背景画像の表示のおさらいと、画像置き換えの基礎について書きたいと思います。苦手な方はぜひどうぞ。結論が知りたい方、もう少しおつきあい下さい。

では、いきますよ〜〜

続きを読む

Webourgeon フッターの作り方〜カスタムメニューを画像に置き換える(1)

カスタムメニューを画像に置き換える方法についての、リクエストをいただきました。

Webourgeonのブログでもサイト上部やフッターのメニューをカスタムメニューを使って作り、画像に置き換えています。ということで、「Webourgeonのフッターの作り方」を大公開!

いえ。大公開ってほどのものでもないですが。。

本当はもっとかっちりしたメニューっぽいメニューの方がいいんでしょうが、こんな不規則な感じでもいけますよってことで、おつきあい下さい。

続きを読む

WordPressギャラリーを使ってみる(WordPress 3.1以降)

WordPressで本格的なギャラリーサイトを作っているような方は、素敵なギャラリー用のテーマもたくさんありますし、プラグインも色々あるようなので、そういうものを使っているのではないかと思います。

でも、ちょこっと写真を並べたい、とかそんな時には結構使える(?)デフォルトのギャラリー機能。

3.1になって追加された投稿フォーマットのことも調べながら、ギャラリー機能について見ていこうと思います。

続きを読む

Twenty Tenでメニューエリアをブラウザいっぱいに広げてみる

「メニューによってHeaderとContentを上下分離するような形(width: 940pxから無限)にしたいのですが、どの値を変更すれば良いかご教授いただけないでしょうか。」

次の記事に何を書こうかな、と考えていた所、コメントでこのような質問をいただきました。たまたまそのようなデザインでテーマをいくつか作成したところでもありましたので、よい機会かもしれないと思い、今回はこのことについて考えてみたいと思います。

続きを読む