Twenty Fourteenテーマのカスタマイズ - ヘッダ/フッタ/サイドバーの背景色を変更する[WordPress]

0

Twenty Fourteenテーマは WordPressデフォルトでインストールされているテーマの一つです。 このテーマのレイアウトは少し特異ます。
Twenty Fourteen theme layout
まず、全体の色が黒である点が印象的ですね。 そして上部のヘッダは、固定されて、フレーム式になっており、サイドバーは、左側に位置しています。 (ヘッダを固定する方法は、 Sticky Menu(or Anything!)on Scrollプラグインを使用すると、別のテーマでもあります。)初期にナモウェブエディターなどを使用してホームページを作成するときに、フレーム式でたくさん作った記憶がね。 サイドバーの初期には、左が多かったがいつの間にか右に多く位置しているようです。 ところが、このテーマは、やや特異な左のサイドバー位置ね。 テーマの名前はTwenty Fourteenつまり2014のに全体的なレイアウトは、古典的な感じがしますね。

この記事では、Twenty Fourteenテーマで

  • ヘッダの色を変更
  • メニュー項目の横にアイコンを挿入
  • サイドバーの色を変更する
  • フッターの色を変更
  • フッターCopyrightフレーズの変更
  • 本文の文章コンテンツ領域を増やす

などの簡単な操作により、外観を変更する方法を説明します。

ヘッダの色を変更

まず、ヘッダの色を変更してみましょう。 ヘッダ部分の要素の検査でヘッダ部分の色を簡単に変更することができます。 次のコードをCSSスタイルシートに追加します(CSSコードをスタイルシートに追加する方法は、こちらを参照してしてください)。

#masthead {
background: #084B8A;
}

色の部分は、所望の色に置き換えてください。 (色のカラーコードはここを参照)

これにより、次のように上部の色が変更された確認することができます。
Twenty Fourteen Header color

参考までに、ヘッダー部分のサイトのタイトル(タイトル)のカラーは、次のコードで修正が可能です。

h1.site-title a {
color: #74DF00;
}

サイドバーの色を変更する

続いて、サイドバーの色を変更する方法を説明します。 左側のサイドバーの要素が#secondaryであるため、次のコードを適用試みますか?

#secondary {
background: #B18904;
}

上記のコードを適用してみると、少し問題があることを知ることができます。 つまり、次のようにサイドバー全体に背景色が適用されません。
Twenty Fourteen Sidebar color

Twenty Fourteenテーマは#secondary要素(element)の代わりに.site:beforeを使用します。 したがって、上記のコードで#secondaryを.site:beforeに変わったら正常に適用さを知ることができます。 そして、背景画像を適用するには、background:url( "..."); 形式を使用します。

.site:before {
background: url("URL_Address_of_Image_File") repeat; 
}

サイドバーの背景画像を追加したサンプルのページです。
Twenty Fourteen sidebar background image

メニュー項目にアイコンを挿入

次に、メニュー項目のいずれHomeメニューの前にアイコンを挿入してみましょう。 方法は、 WordPress メニューにアイコンを追加する(CSSを使用)に詳細に説明されています。 この方法に応じて、次のようなコードを挿入ください。

.home_link_icon a{
   padding-left: 30px !important;
   background-image: url(URL_of_HOME_Icon);
   background-position: left;
   background-repeat: no-repeat;
}

.home_link_icon a:hover{
   padding-left: 30px !important;
   background-image: url(URL_of_HOME_Icon) !important;
   background-position: left !important;
   background-repeat: no-repeat !important;
}

これにより、次のようにHome前の家の形のアイコンが追加されます。 アイコンつ追加しただけなのに雰囲気が変わって見えますね。
Twenty Fourteen Home icon added

フッター領域の色と著作権情報の変更

フッター部分の色は、次のようなコードに変更することができます。

footer#colophon {
background: red;
}

もちろんredの代わりにお好みの色に変更してください。

そして「Proudly powered by WordPress「フレーズは、いくつかの方法で変更が可能です。CSSを使用して修正するには、次のようなコードを追加してください。

.site-info {
font-size: 0px;
}

.site-info:before {
content:"ABC사 (c) 2005";
font-size: 12px;
color: #F2F5A9;
}

(フッター領域で著作権フレーズ修正する方法の詳細については、 ここを参照してください。)

その後、フッター領域がどのように変わったのか、サンプルページを確認してみましょう。
Twenty Fourteen change Footer info

記事コンテンツ領域を増やす

Twenty Fourteen post content area
上記の図のようにTwenty Fourteenテーマでは、本文(body)の記事コンテンツ領域が狭いです。 文コンテンツ領域を増やすには、次のようなコードを追加する必要があります。

.site-content .entry-meta,
.site-content .entry-header,
.site-content .entry-content,
.page-content {
margin: 0 auto;
max-width: 800px;
}

これにより、次のように記事本文の幅が広くなったことを確認することができます。
Twenty Fourteen post content area changed

以上で WordPressのTwenty Fourteenテーマのヘッダとサイドバー、フッター部分などを修正する簡単な方法を説明しました。

メモ:

コメントを残す

コメントを入力してください!
名前を入力してください