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

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

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

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

本スキンは

  • 知的さや大人っぽさを演出したい
  • とはいえ可愛さも捨てがたいよね
  • まあ要するに、居心地のいいスキンを探してるんです

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

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

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

余談ではありますが、Cocoon製作者わいひらさんのご厚意もありテーマに同梱していただきました

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

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

余談は終わり。本題にいこう!

くるみ

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

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

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

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

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

まさに「大人可愛い」って感じ!

くるみ

「イノセンス」のメインカラムのアニメーション

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

見出し(h2〜h5)

「イノセンス」の見出し

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

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

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

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

記事内目次

「イノセンス」の記事内目次

記事内の目次です。

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

トップシェアボタン

「イノセンス」のトップシェアボタン

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

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

「イノセンス」のボトムシェアボタン

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

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

パンくずリスト

「イノセンス」のパンくずリスト

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

投稿日・更新日

「イノセンス」の投稿日・更新日

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

関連記事

「イノセンス」の関連記事

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

コメント欄

「イノセンス」のコメント欄

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

プロフィールBOX

「イノセンス」のブロフィールBOX

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

注意
背景が透過の画像でないとその背景が白円と重なってしまい不格好になってしまうため、背景が透過の画像の使用を推奨しています。

検索フォーム

「イノセンス」の検索フォーム

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

カテゴリー一覧

「イノセンス」のカテゴリ一覧

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

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

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

本スキンではデザインの観点から、スキンで制御している設定がいくつかあります。

  • スニペットを非表示に
  • 目次の深さを3に(h3まで)
  • パンくずリストの位置をアイキャッチ上に
重要なものだけ挙げたけど他にもあるよ

くるみ

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

もし上記のものを変えたい、という場合は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, //関連記事のスニペットの表示
);

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

functions.phpを編集する際は慎重にね。

くるみ

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

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

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

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

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

まとめ

以上、Cocoonのスキン「イノセンス」の紹介でした。

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

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

コメントを残す