【筆者体験ベース】おすすめ副業10選>>>

Cocoonの目次をカスタマイズ【コピペでスマホでもキマる!】

とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

Cocooonは完全レスポンシブ対応の最強の無料テーマですが、スマホで見るときに気にかかっていたことがありました。

それが、目次。

Cocoonの場合、プラグインの追加なしに目次を自動的に表示されるよう設定できます。

「Cocoon設定」を開き、ズラリと並んだタグから「目次」を開くと

細かい設定まで、チェックの入れ外しでできます。

ただナンバー表示を「数字(デフォルト)」に設定し、スマホで見ると

数字がほぼ縦に一直線に並んでしまってH2とH3の判別がわかりづらくなっていました。

なので今回は目次のデザインごとカスタマイズしちゃいます!

完成形はPC表示だと、こんな感じ。

スマホ表示だと、こう。

だいぶスッキリしたんじゃないかな。

不安な人
不安な人

また難しいプログラミングとかの知識がいるんじゃないの?

とち
とち

無問題です!不安な人!

ブログ歴2カ月ちょっと、HTMLやCSSの知識もほぼない僕でもできました。

追記(20年4月)

その後、下のような目次デザインに変えました。
飽き性バンザイ^^;

さぁレッツ、カスタマイズ!!

Cocoonの目次をカスタマイズ【コピペで簡単!】

Cocoonの目次をカスタマイズ【コピペで簡単!】

Cocoon目次カスタマイズの流れ

大きな流れとしては

  1. Cocoonの目次設定でベースを作る
  2. H2とH3の表示に違いをつける【コピペ!】
  3. 目次の横にアイコンを挿入【コピペ!】
  4. レスポンシブを調整していく

てな感じです。

①Cocoon設定の目次でベースを設定しておく

  • 目次表示の深さ:H3見出しまで
  • 目次ナンバーの表示:数字(デフォルト)

②Ccocoon見出しH2&3の表示に違いをつける【コピペ!】

H2とH3に強弱を持たせるために

  • H3フォントを小さく、薄く
  • H3の前の数字を消して「・」に変更

cssコードはその都度より、作業の手間も少ないので③が終わったあと、まとめて記載します。

③Cocoon目次の横にアイコン挿入【コピペ!】

ぶっちゃけ、アイコンはなくてもいいですがアクセントにはなりますね。

当ブログと同じような「ザ目次」アイコンなら、そのままペーストすればできます。

もっと違ったアイコンにしたいという方はアイコンサイト・Font Awesomeで探してみてください。

cocoonでFont Awesome 5(最新版)が使えるようになりました。
「cocoon設定→全体→サイトアイコンフォント」でFont Awesome 5にチェックを入れればOKです。

【追記】
20年10月現在、FontAwesomeはバージョン6が最新です。
Cocoon設定「Font Awesome 5」でも、バージョン6のコードは、ほとんどのアイコンでそのまま使えます。

②と③をまとめたCSSコードが、こちら!

CSSコードは必ず「子テーマ」のスタイルシート(CSSデザイン)に貼ってください。
「こはる(小貼る)」と覚えましょう。

/*目次カスタマイズ*/
 .toc{
     display: block;
     padding: 0px;
 }

 .toc-title{
     position: relative;
     padding: 10px 0px;
     background: #4169e1;/**背景色**/
     color: #fff;
     font-weight: bold;
 }

 .toc .toc-content{
     padding: 5px 35px;
 }

.toc-list > li li a {
     font-weight: normal;
     font-size: 95%;
     color: #708090;
     margin-left: -10px;
 }

.toc-list > li li ::before {
     content: '';
     width: 5px;
     height: 5px;
     display: inline-block;
     left: -7px;/**左の位置**/
     border-radius: 100%;
     background: #cdcdcd;
     position: relative;
     margin-bottom: 2px;
 }

.article .toc-list > li li {
     list-style: none;
 }

/* 目次のアイコン設定 */ 
.toc-title:before {  
   top: 0; 
     left: -45px; 
     width: 50px; 
     height: 50px;
     font-family:"Font Awesome 5 Free"; 
     content : "\f03a"; /*アイコンを変える場合はここを変更 */
     font-size:20px; 
     margin-right:5px; 
     color:#FFF; /*アイコンの色を変える場合はここを変更 */
 }

④Cocoon目次をスマホでもチェック!

必ずレスポンシブでスマホの見え方も確認してください。

Cocoonならプレビュー画面下にあるリンク↓から、簡単にチェックできます。

レスポンシブテスト画像

端末によっては、こんな感じに崩れてしまうことがあります。

レイアウト崩れ画像

枠からはみ出しているときは、コードの/**左の位置**/の数値を変えて調整してみてください。

数値を減らすほど、右に寄っていきます。
バシっとはめちゃってください。

以上で完了です、お疲れ様でした。

コード見ると白目むく、、、って人は

Cocoonはユーザーによるカスタマイズを求めるテーマでもありますので、多少のプログラミング知識が必要になります。

落ち込む人画像
やっぱりコードとかよくわからんし、
もうカスタマイズで萎える…。

って方はWordPress有料テーマも検討してはどうでしょうか?
(※正直、無料テーマでCocoon以上のもの、ないです!)

プログラミングやコードの知識がなくても、サイト作りが容易になりますヨ。
>>>WordPressおすすめの有料テーマ
↓打ち消し線の理由↓

僕は別サイトでWordPress有料テーマを使ってますが、SWELLが最高です。
コード知識なしで、キレイなサイト作りができます。

とち
とち

下のリンクは僕がSWELLで運用するサイトです。
参考までにどうぞ!

Cocoonがどうも扱いづらくて有料テーマを考えてる方は正直、SWELL一択でいいかなと思います。
それぐらい僕は惚れました。。。(*´ω`*)
>>SWELL公式サイト

Cocoonの目次をカスタマイズ:まとめ

まとめ

目次はせっかちなネットユーザーの特性上、とても大事なパーツです。

しっかり整えて、ユーザビリティ、上げていきましょう。

何度も言っているけど、また言っとこ。
←製作者のわいひらさん、ほんと神!

Cocoonをごりごりカスタマイズした記事まとめているんで、よかったらどうぞm(__)m

コメント待ってます!

  1. コメント失礼します。
    当サイトでもこの記事を参考にさせていただきました。ありがとうございます(*^_^*)

    1点CSSの記述にミスがありましたのでお伝えさせていただきます。
    font-family: “Font Awesome 5 Free”;
    という部分ですが
    font-family: “Font Awesome 5 Free”;(誤)
    font-family: “Font Awesome 5 Free”;(正)
    でした。
    クォーテーションが全角表記になっているので、コピペではFont Awesome 5 Free動作しませんでした。口出し申し訳ございません。(T_T)

    • RYUさん
      コメント、ご指摘ありがとうございます!

      コードミス大変失礼しましたm(_ _)mしかも、箇所まで特定してくれるとは助かります。

      今出先なんで帰ったら、訂正しておきます!拙ブログ読んで頂きありがとうございます

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