当サイトで利用しているWordpressテーマ、「Cocoon」をインストールすると「管理画面メニュー」に「Cocoon設定」が追加されます。
外観の詳細設定、アドセンス、アフィリエイトなどの広告設定、等々、様々な設定が行なえます。
本記事では、Cocoon設定の「全体」タブについて、当サイトの設定を含め、まとめておきます。
「全体」タブの設定
「全体」タブは、ページ全体の表示に関する設定を行うことができます。
キーカラー
スキンによっては選択できない場合があります。
サイトキーカラー
サイト全体のポイントとなる部分の背景色を設定できます。
当サイトでは、「#009944サマーグリーン」を選択しています。
サイトキーテキストカラー
サイト全体のポイントとなる部分のテキスト（文字色）を設定できます。
当サイトでは設定していません。「スキンテンプレート」を使用する場合、指定しないと白い文字になります。
サイトフォント
サイト全体で適用されるフォント、文字サイズ、文字色を設定できます。
当サイトでは、以下のように設定しています。
- フォント：ヒラギノ角ゴ,メイリオ（デフォルト）
- 文字サイズ：18px
- 文字色：無指定
いずれも好みに合わせて選択するのが良いと思います。
ちなみにフォントの選択肢に（Webフォント）となっているものがありますが、これは、Webサーバーに置かれたフォントサーバーからフォントを読み込み、サイトの文字を表示する仕組みです。
Webフォントを利用することで、どの端末でも意図したフォントを表示させることができます。
一方、それ以外のフォントは「システムフォント」といい、OS、端末に依存します。
同じサイトでも、WindowsとMacでフォントが違うのはシステムフォントの違いによるものです。
モバイルサイトフォント
その名の通り、モバイル端末（横幅480px以下）でのフォントサイズの設定ができます。
当サイトでは16pxにしています。
文字の太さ
特にこだわりが無ければ、デフォルトの400で良いと思いますが、サイトデザインに合わせて、実際の太さを確認しながら設定していくのが良いと思います。
サイトアイコンフォント
「Font Awesome4」、「Font Awesome5」のいずれかを選択します。
デフォルトでは「4」ですが、最新は「5」になります。
「Font Awesome」とは、アイコンをフォントにしたもので、拡大、縮小、色の変更が可能ですし、jpg等画像の様に滲んだり、ぼやけたりということがありません。
どのような使い方をするかというと、<i class=”fab fa-apple”> </i>と記述すると以下の様に表示されます。
ちなみに<i class=”fas fa-apple-alt fa-5x”> </i>と＜fa-5x＞を追加することで大きさを5倍に変更することができます。
色を変えたり、回転させたりもできます。
「Font Awesome5」のアイコンは以下のサイトで取得できます。
サイト背景色
サイト全体の背景色を設定することができます。
設定可能かどうかはスキンに依存します。
サイト背景画像
サイト全体の背景画像を設定することができます。
サイト幅の均一化
ヘッダー、アピールエリア部分の幅を「メインコンテンツ＋サイドバー」の幅に合わせるかどうかを設定します。
アピールエリアに画像を表示している場合は、「サイト幅を揃える」にチェックを入れることをおススメします。
サイト幅を揃えないとアピールエリアがウィンドウいっぱいに広がってしまいます。
サイトリンク色
サイトで表示するリンクの色を設定できます。
デフォルトでは一般的なリンク色です。
サイト選択文字色
サイト内のテキストを選択したときの文字色を設定できます。
これもデフォルトのままです。テキストを選択したときの背景色がデフォルトではブルーですが、当サイトでは「#009944サマーグリーン」変更しましたので、文字色は「＃FFFFFF白」にしました。
サイト選択背景色
サイト内のテキストを選択したときの背景色です。
デフォルトではブルーですが、当サイトでは「#009944サマーグリーン」に変更しました。
サイドバーの位置
サイドバーを右に置くか、左に置くかを設定できます。
かなり以前はサイドバーが左に置くのが一般的でしたが、現在は右サイドバーが主流になっています。
概ね、サイトを訪れた方は「左から右に読む」ので、メインコンテツが左側にあったほうが目を引きやすいかと思います。
逆にサイドバーに注目を集めるのなら、右サイドバーが良いのではないかと思います。
サイドバーの表示状態
どのページにサイドバーを表示するかを設定できます。
通常は「全てのページで表示」でOKです。
ファビコン
「ファビコン（サイトアイコン）」とは、ブラウザのタブの先頭に表示される画像です。
ファビコンの設定は「Cocoon設定」ではなく、Wordpress管理画面の「外観」→「カスタマイズ」→「サイト基本情報」で設定します。
当サイトでは、 
を使用しています。
ファビコン・サイトアイコンはブラウザタブへの表示だけでなく、ブックマークでも表示されますので、ぜひ設定することをおススメします。
サムネイル表示
サイト内のサムネイル画像の表示、非表示が設定できます。
デフォルトでは、「サイト全体のサムネイルを表示する」にチェックが入っていますが、チェックを外すことで、サムネイル画像を無効化することができます。
日付フォーマット
テーマ全体の日付フォーマットを設定できます。
デフォルトでは、「Y.ｍ.ｄ」となっており、「2021.01.01」と表示されます。
さいごに
以上が「Cocoon設定」の「全体」タブの設定一覧です。
「全体」タブでサイトデザインのかなりの部分を設定することができます。
ブログランキングに参加しています。
↓ご参考になりましたらクリックお願いします↓
コメント