Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

Cocoon

Cocoonインストールしてすぐにあれ?とってもシンプルだなぁと思いませんでしたか?カスタマイズのやりがいがあると意気込む方もいれば、早く記事を書きたいのにめんどくさい!と思う方も居るでしょう。

ブログは中身で勝負」とはいいつつも、さすがにCocoon初期状態のままではシンプルすぎます。カスタマイズベースとしては最高なのかも知れませんが。しかしデザイン知識やWEBサイト作成知識の無い方の方が多いでしょうから手軽にカスタマイズできるに越したことが無いですよね。

 

でもやっぱりおしゃれなブログに仕上げたいですよね!

 

大丈夫です!初期状態のこのようなシンプルなトップページでも…

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

 

 

当記事の手順通りにカスタマイズすればものの数分でこんなにおしゃれなブログに変身できます!って言ったらどうですか?簡単なのでやった方がお得ですよ。背景画像だけでは無くて、見出しやサイドバーもおしゃれになりますよ!

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

方法はCocoonのスキン機能を使う!

なぜ数分でおしゃれにイメチェンできてしまうのかと言うとCocoonで準備されているスキン機能を使う事ができるからです。多くのブロガーに支持される理由の一つはこんなありがたい便利な機能があるからなんですね。

そしてユーザーが多いからおしゃれスキンが豊富に揃っていると言う…好循環ですね!

簡単にイメチェンできちゃうから飽きたら見た目をガラッと簡単に変えることも出来ちゃいます。数分で!

Cocoonでスキンを設定する方法

まずは①「Cocoon設定」を開きます。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

次に②「スキン」タブを選択します。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

③「設定可能なスキンの一覧」が表示されます。スキン名の横のアイコンにカーソルと合わせると、スキンのイメージを確認することができます。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

④「スキンのイメージ」はこのよう設定画面内に表示されるので好みのスキンを探します。背景画像はあとで自分の好きな背景に簡単に差し替えることも出来ます(当記事内で背景の変え方も解説していきます)

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

⑤「スキン一覧」の中から好みのスキンを選択します。

「表示スキン」は初期状態の⑥「全てのスキンを表示」を選択したままで問題ありません。

最後に⑦「変更をまとめて保存」を選択します。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

設定はこれだけ!スキンが適用されたか確認しよう!

ここまで設定出来たら一度トップページを開き、デザインが変わっていることを確認します。できればトップページだけでなく、個別の記事の中身を見たり、スマホからのデザインも好みのデザインになっているか確認しましょう。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

自分のオリジナルブログ感を出すには?背景画像を変える!

スキンを変更しただけでは同じスキンを使っている人と瓜二つのブログになってしまいます。

そこで印象を大きくと変えるのに最適なのが背景画像の変更です。当記事内で採用したmarineさん作成のm-tomatoスキンではトマトや葉野菜の画像のインパクトが大きいですよね。これをオリジナルの画像に変更するだけでイメージが大きく変わります。

WordPressで背景画像を変更する方法

背景画像の変更も簡単に終わります。手元に背景画像にしたい画像を準備しておいてください。

まずはダッシュボードから⑧「外観」メニューの⑨「背景」を選択します。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

⑩「背景画像」を選択します。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

⑪「画像を選択」をクリックしてお好きな画像をアップロードして選択します。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

⑫「プリセット」をデフォルト、フルスクリーン、画面に合わせる、繰り返し、カスタムの中から選択します。選んだ項目によって見え方が異なりますが、設定画面の右半分にプレビューされるので確認しながら選んでいくことが可能です。

同様に⑬「画像の位置」⑭「背景画像の繰り返し」を選択します。繰り返しにチェックを入れないと縦に短い背景画像だと記事内でスクロールした際に途中で背景が無くなってしまうので注意しましょう。

全て設定し、プレビュー画面でも問題なければ⑮「公開」を押して設定を反映します。

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

最後はパソコン、スマホから動作確認をしましょう!

設定はこれで完了です。スマホやパソコンからブログを開いて動作確認をしましょう!どうですか?満足のいくデザインになりましたか?

Cocoonならスキン機能でおしゃれブログに即変身!その方法を解説します

Next:カルーセルでトップページに動きのある記事紹介を!

Cocoonを導入していればトップページの上段に記事が数記事が横スクロールで表示されます。

動きもあるのでおシャレになりますし、スクロールされるのでエリアを取らずに多くの情報が表示できる便利な機能ですのでぜひ導入しておきましょう!

Cocoonで各記事のスライドショー(カルーセル)を簡単配置する方法を解説
前回の記事でスキンを適用したら質素なシンプルなブログが一気におしゃれになりましたね。今度は更にスタイリッシュにする方法を解説します。カルーセルもCocoonならプラグインを使わず簡単な方法なので是非ともこの記事を参考に設定していただきたいで...

コメント