\ Advertisements/

Cocoonカスタマイズ|有名ブロガーの目次をパクってみた!

Cocoon目次カスタマイズCocoon
この記事は約2分で読めます。

まいどおおきに!おおもと(@so88qa)です!

この記事は、ワードプレス無料テーマCocoonのカスタマイズ記事です。コピペで簡単にCocoonをカスタマイズする記事を書いていきます!

 

ワードプレス無料テーマ『Cocoon(コクーン)』を徹底レビュー
今一番有名なワードプレステーマ『Cocoon(コクーン)』を3ヶ月使ってわかった。コクーンの魅力を徹底的にお伝えします。 ぶっちゃけ、悪いところがないのでデメリットを知りたい人はこの記事を読まないでください。

 

今回はなんと!マサオカブログの目次をパクって行きますよ!

 

パクリ内容はこちら↓

PC表示

 

スマホ表示

 

目次の右下にアイコンを表示させて、アクセントをつけるカスタマイズをパクって行きます!

 

 

興味のある人はコードをコピペをしてくださいね<(_ _)>

\ Advertisements/

コピペで簡単CSSコード

.article .toc::after{

position: absolute;
font-family: FontAwesome;
content: "\f245”;/*好きなアイコンに変えてください。*/
font-size: 5em;/*アイコンサイズ*/
color:#fff;/*アイコンの色*/
opacity: .5;/*アイコンの透明度*/
right:6%;/*アイコンの横位置*/
margin-top:-8rem;/*アイコンの縦位置*/

}

 

 

たったこれだけのコードをコピペするだけでできちゃいます!

\ Advertisements/

ちょこっとカスタマイズ

今回紹介したコードをカスタマイズするなら…

  • content:○○;
  • font-size:○○;
  • color:○○;
  • opacity:○○;

を自分のブログに合わせてカスタマイズしてください♪

例えば…

content: url(○○);/*○○に画像のURLを貼り付け*/

とcontentに画像のURLを貼り付けて、目次に表示させる事もできます♪

その場合には、

  • right:○○;
  • margin-top:○○;

とアイコンの位置も調整する必要があるので注意してください。

\ Advertisements/

まとめ

この記事は、ワードプレス無料テーマCocoonのコピペで簡単にCocoonをカスタマイズする記事でした。

簡単にできるので、「ちょっとやってみようかな〜」って思った人はぜひ試してくださいね〃´∀`)

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