賢威フッターの背景・見出し・文字色のデザイン変更方法

WordPressテーマ賢威のフッター領域の「背景色・文字色・見出しの背景色・見出しの文字色」のデザイン変更方法を紹介します。

例として、デザイン変更の前の状態は以下のようなフッターの状態だったとして説明していきます。
賢威 フッター 背景色 見出し 文字色 デザイン変更方法 フッター領域 編集前

  • フッター領域の背景色:灰色
  • フッター領域の文字色:白
  • 見出しの背景色:白
  • 見出しの文字色:黒

今回のデザイン変更は「design.css」を編集していきます。

初心者の方は少し抵抗があるかもしれませんが、順番に作業していけばそれほど難しくないので、記事を確認してやってみてください。

賢威フッターの背景色と文字色のデザイン変更方法

WordPressのダッシュボード
「外観」→「テーマエディター」をクリックします。
WordPressの外観のテーマエディター
 

「design.css」をクリック。
WordPress 画像 設定 縁 枠線 影 角丸 プラグイン不要 外観 テーマエディター design.css
 

「design.css」内にある以下のコードを探します。

以下の9行目で「フッターの背景色」を指定し、10行目で「フッターの文字色」を指定しています。

今回は、背景色を「#959595」→「#90EE90(lightgreen)」、文字色を「#fff」→「#FF0000(red)」へ変更します。

編集したら【ファイルを更新】をクリックします。
賢威 画像 サイズ はみ出す サイト幅 自動 変更 カスタマイズ 外観 テーマエディター ファイルを更新
 

これで、以下のようにフッター領域の背景色と文字色が変更されます。
賢威 フッター 背景色 見出し 文字色 デザイン変更方法 背景色と文字色を変更
 

賢威フッターの見出し背景色と文字色のデザイン変更方法

次にフッター部分の見出しデザインの変更方法を紹介します。

先程と同様に「design.css」の編集になります。

フッターの見出し部分のデザイン指定は「design.css」内の以下の部分で設定されています。(先程の背景色指定コードの少し下にあります)

今回は、見出しの背景色を「#fff」→「#00FFFF(aqua)」、見出しの文字色を「#333」→「#EE82EE(violet)」へ変更します。

編集したら【ファイルを更新】をクリックします。
賢威 画像 サイズ はみ出す サイト幅 自動 変更 カスタマイズ 外観 テーマエディター ファイルを更新
 

これで、以下のようにフッターの見出し背景色と文字色が変更されます。
賢威 フッター 背景色 見出し 文字色 デザイン変更方法 見出しの背景色と文字色を変更

我ながらかなり色彩センスのない配色ですね。。。^^;
 
 
以上、賢威のフッター領域のデザイン変更方法を紹介しました。

この記事を参考にオリジナルのフッターデザインにカスタマイズしてみてください。

 

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA