【Cocoon】居心地の良いスキン「イノセンス」を作成しました

この度、Cocoonのスキン「イノセンス」を作成しました。

本スキンは

という方にうってつけのスキンかなと思います。

本記事ではそんなスキン「イノセンス」の細かいデザインやレイアウトについて紹介させていただきます。

テーマに同梱していただきました

「Cocoon設定」→「スキン」から確認・変更が可能になっております。

ちなみにCocoon公式サイトでもご紹介いただいています。

Cocoonのスキン「イノセンス」のデザイン

トップページ(インデックス)

トップページはこんな感じ。

よーく見ないとわからないかもしれませんが、背景がタイルの様になっております。

ページ遷移時は上の様にメインカラムがふわっと浮き上がります。

見出し(h2〜h5)

見出しは(h2〜h5)は上の通りです。

h3のアイコンに関しては完全に僕の趣味で選んだものなので、お好きなアイコンに変えてあげることをおすすめします。

.entry-content h3:before {
content: "お好きなアイコンのユニコード"; //前に「\」をつけるのを忘れずに
}

Font Awesomeでお好きなものを選んでいただき、その詳細ページにある「f〇〇〇」というユニコードを、上の「お好きなアイコンのユニコード」に当てはめていただきstyle.cssに追記してあげればOKです。
【初心者向け】WordPressでCSSを編集する方法を徹底解説

記事内目次

記事内の目次です。

ちなみに、スキン制御で見出しはh3までしか表示されない様になっているのでご注意ください。

トップシェアボタン

アイキャッチ画像の下に表示されるシェアボタンです。丸くしてみました。

ボトムシェアボタン・フォローボタン

記事下のシェアボタンとフォローボタンです。

こちらもトップシェアボタン同様、目に優しい色に。

パンくずリスト

文字の間にスペースを設けることによってパンくずリストを見やすくしてみました。

投稿日・更新日

投稿日・更新日に関しても大人可愛さを表現(したつもり)。

関連記事

関連記事一覧に関しては、大きく変わるのは見出しの部分だけになります。

コメント欄

コメント欄に関しては、見出しとボタンがいい感じになります。

プロフィールBOX

プロフィールBOXは少し幅を狭くし、あまりメインカラムを邪魔しないようなデザインにしました。

検索フォーム

ウィジェットで設置する検索窓になります。

カテゴリー一覧

ウィジェットで設置するカテゴリ一覧になります。

記事数を右寄せにして見やすくしました。

本スキンで制御しているもの

スキン制御を外したい場合

もし上記のものを変えたい、という場合はskins/skin-innocence/functions.phpをいじってあげればOKです。

$_THEME_OPTIONS =
array(
  'entry_card_type' => 'vertical_card_2', //インデックスのカードタイプ
  'entry_card_border_visible' => 0, //インデックスの枠線
  'smartphone_entry_card_1_column' => 0, //スマホ端末で1カラムにするか
  'main_column_contents_width' => 730, //メインカラムの幅
  'entry_card_snippet_visible' => 0, //スニペットを表示するか
  'smartphone_entry_card_snippet_visible' => 0, //スニペットを表示するか(モバイル)
  'entry_card_post_date_visible' => 1, //投稿日を表示するか
  'entry_card_post_update_visible' => 0, //更新日を表示するか
  'toc_depth' => 3, //目次の深さ
  'toc_number_type' => 0, //目次の数字の表示
  'single_breadcrumbs_position' => 'main_top', //パンくずリストの位置
  'sns_bottom_share_column_count' => 3, //ボトムSNSシェアボタンのカラム数
  'sns_bottom_share_logo_caption_position' => 'left_and_right', //ボトムSNSシェアボタンのロゴとキャプションの位置
  'sns_bottom_share_buttons_count_visible' => 0, //SNSボトムシェア数の表示
  'related_entry_card_snippet_visible' => 0, //関連記事のスニペットの表示
);

コメントアウトしてあるので、その該当する要素を削除してあげればご自身で好きに設定することができます。

「イノセンス」のダウンロードはこちらから

スキン「イノセンス」、如何でしたでしょうか。

余談ですがこの「イノセンス」という名前は、ブログ主が愛してやまない某人気バンドの名曲のタイトルの一部からとっております。勘の良い方なら一瞬で気付きそうですが…

上で挙げた以外にも細かいこだわりを詰め込んだので、是非本スキンを適用してみてください。

まとめ

本サイトではCocoonのカスタマイズ記事も積極的に書いているのでそちらもぜひ。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

居心地の良さにこだわった本スキンを是非使っていただけると幸いです!では⸝⸝- ̫ -⸝⸝