WP無料テーマCocoonのスキンでブログの外観を変えてみよう!

スキンの漫画Cocoon
スポンサーリンク
るんぴあ
るんぴあ

どのブロガーさんも独自のサイトデザインで個性が出てるよね!私もオリジナルのデザインのブログを作ってみたいな~!

サイトの外観って、どうやって作っていけばいいの?

コップ先生
コップ先生

コクーンではすでに様々な【スキン】を用意しているから、細かい設定なしで簡単にブログが始められるんだぞ。

るんぴあ
るんぴあ

【スキン】って何?

コップ先生
コップ先生

【スキン】というのは外観があらかじめ作り込まれたファイルのことで、スキンを変えることでサイトのデザインを簡単に変えられるのだ。



スキンによるサイト外観の設定を共に見ていこう!

この記事を読んで分かる事

サイトデザインを構成する部位の名称

Cocoonのスキン設定方法

【Wordpress Cocoon】スキンを利用してサイトの外観を変えよう

スキン設定

Cocoon(コクーン)の【スキン】を利用する事で、ウエブ画面のデザインを簡単に変えることが出来ます。

 

まずはウエブ画面を構成している『パーツ』の呼び方について見ていきましょう。

 

【Wordpress Cocoon】サイトデザインの構成とその名称

サイト構成の名称をざっくり覚えておくと、今後画面デザインを変更する際に役立ちます。

 

パソコンとスマートフォン・タブレットでは表示が若干違いますが、サイト構成の名前は同じです。

 

画面の説明

 

①ヘッダー:画面の一番上のエリア
ブログタイトルやアイコンなどを表示して、オリジナル感を出すのに最適な場所。
 
 
②グローバルナビ:サイトのメニュー
メニューをクリックすると対象のページに飛ぶことが出来る。カスタマイズ可能。
 
 
③アピールエリア:アピールしたいことを入れられるエリア
ブログの更新内容を知らせたり、オススメの商品をアピールしたり、写真を入れたりして自由に利用できる。アピールエリアの表示・非表示は選べる。
 
 
④カルーセル:ブログカードが横スクロールされるエリア
人気記事やカテゴリー別など、投稿したブログの情報(ブログカード)が自動でスクロールする画面。カルーセルの表示・非表示は選べる。
※スクロール:写真が画像がスライドして表示される仕様のこと
 
 
⑤広告(スポンサードリンク):インデックスエリア(⑧)にも広告表示が可能
 
 
サイドバー:画面の右、左、左右両方に設置できる区切られたエリア
人気記事やカテゴリー、自己紹介などを表示できる。表示する項目はカスタマイズ可能。
 
 
⑦バナー広告:サイドバーの中には広告の表示もできる
 
 
インデックスページ:記事一覧がみれるエリア
投稿した記事の情報(ブログカード)が見れる。ブログカードの仕様や数の変更が可能。
 
 
⑨フッター:画面の一番下のエリア
フッターメニューやクレジット表記などを表示できる。※クレジット表記とはサイト作成者の名前やサイトページのタイトル等を表示して著作権をアピールするもの。
 
 
それ以外にもCocoonでは『コンテンツ上部』、『コンテンツ下部』の編集も可能
※コンテンツ上部:②グローバルナビや③アピールエリア、④カルーセルなどの下の部分
※コンテンツ下部:⑨フッターの上の部分
 
 
るんぴあ
るんぴあ

サイトを構成する部位ってこんなにあるのね。これを1つずつ確認して作っていくのは大変そう~!

コップ先生
コップ先生

もちろん各エリアを1つずつ自分で設定していくことも可能だが、初心者には大変じゃな。

 

Cocoonで用意してある【スキン】を使えば、グローバルメニューやサイドバーの配置などの細かい設定なしで簡単にブログ運営がスタートできるのだぞ!

 

 

【Wordpress Cocoon】スキンを利用してサイト全体のデザインを決めよう

Cocoon(コクーン)で用意されている【スキン】から、あなたの好みのものを選んで『サイト全体』の外観を決めましょう(※細かい部分は後でカスタマイズできます)。

 

ダッシュボード【Cocoon設定】>【Cocoon設定】をクリック→【スキン】が一番最初に開く
 

スキン1

①ダッシュボード【Cocoon設定】>【Cocoon設定】>【スキン】

 

スキン2

 

②『スキン一覧』から好みのスキンを選びチェックをいれたら【変更をまとめて保存】で保存する

 

スキンのデザイン確認方法(3種類)

〔確認方法①〕写真アイコンにカーソルを合わせるとデザインが見れる

〔確認方法②〕スキンのタイトルをクリックしてスキン動作確認画面を見る

〔確認方法③〕コクーンの公式サイトの『スキン動作メモ』からスキン動作確認画面を見る

 

デモ確認

※②は③のページのデモ画面が直接開くだけです

 

るんぴあ
るんぴあ

スキンの種類が沢山あって迷っちゃうなぁ~!

 

あ、でもCocoon(コクーン)テーマは人気だから、他のコクーン利用者とスキンが被っちゃうんじゃないかな…

コップ先生
コップ先生

スキンを選んだあとに、自分好みに色々編集できるぞ!だから、他のコクーン利用者とスキンデザインがかぶっていても大丈夫じゃよ。

るんぴあ
るんぴあ

スキンを使用する事で、細かなデザイン設定を省くことができるのに、自分好みにカスタマイズもできちゃうなんてすごい!

【WP・Cocoonテーマスキン変更】まとめ

まとめ
るんぴあ
るんぴあ

コップ先生のセクシー秘書リムが、当記事のまとめをご案内します!

セクシー秘書
セクシー秘書

お任せください。では参ります。

【WordpressCocoon】スキンを利用してサイトの外観を変えるには…

WordPress(ワードプレス)Cocoonテーマで用意している【スキン】を利用することで簡単にサイト外観を変更することができます。

 

スキンはCocoon設定から変更可能です。

 

ダッシュボード【Cocoon設定】>【Cocoon設定】をクリック
   ↓
【スキン】が一番最初に開く
   ↓
『スキン一覧』から好みのスキンを選び、【変更をまとめて保存】で保存する
 
 

※スキンが上手く反映しない場合は、Cocoon(コクーン)テーマの更新がないか確認してください

 
 
テーマの更新
 

ダッシュボート【外観】>【テーマ】でテーマ画面に進む

 

Cocoon(コクーン)テーマに『新しいバージョンが利用できます』と警告がでていたら【今すぐ更新】をクリックして更新してください。

 

セクシー秘書
セクシー秘書

Cocoon(コクーン)テーマには多くのスキンがありますが、不定期で種類が増えています。これからも増えると思うので、こまめにチェックすると運命の出会いがあるかも♡あなた好みのスキンはありましたか?

 

 

タイトルとURLをコピーしました