そろそろ、メインの部分のカスタマイズについて考えてみたいと思います。
ヘッダーについてもまだまだあると思いますが、「CSSでの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>
Twenty Tenテーマは「アイキャッチ画像」というのに対応しているので、管理画面から簡単にそのページごとにヘッダーの画像を変える事が出来ます。
今回は、ページで作ったABOUTのページに違う画像を適用してみようと思います。
サイトのタイトルと説明文の変更をしたので、次はメインのイメージの変更をしてみます。
メインのイメージとなる画像は、管理画面から設定できるようになっています。
まずは標準の機能を使ってみます。
Twenty Tenテーマヘッダー部分のデザインの変更のために、テーマがどのようになっているかをみてみます。
メインのイメージ部分までの「branding」と、メニュー部分の「access」の大きな2つの部分からできていることがわかります。まずは、「branding」の部分を考える事にします。
Twenty Ten テーマの大まかなレイアウト構成を見たので、
それぞれにどんなスタイルが割り振られているかを見ながら、
レイアウト(デザイン)の変更を考えます。
WordpPress3.0のTwenty Ten テーマのカスタマイズの第一歩として、
テーマのコードはあまり変えず、CSSで見栄えを変えていくことから
始めていきます。
このテーマは、非常に細かくidやclassが割り振られているので、
CSSのみでも全く違う雰囲気のものができあるはず。
ちょっとした工夫で、サイトの量産も?
また、この割り振りと知っておくと、
後々テーマのコードを見たり、
いじったり、というときに役に立ちます。
まずは、Twenty Ten テーマの、大まかな
レイアウト構成を見てみます。
このサイトは旧、サブドメインのサイトから、
新たにドメインをとって、今日引っ越してきました。
旧サイトの立ち上げが、9月27日でした。
基本的にはTwenty Ten のテーマをそのまま使って記事を書き、
これと行ったSEOもそれほどしていませんでした。
Googleにサイトマップを送信して、
Analyticsのコードをいれたのみ。
まだまだと思っていたら、