【Cocoon】フッターの設定方法とカスタマイズ

こんにちは、yuji（@yujiblog）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

ブログ初心者なりに、フッターをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、フッターは以下のようなデザインにしています。

このようにサイドバーと同様のコンテンツを配置することで、ブログ全体の構図が読者に伝わりやすくなります。

この記事では、以上のようなCocoonのフッターを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2024年】おすすめWordPressテーマ15選【初心者向けランキング】

目次をチェック

フッターの設定方法
「カスタマイズが上手くいかない…」と感じる方へ
- 多くの人に読まれる記事を書こう
- アフィリエイト神ツールを使いこなそう

フッターの設定方法

Cocoon/ホワイトラーメンのデフォルトでは、フッターは未設定なので表示されていません。

また、Cocoonの全体的な基本設定がまだの方は以下の記事をご覧ください。
》Cocoonの使い方とおすすめ初期設定

フッター（PC用）のウィジェット設定

まずは、PCで表示されるフッターを設定します。

１．WordPressメニューの「外観」から「ウィジェット」を開きます。

２．「フッター左」「フッター中」「フッター右」にコンテンツを追加していきます。

※「ウィジェット管理画面が違う…」という方は以下で操作画面を設定してください。
》WordPress5.8以降でウィジェット画面をもとに戻す方法

３．左側に並んでいる一覧から「[C]プロフィール」を選択し、「フッター左」にチェックを入れて「ウィジェットを追加」をクリックします。

４．「フッター左」に「[C]プロフィール」が表示されるので、「画像を円形にする」にチェックを入れて「保存」をクリックしてください。

５．同様に「カテゴリー」を「フッター中」に、「タグクラウド」を「フッター中」に追加します。

フッター（モバイル用）のウィジェット設定

続いて、スマホで表示されるフッターを設定します。

こちらも同様に「フッター（モバイル用）」に「[C]プロフィール」「カテゴリー」「タグクラウド」を追加してください。

これでウィジェット設定は完了です。

スタイルシートにコードをコピペする

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (style.css)」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

編集前に必ずスタイルシートのバックアップを取る
編集するテーマが「CocoonChild」になっていることを確かめる
「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく

/************************************
****　フッター
************************************/
#footer, #footer a, .footer-title {
color: #545454;
}
.footer-title{
border-bottom:3px dotted;
border-color:#90C31F;/*点線の色変更はこちら*/
margin-bottom:1em;
}
@media (max-width:1023px){
.footer {
margin-top: 0;
padding-top: 0;
}}
@media screen and (max-width: 480px){
h2, h3 {
font-size: 1.17em;
}
}
.footer-widgets, .footer-widgets-mobile {
margin: 0 auto;
}
.footer-left, .footer-center, .footer-right, .footer-mobile {
padding: 0 10px;
}
.widget.widget-footer-mobile{
padding:0;
}
.widget-footer-mobile div.tagcloud,.widget-footer-mobile ul li a{
margin-right:.2em;
margin-left:.2em;
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}

３．コピペができたら「ファイルを更新」をクリックします。