初心者でもスキンで簡単にサイトの見た目を変えられる【Cocoon 4】


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

 

スキン

サイト全体のスキンの設定を行います。

 

スキンの項目

・プレビュー
「スキン」の設定を変更し保存をした後に、設定が反映されたご自身のサイトのトップページを確認することができます。

・スキン一覧
Cocoonで用意されているスキンの一覧。

・表示スキン
スキン一覧を「全てのスキン」「親テーマのスキンのみ」「子テーマのスキンのみ」のどれかで表示することができる。

・オリジナルスキン
Cocoonユーザーが作成したスキンを、Cocoonの公式サイトで紹介しますよという案内文。

 

スキンとは、アプリケーションソフトウェアの外観を装飾する情報を格納したファイルのこと。

 

クリックで拡大

 

Cocoonでサイトのデザインを変える方法は、主に2パターン。

 

サイトのデザインを変える方法

① 自分でカスタマイズ
「ヘッダーの色」や「見出しのデザイン」など、変更したい箇所を Cocoonの設定項目で変更したり、CSSなどを使ってひとつひとつ自分でカスタマイズする。

② スキンでまとめてカスタマイズ
Cocoonで用意されている「スキン」一覧の中から好みのものを選択して、サイトの外観をまとめて変更する。

 

初心者さんは、とりあえずスキンでデザインを変えて、慣れてきてから少しずつカスタマイズしていくのがいいかと思います。

 

スキン機能で何が変わる

・ヘッダー
・グローバルナビメニューバー
・サイドバー
・サイトの背景
・フッター
・目次スタイル
・見出しスタイル
・アイコンスタイル
・リストスタイル
・テーブルスタイル
・文字装飾
・ページボタン
・ブログカードの見え方
など

 利用するスキンによっては、変更されないものもあります。

 

 

スキンを選ぶ

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

 

クリックで拡大

 

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

 

 ページをプレビュー下までスクロールするとスキン一覧があり、各スキンのタイトルと作者名がずらりと並んでいます。

 

クリックで拡大

 

気になるデザインがあれば、タイトル左にある写真アイコンをマウスオーバー(写真アイコンの上にカーソルを重ねる)すると、それぞれのスキンのイメージがポップアップで確認することができます。

 

クリックで拡大

 

また、それぞれのスキンのタイトルや作者名はリンクになっているので、それらをクリックするとその作者のサイトに移動し、スキンの詳細や作者について確認することができます。

 

 スキン一覧の中から、使用したいスキンにチェックを入れる。

 

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

 

クリックで拡大

 

 サイトの外観が、選択したスキンに変更されて完了。

 

 項目の上部にある「プレビュー」で、変更したスキンのデザインが確認できますが、Wordpress画面左上部のWordpressロゴの横ににある「ご自身のサイト名」の「サイト表示」をクリックして、実際にご自身のサイトを確認してみましょう。

 

クリックで拡大

クリックで拡大

 

 

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