ヘッダー・フッター・ナビメニューなどを横幅いっぱいに広げるCSSの書き方-Twenty Twelve篇- – PresentNote
よく他のウェブサイトをデザインの参考に見ていると、ヘッダーの背景やフッターの背景、またグローバルナビゲーションメニューなどが横いっぱいに広がっているデザインを見かけます。サイトコンテンツは中央に配置されているのに、背景だけ横いっぱい、ブラウザいっぱいに広がっているのです。 以前、Twenty Eleven でこのようなデザインに変更するための方法を記事にしました。今回は Twenty Twelve で同じようにできないかやってみましたので、その方法をお伝えしたいと思います。 基本的な考え方は Twenty Eleven の場合と同じですが、Twenty Twelve の場合、元の CSS に書かれているある記述のせいでつまずいてしまいました。そのつまずき部分を解消し、ヘッダーやフッターなどの背景をブラウザの画面いっぱいに広げ、ダイナミックなレイアウト・デザインへと変更する方法をお伝えしたい
【Twenty Twelve】記事抜粋と全文表示とアイキャッチ画像のカスタマイズ
トップページやカテゴリー、アーカイブ別に投稿記事を表示するときは、アイキャッチ画像を記事横に小さく表示するのと同時に記事も抜粋表示して、記事をシングルページで表示するときはアイキャッチ画像を大きく、記事を全文表示にする方法について。 【記事抜粋の表示例】 シングルページか否かでアイキャッチ画像の表示サイズを変更する【Twenty Twelve】アイキャッチ画像の表示位置とサイズのカスタマイズ記事を以前書きました。それを土台にして、トップページなどでは記事抜粋表示にするためにcontent.phpファイルを内容を編集します。 content.phpファイルのdiv.entry-contentの部分を以下のコードに変更します。 シングルページ以外では、アイキャッチ画像をサムネイル表示して記事抜粋に、シングルページではアイキャッチ画像を大サイズにして記事全文を表示するコードになります。 <div
【Twenty Twelve】アイキャッチ画像の表示位置とサイズのカスタマイズ
Twenty Twelveのテーマで、トップページなどで投稿記事一覧が表示されているときは、記事本文の横にアイキャッチ画像を小さく表示しておいて、記事をシングルページに移動するとアイキャッチ画像を大きく表示する方法について。 記事本文の横にアイキャッチ画像を表示する方法については、【Twenty Twelve】アイキャッチ画像の表示位置カスタマイズ1の記事にあるように、content.phpファイルにあるthe_post_thumbnailのコードを場所を移動させますが、ここではstyle.cssファイルに以下のコードを追加する変更だけします。 .entry-content img.attachment-thumbnail { float: left; margin-right: 15px; } 次に、content.phpファイルにあるdiv.entry-contentタグの中身を変更し
【Twenty Twelve】アイキャッチ画像の表示位置カスタマイズ1
Twenty Twelveでアイキャッチ画像は、記事タイトル上に表示されます。 そのアイキャッチ画像の表示位置を記事本文の横に表示するカスタマイズについて。 content.phpファイルにあるthe_post_thumbnail()を「div.entry-content」の後ろに移動させます。また、the_post_thumbnail()に引数を「’thumbnail’」を設定します。 <div class="entry-content"><?php the_post_thumbnail('thumbnail'); ?> style.cssファイルに以下のコードを追加します。 .entry-content .attachment-thumbnail { float: left; margin-right: 15px; margin-bottom: 10px; } 【追記】 トップページで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
