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

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

「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ(6)

今日は何かと問題になる「続きを読む」についてです。「more」っていうやつですね。

これは、皆さんもご存知の、エディタで「more」を挿入すれば自動で入るタグなんですが、Twenty Tenではどのように出力されるようになっているのでしょうか。

続きを読む

記事本文(entry-content)〜Twenty Ten メイン部分のCSSカスタマイズ(5)

Twenty Ten今日は記事本文の部分のCSSカスタマイズについて考えていきたいと思います。

記事の本文は「entry-content」というクラス名のdivで囲まれます。これはトップページでも、個別の記事ページ(シングルページ)でも、その他の一覧ページでも共通です。また、投稿ではない、静的ページの本文も同じです。

続きを読む

Twenty Tenのレイアウトを変える子テーマ(追記)

Twenty Tenのレイアウトを変える子テーマ(CSSファイル)つくりましたで、Twenty Tenのレイアウトを変える子テーマのCSSファイルをダウンロードしていただけるようにしてみましたが、解凍がうまくいかない、というコメントがありましたので、追記として、こちらにファイルの内容を公開します。

続きを読む

投稿日にアイコンをつける(entry-meta)〜Twenty Ten メイン部分のCSSカスタマイズ(4)

Twenty Tenのメイン部分のCSSカスタマイズ、今日はタイトルの下に表示される、投稿日や作成者などの部分のCSSについて考えたいと思います。投稿日はテーマによってはカレンダー風に表示させたりと、デザインしがいのある部分でもありますね。まずはTwenty Tenでどのようになっているのか、基本を確認してみたいと思います。

続きを読む

変化するentry-title(記事タイトル)〜Twenty Ten メイン部分のCSSカスタマイズ(3)

今日はブログにとってとても重要な部分である、記事のタイトル部分について調べてみます。

記事タイトルは「記事ごとにCSSをわりあてる」で見た記事ごとの囲みのすぐ下に「entry-title」というクラス名で書き出されます。この「entry-title」というクラス名はトップページやその他のページに行っても不変ですが、変化する部分があります。

続きを読む

記事ごとにCSSをわりあてる(記事固有のid)〜Twenty Ten メイン部分のCSSカスタマイズ(2)

WordPressのデフォルトテーマであるTwenty Ten のメイン部分のCSSについて見ています。前回は記事の上下に現れるナビゲーションについて考えました。今回は記事の部分に入っていこうと思います。Twenty Ten では、記事それぞれにidを割り振っているので、そのあたりをみていきましょう。

続きを読む

Twenty Ten メイン部分のCSSカスタマイズ〜ナビゲーション

Twenty Ten のメイン部分のCSSについて見ていくことにします。トップページのソースを見てみましょう。前にも見た通り、メインの部分はmain>container>content という入れ子になっています。

その下に「nav-above」というidをもったひとかたまりの記述があります。

続きを読む

Twenty Tenでページごとにデザインを変えるために

Twenty TenをCSSでカスタマイズしていくために、大まかなレイアウトの構成、ヘッダーやメニューの簡単なデザイン変更、カラムの変更、などについて考えてきました。

前にも少し触れましたが、Twenty Tenでは非常に細かくclassやidが振られるようになっています。これを利用すれば、ページごと、カテゴリーごと、などでデザインを変えていく事が出来ます。テーマを変える事で、大きくレイアウトや出力される内容を変える事も自由にできますが、今回はCSSに限定して考えてみたいと思います。

続きを読む

Twenty Tenのレイアウトを変える(6)〜1カラムにする

WordPressのデフォルトテーマであるTwenty Tenのレイアウトを変えることについて考えてきましたが、今日は1カラムにしてみたいと思います。

Twenty Tenにはデフォルトで1カラムのテンプレートが入っていますが、残念ながら、投稿ではなく、ページのテンプレートとして呼び出す事しかできません。

続きを読む