Webサイトのキーカラーやフォント、背景色を変更したい【Cocoon 5】


当サイトで利用している WordPressテーマ「Cocoon(コクーン)」では、設定できる項目が細かく用意されており、「どこから手をつけたらよいのか」迷子になりやすいので、各項目ごとに設定できる内容をまとめてみました。

 

全体設定の設定方法

 Cocoonの設定を行うためには、Wordpress管理画面(ダッシュボード)の画面左側にある、メニュー欄の「Cocoon設定」の「Cocoon設定」をクリック。

 

クリックで拡大

 

 細かく分けられている項目の中から「全体」タブを選択。

 

 各項目の変更したい箇所の設定を変更する。

 

 項目の上部、または下部にある「変更をまとめて保存」ボタンをクリック。

 

クリックで確認

 

 項目の上部にある「プレビュー」、または実際のサイトで変更した内容が反映されているか確認。

 

クリックで拡大

クリックで拡大

 

 

全体設定

サイトのキーカラーや背景色、フォントスタイルなど、ページ全体の表示に関する設定を行います。

 

プレビュー

「全体設定」の内容を変更し「変更をまとめて保存」ボタンをクリックすると、ご自身のサイトのトップページがプレビュー画面に表示されて、変更した内容が反映されているか確認することができます。

 

キーカラー

サイト全体のポイントとなる部分に適用される「サイトキーカラー」や「サイトキーテキストカラー」の設定を行います。

 

キーカラー

・サイトキーカラー
ヘッダー、グローバルナビメニュー、アイキャッチ画像のラベル、サイドバーのタイトル、フッターなどの背景色の設定を行います。

選択したスキンによっては変更できないものもあるようです。

・サイトキーテキストカラー
サイトキーカラーで変更される部分の文字色の設定を行います。

 

「サイトキーカラー」または「サイトキーテキストカラー」の「色を選択」をクリックすると、カラーピッカーが表示され、好きな色に変更することができます。

 

クリックで拡大

 

カラーピッカー(color picker)とは、文字や画像の背景などに設定する色を、グラデーションに表示された画面上の任意の場所からカラーを採取し、直感的に色を選択できる機能のこと。

 

クリックで拡大

 

カラーコード(color code)とは、Webページ上で表現される色を指定するための6桁の絵数字で表す文字列のこと。

カラーピッカーを使って色を選択する項目の「サイトカラー」「サイト背景色」「サイトリンク色」「サイト選択文字色」「サイト選択背景色」の横には、三角マークが表示されているので、これをマウスオーバー(カーソルを重ねる)するとカラーサンプルが表示されます。

 

クリックで拡大

 

この他にも、カラーサンプルを紹介している外部サイトのリンクが貼られているので、これらを利用してあなたの「好みの色」を探しだし、その色のカラーコードを入力することで色を変更することもできます。

 

サイトフォント

サイト全体に適用されるフォントの選択、フォントのサイズや色の設定を行います。

 

サイトフォント

・フォント
サイト全体に適用されるフォントを、12種類の中から選択できます。

クリックで拡大

 

Webサイトでよく使われている代表的フォント
・ メイリオ
Windows に標準搭載されているフォントで、画面でも紙面でも読み取りやすく、視認性と判読性に優れているフォント。

クリックで拡大

・ ヒラギノ角ゴシック
Mac OS に標準搭載されているフォントで、くせのない美しい書体で読みやすいフォント。

クリックで拡大

・游ゴシック
Windouws 8.1以降、Mac OS 10.9以降で標準搭載されているフォントで、メイリオと比べるとやや細く上品で読みやすいフォント。

クリックで拡大

など

・文字サイズ
フォントの大きさを選択します。

 このテキストの文字は 12pxです。
 このテキストの文字は 14pxです。
このテキストの文字は 16pxです。
 このテキストの文字は 18pxです。
 このテキストの文字は 20pxです。
 このテキストの文字は 22pxです。

Googleで推奨する基本フォントサイズは「16px」。一般的にも読みやすい文字サイズとして「16px」前後のサイズが多く使われています。

・文字色
フォントの色を選択します。

ブログやニュースサイトのような文章を読んでもらうことが重要なサイトでは、背景色が「白(#FFFFFF)」で文字色が「黒(#000000)」にした場合、白黒のコントラストが強すぎて目に負担がかかり疲れやすくなります。

背景色 #FFFFFF / 文字色#000000

そのため、ユーザーに負担がかかることから、文章を読んでもらうにはあまり良くない組み合わせと言われています。

大手企業のサイトを覗いてみても、一見 黒に見える文字色でも、「真っ黒(#000000)」の文字色を使っているケースは少なく、「#333333」など黒に近い色が多く使われています。

文字の大きさや太さなどによっても異なるので、好みにはなってくると思うのですが、背景色を白、またはそれに近い色で黒文字を使う場合、黒みを帯びたグレーやこげ茶など黒に近い色みに文字色を変え、白とのコントラストを少し弱めてあげることで、より見やすいサイトをつくることができます。

文字色 #000000

文字色 #2D2D2D

文字色 #333333

文字色 #555555

文字色 #777777

文字色 #3E1C12

 

モバイルサイトフォント

モバイル端末(横幅が480px以下)で適用されるフォントのサイズの設定を行います。

 

文字の太さ

モバイル端末(横幅が480px以下)で適用されるフォントの太さの設定を行います。

 

 

サイトアイコンフォント

サイト全体で使用するアイコンフォントを選択します。

Webアイコンフォントとは、ウェブページ上で文字と同じように表示できるアイコンのこと。「png」や「jpg」などの画像でアイコンを貼るのと違い、拡大しても粗くなることはなく、色やサイズなど簡単に変えることができます。

Font Awesome(フォント・オーサム)とは、無料で商用利用も可能な Webアイコンフォントのこと。 Cocoonでは、ver.4とver.5が使えます。

 

Font Awesome を利用するには、公式サイトにアクセスしアカウント登録する必要があります。

 

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

 

 

サイト背景色

サイト全体の背景色を設定を行います。

 

サイト背景画像

サイト全体の背景画像を選択します。

 

サイト幅の均一化

チェックを入れることで、ヘッダーやグローバルメニューなどのサイト全体の幅をコンテンツの幅に統一されます。

 

クリックで拡大

 

 

サイトリンク色

サイトで利用される「リンクの文字色」の設定を行います。

 

クリックで拡大

 

サイト選択文字色

サイト内の文字を選択したときの「文字色」の設定を行います。

 

サイト選択背景色

サイト内の文字を選択したときの「文字の背景色」の設定を行います。

 

サイドバーの位置

サイドバーの表示位置を、「右側」か「左側」の設定を行います。

 

クリックで拡大

 

サイドバーの表示状態

サイドバーを表示するページの設定を行います。

 

クリックで拡大

 

サイドバーの表示 / 非表示

・全てのページで表示
・全てのページで非表示
・フロントページで非表示
・インデックスページで非表示
・固定ページで非表示
・投稿ページで非表示
・404ページで非表示

 

 

ファビコン

ファビコンの設定は、Wordpressの管理画面(ダッシュボード)から行ってください。

ファビコンとは、サイトのタイトルバーやブックマークなどに表示される小さなアイコン画像のこと。

 Wordpressの管理画面(ダッシュボード)の画面左側にあるメニュー欄の「外観」にマウスオーバー(文字にカーソルを重ねる)し、プルダウンされたメニューの「カスタマイズ」 をクリック。

 表示された一覧から「サイト基本情報」をクリックし、「サイトアイコンを選択」ボタンをクリック。

 「画像を選択」の画面が表示されるので、「ファイルをアップロード」ボタンをクリックして、ファビコンに使用したい画像を選択しアップロード。

ファビコンに使う画像は、「512×512px」のPNG画像が推奨されています。

 メディアライブラリーにアップロードした「画像」を選択し、「選択」ボタンをクリック。

 サイトアイコンのプレビュー画面に設定した画像が表示されたら、公開ボタンををクリックし、「×」をクリックするとファビコンの設定が完了。

 

サムネイル表示

サイト内のサムネイル画像の表示を切り替えます。

サムネイル(Thumb Nail)とは、画像や文書のファイルを一覧表示するときに用いられる縮小表示した画像のことで、記事を一覧表示した時にみられる画像には、アイキャッチの画像を縮小して表示されていることが多いです。

アイキャッチ(Eyecatch)とは、「見る人の目を引きつけるような画像」を意味する和製英語で、投稿記事の最初に表示する画像のこと。

 

日付フォーマット

投稿記事や固定ページ日付(投稿日、更新日)のフォーマット形式の設定を行います。

 

Y年n月j日
2021年1月22日
Y-m-d
2021-01-22
m/d/Y
01/22/2021
d/m/Y
22/01/2021

 

g:i A
5:35 PM
g:i a
5:35 pm
H:i
17:35

 

 




 

 

最後まで読んでくれてありがとうございました。
Please look again if you like.