もし、あなたがWordPressをビジネスに活用したいと思っているなら……もし、あなたがTwenty Elevenを自由にカスタマイズしたいと思っているなら……
もし、あなたが検索や調べる労力を省いて、手っ取り早く思い通りのデザインにしたいと思っているなら……
コピペでできるCSSカスタマイズが28個記載されたこのマニュアルを使ってみてください。
このマニュアルを使用すれば以下のカスタマイズが簡単に行えます。
章立て
ヘッダーカスタマイズに関するCSS
- ヘッダーの上にある線（border）を消す
- サイトタイトルやキャッチフレーズ左の余白を消す（左詰めする）
- 検索フォームを消す
- サイトタイトルの色・大きさを変える
- サイトタイトルを中央に表示する
- サイトキャッチフレーズ（サイトディスクリプション）を中央に表示する
- サイトタイトル上部の余白を調整する
- サイトタイトル（キャッチフレーズ）下部の余白を調整する
- ヘッダーの高さを調節する
グローバル（ナビゲーション）メニューに関するCSS
- メニューの背景色を変更する メニューの文字色（１階層目）を変更する
- メニューの文字色・大きさ・背景色（２階層目以降）を変更する
- メニューの高さを変更する
- メニューにカーソルを合わせた場合の背景色や文字色（１階層目）を変更する
- メニューにカーソルを合わせた場合の背景色や文字色（２階層目）を変更する
- 訪問中のページに該当するメニューをhover状態と同じスタイルにする
- 『訪問中のページに該当するメニューをhover状態と同じスタイルにする』をトップページのみ適用させない
- メニューを均等配置にする（メニュー各項目幅を調節する）
サイト全体に関するCSS
- サイトの背景を変更する
- ヘッダー部分のみ背景を変更する
- コンテンツ部分の背景を変更する（フッター部分は含みません）
- フッターの背景を変更する サイトヘッダー上の余白とフッター下の余白を消す
- ヘッダー・コンテンツ・サイドバー・フッターを分離・独立させる
コンテンツに関するCSS
- 記事タイトルの大きさ・色などのスタイルを変更する
- メタ情報（投稿者名・カテゴリー・タグなど）を消す
- 投稿日時を消す
- 個別投稿ページにサイドバーを表示する
……などなど。内容は随時追加・更新予定。マニュアルをダウンロードすると無料で読めるニュースレターに登録されますので、その中で更新情報をお知らせしていきます。
“WordPressで集客サイトを作るために最低限必要なカスタマイズがコピペで簡単にできるTwenty Eleven CSS 逆引きマニュアル” への7件のフィードバック
2013年４月５日（金）・・・「Twenty Eleven CSS 逆引きマニュアル」追加版（ Ver 1.2？→ｐｄｆに1.1．2とありました！）公開のメールを頂きました。そういえば、２か月ぐらい前にVer 1.0をリクエストしたことを思い出しました(笑)
ともあれ、公開のご連絡、誠にありがとうございます。
ワードプレスを学び始めて３か月、テーマ2011の構造も少しづつわかってきた矢先。今回の32項目ほどのｃｓｓを中心としたカスタマイズ記述のまとめ。自分の学習過程の節目としても大変有用なものになりそうです。
ざっと拝見しました。欲を言えば、ｃｓｓの記述に実際の表示変化の様子図が添えられていたら初心者にとっては完ぺきな資料となりましょう・・・これは自分のノルマとしなければなりませんね・・・重ね重ねお礼申し上げます。
マニュアルの更新ご苦労さまです。ロゴのサンプルサイト便利そうですね!活用させて頂きます。
勝手な要望で申し訳ないのですが、Twenty Elevenのレスポンシブは、デフォルトのままだと、スマートフォンなどで表示した際に、上段のサイトタイトルと検索フォームが重なってしまいます。
重ならないようにする例などがあると助かります。
いつも役に立つ情報ありがとうございます。あまり詳しいことはわかりませんが、とても助かっています。
ここいいですね、カスタマイズ系の記事は、どこを改造すればいいのかズブの素人にはわかりにくいことが多いのですが、ここはわかりやすくて助かります
お手紙、いつもありがとうございます。
悠平さんに二つ質問がございます。もし時間がとれるようであれば教えていただけないでしょうか。
① 次のwordpressは3.6と聞いていますが、デフォルトテーマがそれにともないまた変わるそうです。このままtwentyelevenをつづけてもいいのでしょうか。それともwordpressのバージョンがあがれば、テーマもかえたほうがいいのでしょうか。
② コンテンツのフィードを、CSSだけでグリッドデザインする方法はあるのでしょうか、参考になるサイトがあれば教えていただけないでしょうか。わたしは以下のような記述をつかっていますが、レスポンシブには対応できません。
.content {
width: 730px;
margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8 {
float: left;
display: inline;
margin: 4px 0 4px 17px;
padding: 10px 0;
}
.grid1 {width: 66px;}
.grid2 {width: 149px;}
.grid3 {width: 232px;}
.grid4 {width: 315px;}
.grid5 {width: 398px;}
.grid6 {width: 481px;}
.grid7 {width: 564px;}
.grid8 {width: 647px;}
.first {margin-left: 0; clear: left;}
.cf:before,
.cf:after {
content: “”;
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
悠平さんはコピーライターがご専門なんですね。お仕事、がんばってください。
どうしてもお時間がとれないようであれば、この手紙はなかったことにしてください。よろしくお願いいたします。
ご質問への回答を記事にしてアップしました。
▶ ①への回答はこちら
▶ ②への回答はこちら
素晴らしいマニュアルありがとうございます＾＾