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

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

2010 10/22

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

WordPressのデフォルトテーマであるTwenty Tenのレイアウトのレイアウト変更について考えてきましたが、今日はいよいよ3カラムにしてみたいと思います。普通に３カラムを作る事は、それほど大変な事ではないのですが、Twenty TenでCSSのみの変更で３カラムを作ろうと思うとちょっと面倒な感じがしてしまいますね。

続きを読む →

2010 10/19

Twenty Tenのレイアウトを変える(1)

そろそろ、メインの部分のカスタマイズについて考えてみたいと思います。

ヘッダーについてもまだまだあると思いますが、「CSSでのTwenty tenカスタマイズ」をひととおり考えたら、今度は実際のテーマファイルを編集したりしながら、さらに考えてみたいな、と思っています。

続きを読む →

2010 10/14

カスタムメニューの使い方

メニューのデザインの変更の話をしましたので、管理画面から自由にメニューを作成できる、カスタムメニューの使い方についてみてみます。

新しくメニューを作成する

まず、管理画面の外観＞メニューを開きます。
一番右のエリアに新しくメニューを作っていきます。

続きを読む →

2010 10/13

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>

続きを読む →

2010 10/09

Twenty Tenテーマのヘッダー部分のデザイン変更(2)〜サイトサマリーの調整

次はsite-description の部分の位置調整について考えてみます。

Twenty Tenでは管理画面の　設定＞一般　のキャッチフレーズとして設定した部分が出力されるようになっています。

前回の記事のヘッダー部分のCSSをみると分かるように、site-titleとsite-descriptionは左右にfloatしています。

今回は、サイトのタイトルの下に移動してみる事にします。

続きを読む →