Twenty TenをCSSでカスタマイズしていくために、大まかなレイアウトの構成、ヘッダーやメニューの簡単なデザイン変更、カラムの変更、などについて考えてきました。
前にも少し触れましたが、Twenty Tenでは非常に細かくclassやidが振られるようになっています。これを利用すれば、ページごと、カテゴリーごと、などでデザインを変えていく事が出来ます。テーマを変える事で、大きくレイアウトや出力される内容を変える事も自由にできますが、今回はCSSに限定して考えてみたいと思います。
WordPressのデフォルトテーマであるTwenty Tenのレイアウト変更についていろいろと考えてきました。それぞれのページでCSSを書いてきましたが、すべてまとめたファイルをつくりましたので、公開したいと思います。
WordPressのデフォルトテーマであるTwenty Tenのレイアウトを変えることについて考えてきましたが、今日は1カラムにしてみたいと思います。
Twenty Tenにはデフォルトで1カラムのテンプレートが入っていますが、残念ながら、投稿ではなく、ページのテンプレートとして呼び出す事しかできません。
WordPressのデフォルトテーマであるTwenty Tenのレイアウトのレイアウト変更について考えてきましたが、今日はいよいよ3カラムにしてみたいと思います。普通に３カラムを作る事は、それほど大変な事ではないのですが、Twenty TenでCSSのみの変更で３カラムを作ろうと思うとちょっと面倒な感じがしてしまいますね。
WordPressのデフォルトテーマTwenty Tenのコンテンツとサイドバーのレイアウトの仕組みと、幅の変え方について考えたので、次はコンテンツとサイドバーの左右を入れ替えてみたいと思います。
Twenty Tenのレイアウトを変える(1)で、Wordpress のデフォルトテーマであるTwenty Tenで、コンテンツを左に、サイドバーを右にしている仕組みについて考えました。
これをもとにTwenty Tenのレイアウトを変えていきたいと思います。
そろそろ、メインの部分のカスタマイズについて考えてみたいと思います。
ヘッダーについてもまだまだあると思いますが、「CSSでのTwenty tenカスタマイズ」をひととおり考えたら、今度は実際のテーマファイルを編集したりしながら、さらに考えてみたいな、と思っています。
メニューのデザインの変更の話をしましたので、管理画面から自由にメニューを作成できる、カスタムメニューの使い方についてみてみます。
まず、管理画面の外観＞メニューを開きます。
一番右のエリアに新しくメニューを作っていきます。
ヘッダー部分の印象を大きく左右する、メインメニュー（グローバルナビゲーション）部分のデザイン変更について考えてみたいと思います。
まずは、この部分のhtmlがどのように出力されているのか見て見ることにします。「access」というdivで囲まれた部分が今回の変更したい部分です。
<div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="コンテンツへ移動">コンテンツへ移動</a></div>
<div class="menu">
<ul>
<li class="current_page_item"><a href="http://webourgeon.net/" title="ホーム">ホーム</a></li>
<li class="page_item page-item-2"><a href="http://webourgeon.net/about/" title="ABOUT">ABOUT</a></li>
</ul></div>
</div><!-- #access -->
「skip-link、screen-reader-text」というクラス名がついた、「コンテンツへ移動」というのはスクリーンリーダーなどで、繰り返し同じメニューが読見上げられてしまう事を避けるためにつけられたリンクです。普通の状態ではテキストは隠されています。「アクセシビリティに配慮してある」、ということがいえると思います。
<div class="skip-link screen-reader-text"><a href="#content" title="コンテンツへ移動">コンテンツへ移動</a></div>