TwentyEleven フッターの高さ調整

ワードプレステーマTwentyElevenのフッターエリアの高さの調整方法です。

フッターの文字(リンク色)の変更方法はコチラ。フッターエリアの背景色の変更方法はこちらを参照下さい。

それでは、管理画面より「外観」⇒「テーマ編集」より’スタイルシート’を開き、次の箇所を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

/* =Footer
----------------------------------------------- */

#colophon {
	clear: both;
}

~~~~~~~~~ 中略 ~~~~~~~~

/* Site Generator Line */
#site-generator {
	background: #f9f9f9;  /* 背景色 */
	border-top: 1px solid #ddd;  /* フッター上の線 */
	color: #666;  /* 文字色 */
	font-size: 12px;  /* 文字の大きさ */
	line-height: 2.2em;  /* 行間(文字の高さ) */
	padding: 2.2em 0.5em;  /* 余白(上下、左右) */
	text-align: center;  /* 文字の表示位置 */
}
#site-generator a {
	color: #555;  /* フッターのリンク色 */
	font-weight: bold;
}

上記の’padding’の部分です。

このpaddingには、ボックスと言う概念があります。ココが初心者に分かりにくいところじゃないかと思います。正直、私も大変苦労しました…(汗 最初は全然分かりませんでしたから。。

で、こちらのページが分かりやすいかな?と思いますので、参考にしてみて下さい。

参考ページ:CCSの基本-ボックス

または、当サイトの記事でも紹介していますので、そちらを参考してみても良いでしょう。⇒ヘッダー部の余白について

emはpx同様単位です。1emで1行分に相当します。もちろん、pxの方が分かりやすければ、pxで指定する事もできます。

数値はいくらでも変更が可能なので、変更してページを表示させて見るをしていると、だんだん分かってくるんじゃないかなぁって思います。

フッターの高さは、この2.2emの数値を変える事で調整できます。3emにすれば、高さが高くなります。1emにすれば、狭くなります。

これで、フッター部の高さ調整が出来たと思います。

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です