Principleでヘッダやフッタの背景画像を変える

Principleのヘッダやフッタの背景画像を変える方法

公式サイトでもPrinciple-childをインストールしてstyle.cssをカスタマイズする方法が紹介されています。

http://wp-principle.net/custom-child/

子テーマを使ってPrincipleを超簡単カスタマイズ | 初心者にもおすすめ!無料 WordPress テーマ Principle

一番簡単なのは同名ファイルを上書きすること

/wp-content/themes/principle/imagesにあるdenim.jpgを自作画像で上書きするのが簡単です。

png画像を使いたい場合

ヘッダの背景にしたい画像を用意します。
外観→テーマの編集でPrinciple-childのstyle.cssに下記を変更します。

ヘッダタイトルの文字色を変えたい場合

子テーマにデフォルトで変更箇所があります。style.cssの下記の部分を適宜変えてください。

フッタに画像を使いたい場合

デフォルトの子テーマのstyle.cssにフッターの記述はありません。
下記の部分の下にフッター用のcssを記述します。

フッタの文字色を変えたい場合

デフォルトは白なので、背景画像によっては文字が見えなくなりますね。
細かくクラス指定があるようですので、それぞれに文字色を指定します。

  • themeはPrincipleのコピーライト全般
  • principleはPrincipleという文字そのもの
  • copyは自分のサイトのコピーライト

最後にソースコードを変更しないといけない個所があります。
/wp/wp-content/themes/principle/から、/wp-content/themes/principle-child/にfooter.phpをコピーします。
失敗しても子テーマのディレクトリから削除するだけで元に戻るので安心です。

子テーマディレクトリにコピーしたfooter.phpの5~7行目にある、下記の部分を探してください。

埋め込みのスタイルシートの部分 style="color:#fff;"を削除します。

これでフッターも希望の画像背景と文字色でカスタマイズできました。
ヘッダとフッタをカスタマイズ

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




CAPTCHA


Menu

HOME

 TOP