ブログは進化する！フッダーのブログデザインをオシャレに設定、カスタマイズしちゃおう！

※この記事の作成者

この記事は以下の内容を書いています

• 誰でも簡単にフッダーデザインを変更できる方法

ブログ運営をしている方はこの悩みにぶつかる事が多いじゃないでしょうか？

現在、私のWordpressのテーマは「Cocoon」を利用しています

今回の目的「フッターデザイン」についてですが、私は以下のようにしています

フッターの左に「プロフィール」、中央に「サイトのリンク」、右に「Twitter」を配置しています

さらに、「運用情報」「サイトマップ」「プライバシーポリシー」などのブログ運営をしていく上で必要な項目を一番下に表示しています

これらはあまり、読者がみることもないのでこの辺にまとめてしまって良いです

会社の公式サイトを見てみると同じように一番下に配置しています

その他にもデザインを整える方法はありますが、全体的に整備されていると見にきてくれた人の印象もだいぶ変わってきますよね

そこで、今回はブログデザインのカスタマイズの１つ「フッターのデザイン変更」について解説をしていきます

少しでも私のブログデザインに興味を持ってもらい同じように挑戦してもらえれば幸いです

フッターの配置変更の仕方

まずはフッター左にプロフィールを表示させるために、外観＞ウィジェットを選びます

左側の一覧の中から「[C]プロフィール」をクリックするとどこに表示するか選ぶことができます

そして、「フッター左」を選び「ウィジェットを追加」とすると右側のフッター 左にプロフィールが追加されます

タイトルや、表示する画像の形などを選び「Saved」をクリックすれば完了です

同様に、フッダー中とフッダー右も設定すればOKです。まず、フッター中は「[C]テキスト」を利用して当サイトのリンクについて載せます

最後にフッター右にはTwitterのタイムラインを載せます

Twitterのタイムラインを載せるには下記のサイトでコードを取得する必要があります

Twitter Publish

publish.twitter.com

取得したコードをテキストに貼り付けてSavedすれば自分のTwitterのタイムラインが載せれます

ここまでがPCのみの設定方法です

スマホもフッダーデザインをカスタマイズするにはやり方は同じですが、設定をしなくてはいけません

スマホのフッターの配置変更

PCの時と同じで外観＞ウィジェットを選んで右側にある「フッター（モバイル用）」に入れたいウィジェットを追加していきます

私の場合は「[C]プロフィール」「カテゴリー」「[C]テキスト（モバイル用）を選んでいます

自分が入れたいものを左側の一覧より選んで「フッター（モバイル用）」を選択してウィジェットの追加をクリックすればスマホのウィジェットの設定は完了です

次にフッターに表示されている項目の見出しのデザインを変更していきます

フッターのデザイン変更

まずは外観＞テーマエディターを選び、「Style.css」に移ります

そして、以下のCSSコードを入力していきます（コピペ可）

/*フッターデザイン変更*/
.footer-title{
color:#404040;
border: none;
padding:0;
border-bottom:3px solid #404040;
margin-bottom:1em;
}

.footer-title-center:before{
border-top:3px solid #b0c4de;
line-height:1.8em;
position:absolute;
padding:1em 0.5em 0;
margin:0; /* 線の位置調整　上　左右　下 */
left:0;
width: 20%;
height: 6px;
content:'';
}

.footer-title:first-letter{
font-size: 150%;
color:#4682b4;
}

.footer-widgets{
font-size:15px;
line-height:1.0;
}

CSSコードの入力が終わったら「ファイルの更新」をして保存します

これでフッターのデザイン変更は終了です

最終確認をする

自分が思い描いたデザインに変更されているか確認をしましょう

問題なくできていれば終了です

もし、上手く表示されていないなどの不具合があった場合はCSSコードの入力間違いなどがないか確認をしてみましょう

意外と入力ミスなどあったりするので細かく見ていきましょう

どうしても上手くいかない場合は直接、私まで問い合わせてもOKです

気軽にコメントください

まとめ

いかがでしたか？

今回はフッターのデザイン変更について紹介をしました

ブログデザインはやりだしたら見出しやブログカードの形、文字の色などたくさん変更したい項目があります

たくさんありますが、慌てず少しずつ変更していき自分の目指すブログデザインにしていきましょう！

それでは、また

@Sho_Ceed