![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
色を使った装飾やクレジットの表記方法、ロゴの挿入などを設定できます!
参考 WordPressテーマ「Cocoon」をインストールする方法は、こちらの記事にまとめてあります。
参考 フッターメニューの一般的な設定は、こちらの記事で解説しています。
Cocoon設定から「フッター」タブを開く
まずはWordPressにログインしましょう。
「Cocoon設定」を開く
管理画面左側のサイドメニューにある「Cocoon設定」を開きましょう。
![Cocoon設定](https://www.beginner-blogger.com/wp-content/uploads/2021/07/4dd9090381315073815eb552ef23f00d.png)
Cocoon設定のページが開いた直後は、「スキン」タブが開かれていると思います。
「フッター」タブに切り替える
今回は「フッター」タブを使用するので、画面上から「フッター」と書かれた部分をクリックしましょう。
![Cocoon設定:ヘッダー](https://www.beginner-blogger.com/wp-content/uploads/2021/07/c4b19fcb7f13b94fa625d9df66457153.png)
次のような画面が開きます。
![Cocoon設定:「フッター」タブ](https://www.beginner-blogger.com/wp-content/uploads/2021/07/5cc98d8070a2ab382c587f11b070f4e6.png)
設定できる項目
![Cocoon:フッター設定](https://www.beginner-blogger.com/wp-content/uploads/2021/07/dbd033e888eeece63140e26cff2212ec.png)
設定できる項目は、以下の通りです。
- フッター色
- フッター表示タイプ
- フッターロゴ
- クレジット表記
- フッターメニュー幅
ちなみに、「プレビュー」の欄からフッターがどのような見た目になっているかが確認できます。
![Cocoonヘッダー設定:プレビュー](https://www.beginner-blogger.com/wp-content/uploads/2021/07/5077970510608c7cbbf8fe5fac84acf8.png)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
それでは1つずつ見ていきましょう!
フッター色
![Cocoon設定:フッター色](https://www.beginner-blogger.com/wp-content/uploads/2021/07/25eb72889792e3c3e9711918b8f88bda.png)
フッター背景色
名前の通りなので直感的にわかると思いますが、フッター部分の色を設定できます。
例えば水色「 」を設定した場合、次のようになります。
![フッター背景色](https://www.beginner-blogger.com/wp-content/uploads/2021/07/a2acf6a5469d4bf26f41f326b485b7cf.png)
フッター文字色
フッターメニューとクレジット表記、ロゴを設定している場合はロゴ名(下の「フッター表示タイプ」で詳しく説明しています)の文字色です。
![フッター文字色](https://www.beginner-blogger.com/wp-content/uploads/2021/07/1d12e9cd6f085188a276d70ff3c4ecb5.png)
画像は文字色が白色「 」の例です。
フッター表示タイプ
![Cocoon設定:フッター表示タイプ](https://www.beginner-blogger.com/wp-content/uploads/2021/07/ae0ea0a13467d8f643d8cdfaea753132.png)
「フッター表示タイプ」では、フッターに表示する内容と表示の仕方を設定できます。
ロゴ&メニュー&クレジット
ロゴが左下、メニューとクレジットが右寄せのレイアウトです。
![ロゴ&メニュー&クレジット:大画面](https://www.beginner-blogger.com/wp-content/uploads/2021/07/167000313908d6bcec439dd9605fb7fb.png)
使用するスキンによってはレイアウトが異なる場合があります。
参考 スキンについてはこちらの記事をご覧ください。
メニュー&クレジット(左右)
メニューが左、クレジットが右のレイアウトです。
![メニュー&クレジット(左右):大画面](https://www.beginner-blogger.com/wp-content/uploads/2021/07/1d506383db7a62e4f681bcab4adfff20.png)
メニュー&クレジット(中央)
メニューとクレジットの両方が中央寄せで、縦に並ぶレイアウトです。
![メニュー&クレジット(中央)](https://www.beginner-blogger.com/wp-content/uploads/2021/07/6646d488321b7fe1ab074b388d15f8b5.png)
画面サイズが小さくなると、上の3つのどれを選んでも同じレイアウトになります。
![ロゴ&メニュー&クレジット:中画面](https://www.beginner-blogger.com/wp-content/uploads/2021/07/e0f8c8d2e8053273ef429a8c09625057.png)
「メニュー&クレジット」を選んだ場合は、ロゴが表示されないだけでレイアウトは変わりません。
![メニュー&クレジット:中画面](https://www.beginner-blogger.com/wp-content/uploads/2021/07/b9c5542222436f0cbc7355c213bccac3-1.png)
フッターロゴ
![Cocoon設定:フッターロゴ](https://www.beginner-blogger.com/wp-content/uploads/2021/07/2f504701cf8021f1036e89364ca40f93.png)
何も設定しない場合
フッターロゴを設定しない場合、Cocoonのヘッダー設定で設定したヘッダーロゴがフッターにも表示されます。
参考 Cocoonのヘッダー設定については、こちらの記事をご覧ください。
ヘッダーロゴが設定されていない場合、サイト名がロゴとして表示されます。
![ロゴ&メニュー&クレジット:大画面](https://www.beginner-blogger.com/wp-content/uploads/2021/07/167000313908d6bcec439dd9605fb7fb.png)
ヘッダーロゴが設定されている場合、同じ画像がロゴとして表示されます。
![フッターロゴ](https://www.beginner-blogger.com/wp-content/uploads/2021/07/a5420133e180f524d81c76a02653d648.png)
画像を選択した場合
ヘッダーロゴに選択した画像以外を使いたい場合は、改めて画像を選びましょう。
![フッターロゴ:カスタム](https://www.beginner-blogger.com/wp-content/uploads/2021/07/93d95faaf853390c95d7a1a82e2eea18.png)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
複数のロゴを用意している場合などはフッターをうまく活用したいですね。
クレジット表記
![Cocoon設定:クレジット表記](https://www.beginner-blogger.com/wp-content/uploads/2021/07/29ea063625ea23641a84def4742dd1d0.png)
クレジット表記は、「このサイトの著作権は私にあります」という意味を表す記述です。
著作権は本来作成した時点で発生するため明記の義務はないのですが、思わぬトラブルを防ぐためにきちんと表明しておく方がいいです。
- ©︎ 「サイト開設年」 「著作権者表記」
- ©︎ 「サイト開設年」-現在の年 「著作権者表記」
- Copyright ©︎ 「サイト開設年」 「著作権者表記」 All Rights Reserved.
- Copyright ©︎ 「サイト開設年」-現在の年 「著作権者表記」 All Rights Reserved.
+独自表記
「サイト開設年」と「著作権者表記」は設定したいものがあれば、直接入力しましょう。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
本名で運営している場合などは、著作権者に名前を入れておいてもいいかもしれません。
リストの中のどの表記が良いということはないので、好きなものを選んで構いません。
好きな文章を設定したい場合は、「独自表記」を選びましょう。
HTML で入力できるので、HTML がわかる人は装飾できることも覚えておきましょう。
フッターメニュー幅
![Cocoon設定:フッターメニュー幅](https://www.beginner-blogger.com/wp-content/uploads/2021/07/a4aed63a2c702135a1e7b039e86c19e6.png)
フッターメニュー幅
フッターメニュー幅を設定すると、メニューの各項目が占める横幅が一定になります。
![フッターメニュー幅](https://www.beginner-blogger.com/wp-content/uploads/2021/07/255ae21695a67dde6e893cf508805ce1.png)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
形としては綺麗ですが、項目によっては空白が大きすぎてかえって見栄えが悪くなってしまうことがあります。
メニュー幅をテキストに合わせる
「メニュー幅をテキストに合わせる」にチェックを入れると、メニューの各項目の幅が項目名の長さによって調節されるようになります。
![メニュー幅をテキストに合わせる](https://www.beginner-blogger.com/wp-content/uploads/2021/07/38c9134a3ffb5dd925774ebfc968558c-1.png)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
形は不揃いですが、こちらの方が全体的には整列されている感じがしますね。
「メニュー幅をテキストに合わせる」にチェックを入れると、「トップメニュー幅」に入力した値は無視されます。
設定は以上になります。お疲れさまでした!
コメント