【実例】Cocoonカスタマイズ!

cocoon DTP
この記事は約3分で読めます。

無料のwordpressテーマのおすすめに必ず挙げられる Cocoon(コクーン)

今まで「無料テーマ◯選!」みたいに紹介されているいくつかのテーマを試しましたが、デモサイトのように仕上げるのは難しく、CSSをいじってはエラーの繰り返し。
この Cocoonは本格的なコーディングの知識がなくても、最小限のカスタマイズでシンプル可愛くできます。

 

コクーンのここが良い!

[su_box title=”Cocoonにした決め手” box_color=”#f5b0b0″ radius=”7″]・日本語フォント対応(選べる)
・カスタムが楽(初期設定の完成度が高い)
・シンプル可愛い[/su_box]

日本語フォント対応は絶対ですね。海外テーマで日本語を使った瞬間、あ〜置き換えられちゃってますねーっていうあのダサい感じは避けたい……。webフォントを設定する方法もありますが、できるだけ改造範囲は少なく手軽に作りたいからテーマを使用しているわけで。CSSを修正 or 追加する部分は少なくしたいですよね。
シンプル可愛いと書きましたが、自分がそういう方向に振っただけでもっとかっちりした印象のサイトもありますし、ごちゃごちゃした感じ()にもできます。
あと、ちゃんとレスポンシブルデザインです。

 

初期設定を比較

wordpress初期状態からインストールされているいくつかのテーマとコクーンの初期設定を比べてみます。

image
▲Twenty nineteen

わぁ…ここからかぁ……。

 

image
▲Twenty twenty

なんていうか強烈……。
この赤紫の部分は画像に置き換えるとしても、真ん中のテキスト部分の使い方がよく分からないし、画像と見出しのマージンも調整したくなるだろうし、、前途多難。

 

image
▲Cocoon
サムネイル付きの記事にサイドバーにはカテゴリや最近の投稿表示。ヘッダー画像置いて見出しの色を変えるか画像に置き換えて……この状態なら完成図の想像がしやすい!
(え、大体最初からこんな感じになってるんじゃないの? って思いますよね。そんなことないです全然。後述しますがカスタムもやりやすいし、本当によく作られていると思う……。)

 

コクーンのインストール

コクーンは「外観」-「テーマ」から検索してもありません。cocoon_search
ローマ字でもカタカナでもダメです。
作成者様の公式サイトからDLします。

ZIPファイルをDLし、「外観」-「テーマ」-「新規追加」からテーマをアップロードします(ZIPのまま)。
image
有効化すると、「Cocoon設定」欄が現れます。CSSを追加/修正しなくても、この設定である程度サイトを整えられます。
image
 

下準備(CSS追加なし)

SNSフォローボタン付きのプロフィールを設置したい! とか、見出しを可愛くしたい! とかいろいろ構想はあると思いますが、まずは「Cocoon設定」「外観 – カスタマイズ」で、CSS追加/修正なしでできる部分を済ませてしまいます。

1.ユーザー設定(プロフ欄の設定)

image
「ユーザー」-「あなたのプロフィール」から必要な情報を入力します。


フォローリンクを設定したいSNSのURLもここに入力します。この情報がサイト内のプロフィールに反映されます。

→こちらを更新しただけではまだサイトには反映されません。

 

2.設定 – 一般(サイトタイトル等入力)

「設定」-「一般」からサイトタイトル等を設定します。image

「設定」-「パーマリンク設定」から、パーマリンクの表示形式を選択します。
パーマリンクは個々の記事に割り当てられるURLです。いつでも変更は可能ですが、変更前のPVカウントはリセットされてしまうので、その辺気にする方は最初に設定しましょう。
image

 

……続く

[su_divider divider_color=”#d2d2d2″ link_color=”#d2d2d2″ size=”2″]

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