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

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

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

続きを読む

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

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

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

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

続きを読む

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テーマのヘッダー部分のデザイン変更(2)〜サイトサマリーの調整

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

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

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

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

続きを読む

Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみる

Twenty Tenテーマヘッダー部分のデザインの変更のために、テーマがどのようになっているかをみてみます。

メインのイメージ部分までの「branding」と、メニュー部分の「access」の大きな2つの部分からできていることがわかります。まずは、「branding」の部分を考える事にします。

続きを読む

Twenty Ten テーマの構成(レイアウト)-1

WordpPress3.0のTwenty Ten テーマのカスタマイズの第一歩として、
テーマのコードはあまり変えず、CSSで見栄えを変えていくことから
始めていきます。

このテーマは、非常に細かくidやclassが割り振られているので、
CSSのみでも全く違う雰囲気のものができあるはず。
ちょっとした工夫で、サイトの量産も?

また、この割り振りと知っておくと、
後々テーマのコードを見たり、
いじったり、というときに役に立ちます。

まずは、Twenty Ten テーマの、大まかな
レイアウト構成を見てみます。

続きを読む

WordPressとSEO

このサイトは旧、サブドメインのサイトから、
新たにドメインをとって、今日引っ越してきました。

旧サイトの立ち上げが、9月27日でした。

基本的にはTwenty Ten のテーマをそのまま使って記事を書き、
これと行ったSEOもそれほどしていませんでした。

Googleにサイトマップを送信して、
Analyticsのコードをいれたのみ。

まだまだと思っていたら、

続きを読む