【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のおしゃれなカスタマイズ全集【初心者もコピペで簡単】

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

15 COMMENTS

あみゅ

こんにちは、イノセンスを利用させていただいています!
お忙しいところ恐縮ですが、教えてください。
グローバルメニューの文字色ですが、こちらが変更できません。
プレビュー時には見えているのですが、保存するとヘッダー色に依存するようでそちらの色になってしまいます。

もし対処方法ありましたら教えていただけると助かります。よろしくお願いします。

返信する
おはようポテトのアイコン おはようポテト

あみゅさん

以下のcssをstyle.cssに追記していただければおそらく改善されるかと思います。

——————–
#navi .caption-wrap .item-label{
color:/*お好きな色のカラーコード*/!important
}
——————–

「/*お好きな色のカラーコード*/」の箇所に文字色を指定していただく形になります。

(もし上記の方法で改善しないようであれば、お手数ではありますがサイトのURLをご教授いただけると幸いです。)
よろしくお願いします。

返信する
おはようポテトのアイコン おはようポテト

あみゅさん

どうやらcssの追記の仕方が誤っているようです🤔
(私の伝え方が悪かったですね…失礼しました🙇‍♂️)

——————–
#navi .caption-wrap .item-label {
color: /*#ffffff*/!important;
}
——————–

上記を以下のように修正していただければ改善されるかと。

——————–
#navi .caption-wrap .item-label {
color: #ffffff!important;
}
——————–

返信する
ひろみち

初めまして!イノセンス、とても素敵で利用させていただいています。
ウィジェットで設置する検索窓について質問があります。
せっちすると、虫眼鏡の灰色の■が、左側の検索窓よりも大きく、■の底辺がはみ出しているようになっています。
原因や対処法はわかりますでしょうか・・・?
ここのCSSのwidthやheightを調節してピッタリ合わせる感じでしょうか。
button.search-submit {
border-bottom: solid 1px rgba(0, 0, 0, .1);
border-radius: 0 3px 3px 0;
color: #fff;
background-color: #777;
width: 50px;
height: 50px;
top: 0;
right: 0;
}

どうぞよろしくお願いいたします。

返信する
おはようポテトのアイコン おはようポテト

ひろみちさん

>ここのCSSのwidthやheightを調節してピッタリ合わせる感じでしょうか。

仰る通り、そちらのwidthとheightを調整していただければ改善するかと思います。
もしくは以下のコードを追記する方法でも改善するかと。(こちらの方法の方が手っ取り早いかもしれません)

—————
input.search-edit {
padding: 11px;
font-size: 18px;
}
—————

(ちなみに自分の検証用の環境で試した際は、虫眼鏡のボタンははみ出していませんでした🤔
少し調査してみます。ご指摘ありがとうございました🙇‍♂️)

返信する
れもん

はじめまして!イノセンス愛用させてもらっています!
投稿日・更新日の表示について質問させてください。
投稿日・更新日のどちらも表示させたいにも関わらず、いろいろ設定しなおしても、投稿日しか表示されません。
cocoon設定のインデックスを見ると、スキン制御がかかっています、と出ていて触ることもできません・・・。
投稿日と更新日の両方を表示させるには、どの部分で設定すればいいのでしょうか・・・?
無知な質問で申し訳ないですが、教えていただけると幸いです。

返信する
おはようポテトのアイコン おはようポテト

れもんさん

更新日に関しては、
skins/skin-innocence/functions.phpにある

——————-

‘entry_card_post_update_visible’ => 0, //更新日を表示するか

——————-

という1行を削除していただければ設定画面で変更できるようになるかと!

ご確認いただけますと幸いです!

返信する
いおり

こんにちは!最近イノセンスを利用させてもらっています。
すごく素敵でかわいいテーマなので、とても気に入っています!

ご質問なのですが、イノセンスの背景の「網目」って消すことは出来ますか?
cocoonのサイト背景画像に「白い四角の画像」を用意すれば消せるのは確認できたのですが、無駄な画像を読み込ませずにスマートに網目を消す方法があれば、と思いご質問してみました。

もし方法が無く場合は、無くててもぜんぜん大丈夫です!
お時間のある時でかまいませんので、お返事いただければ嬉しいです!

返信する
おはようポテトのアイコン おはようポテト

いおりさん

背景に関しましては、以下のコードを子テーマのstyle.cssに追記していただければご希望通りになるかと思います。

—————
body{
background-image:none;
}
—————

ご確認いただけますと幸いです。
よろしくお願いします🙇‍♂️

返信する
Ataru

おはようポテトさん、はじめまして!

今年(2021)の8月から雑記ブログを始めて、ずっとイノセンスを使わせていただいています!
とってもお気に入りなのですが、記事の数が増えてきたのでアイキャッチのカテゴリーラベルを表示したいと考えています。

「cocoon設定⇒アイキャッチの設定 ⇒ アイキャッチラベルを表示する」のチェックを確認したり、functions.phpにコードの追記を試してみたのですが、上手くいきませんでした…

もしスキンで制御されていらっしゃるようでしたら、表示方法についてご教示いただけますと嬉しいです。

返信する
おはようポテトのアイコン おはようポテト

Ataruさん

当スキンのご利用ありがとうございます!
カテゴリーラベルの件ですが、以下のCSSを追記していただければ表示されるかと思います。

——————-
.entry-card-wrap .cat-label {
display: block;
}
——————-

お手数ですがご確認いただけると幸いです🙇‍♂️

返信する
匿名

ありがとうございます!カテゴリーラベルが表示されました!
長い期間試行錯誤を続けてきましたが、こんなに一瞬で切り替わるのですね(T_T)
本当にありがとうございました!

返信する
qui

おはようポテトさん初めまして。
イノセンスを使わせていただいております。

2つほどお聞きしたいのですが
目次表示がおかしくなってしまいます。

現在 wordpress cocoon 使用中です

・目次が2重表示のようになってしまう(目次項目矢印(>)の後ろにもう一つ矢印があるような

・H2タグが10を超えたあたりで目次一覧のH2タイトルの横に1と表示される。

以上2点になります。

cocoon設定にて目次タブ→目次を表示しない
に設定した場合は、目次が全て表示されなくなってしまい困っております。

以上2点、よろしければご確認願います。

返信する
おはようポテトのアイコン おはようポテト

quiさん

大変お手数ではありますが、事象を明確に捉えたいため
(可能であれば)「お問い合わせ」などからサイトURLをご教示いただけますと幸いです。

よろしくお願いします🙇‍♂️

返信する

おはようポテト へ返信する コメントをキャンセル

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。