この度、Cocoonのスキン「イノセンス」を作成しました。
本スキンは
- 知的さや大人っぽさを演出したい
- とはいえ可愛さも捨てがたいよね
- まあ要するに、居心地のいいスキンを探してるんです
という方にうってつけのスキンかなと思います。
本記事ではそんなスキン「イノセンス」の細かいデザインやレイアウトについて紹介させていただきます。
お品書き
テーマに同梱していただきました
余談ではありますが、Cocoon製作者わいひらさんのご厚意もあり本スキンをテーマに同梱していただきました。「Cocoon設定」→「スキン」から確認・変更が可能になっております。
この度、Cocoonのスキン「イノセンス」を作成させていただきました。
更にテーマに同梱もしていただいたので
チェックしてみてください⸝⸝- ̫ -⸝⸝https://t.co/2lDWg1jNr0 https://t.co/KNvcx0ju10— おはようポテト @サイト管理人 (@ohayoupoteto22) March 6, 2021
ちなみにCocoon公式サイトでもご紹介いただいています。
Cocoonのスキン「イノセンス」のデザイン
トップページ(インデックス)
トップページはこんな感じ。
よーく見ないとわからないかもしれませんが、背景がタイルの様になっております。
くるみ
ページ遷移時は上の様にメインカラムがふわっと浮き上がります。
見出し(h2〜h5)
見出しは(h2〜h5)は上の通りです。
h3のアイコンに関しては完全に僕の趣味で選んだものなので、お好きなアイコンに変えてあげることをおすすめします。
.entry-content h3:before {
content: "お好きなアイコンのユニコード"; //前に「\」をつけるのを忘れずに
}
Font Awesomeでお好きなものを選んでいただき、その詳細ページにある「f〇〇〇」というユニコードを、上の「お好きなアイコンのユニコード」に当てはめていただきstyle.cssに追記してあげればOKです。
【初心者向け】WordPressでCSSを編集する方法を徹底解説
記事内目次
記事内の目次です。
ちなみに、スキン制御で見出しはh3までしか表示されない様になっているのでご注意ください。
トップシェアボタン
アイキャッチ画像の下に表示されるシェアボタンです。丸くしてみました。
ボトムシェアボタン・フォローボタン
記事下のシェアボタンとフォローボタンです。
こちらもトップシェアボタン同様、目に優しい色に。
パンくずリスト
文字の間にスペースを設けることによってパンくずリストを見やすくしてみました。
投稿日・更新日
投稿日・更新日に関しても大人可愛さを表現(したつもり)。
関連記事
関連記事一覧に関しては、大きく変わるのは見出しの部分だけになります。
コメント欄
コメント欄に関しては、見出しとボタンがいい感じになります。
プロフィール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, //関連記事のスニペットの表示
);
コメントアウトしてあるので、その該当する要素を削除してあげればご自身で好きに設定することができます。
くるみ
「イノセンス」のダウンロードはこちらから
スキン「イノセンス」、如何でしたでしょうか。
余談ですがこの「イノセンス」という名前は、ブログ主が愛してやまない某人気バンドの名曲のタイトルの一部からとっております。勘の良い方なら一瞬で気付きそうですが…
上で挙げた以外にも細かいこだわりを詰め込んだので、是非本スキンを適用してみてください。
まとめ
本サイトではCocoonのカスタマイズ記事も積極的に書いているのでそちらもぜひ。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】
居心地の良さにこだわった本スキンを是非使っていただけると幸いです!では⸝⸝- ̫ -⸝⸝
こんにちは、イノセンスを利用させていただいています!
お忙しいところ恐縮ですが、教えてください。
グローバルメニューの文字色ですが、こちらが変更できません。
プレビュー時には見えているのですが、保存するとヘッダー色に依存するようでそちらの色になってしまいます。
もし対処方法ありましたら教えていただけると助かります。よろしくお願いします。
あみゅさん
以下の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;
}
—————
ご確認いただけますと幸いです。
よろしくお願いします🙇♂️
おはようポテトさん、はじめまして!
今年(2021)の8月から雑記ブログを始めて、ずっとイノセンスを使わせていただいています!
とってもお気に入りなのですが、記事の数が増えてきたのでアイキャッチのカテゴリーラベルを表示したいと考えています。
「cocoon設定⇒アイキャッチの設定 ⇒ アイキャッチラベルを表示する」のチェックを確認したり、functions.phpにコードの追記を試してみたのですが、上手くいきませんでした…
もしスキンで制御されていらっしゃるようでしたら、表示方法についてご教示いただけますと嬉しいです。
Ataruさん
当スキンのご利用ありがとうございます!
カテゴリーラベルの件ですが、以下のCSSを追記していただければ表示されるかと思います。
——————-
.entry-card-wrap .cat-label {
display: block;
}
——————-
お手数ですがご確認いただけると幸いです🙇♂️
ありがとうございます!カテゴリーラベルが表示されました!
長い期間試行錯誤を続けてきましたが、こんなに一瞬で切り替わるのですね(T_T)
本当にありがとうございました!
おはようポテトさん初めまして。
イノセンスを使わせていただいております。
2つほどお聞きしたいのですが
目次表示がおかしくなってしまいます。
現在 wordpress cocoon 使用中です
・目次が2重表示のようになってしまう(目次項目矢印(>)の後ろにもう一つ矢印があるような
・H2タグが10を超えたあたりで目次一覧のH2タイトルの横に1と表示される。
以上2点になります。
cocoon設定にて目次タブ→目次を表示しない
に設定した場合は、目次が全て表示されなくなってしまい困っております。
以上2点、よろしければご確認願います。
quiさん
大変お手数ではありますが、事象を明確に捉えたいため
(可能であれば)「お問い合わせ」などからサイトURLをご教示いただけますと幸いです。
よろしくお願いします🙇♂️
こんにちは。
イノセンス使用させていただいてます。雰囲気気に入ってます。
専門用語がまださっぱりのド初心者です。
2点質問させてください。
・イノセンスにてデザインを試行錯誤しているのですが、h3のデザインのアイコンの部分が字にかぶってしまうので変更しようと思うのですがその際のリセットコードを教えていただけたらと思います。
・こちらはイノセンスに関係ないかもしれませんが、h2を編集画面で入力する際見えません。白字になってしまってるのだとは思うのですが直し方がわかりません。
教えてください。
この書き方で伝わるのかすらわからない素人ですが、理解できる範囲で教えていただけたら幸いです。
とても素敵なテーマですね!