今回は細かすぎて伝わりにくいカスタマイズです！
WordPressテーマCocoonの目次をカスタマイズしていきます。
そのままでもいいですが、若干味気がないのと、目立ちにくいので、一目でわかるようにカスタマイズしていきます。
それではやっていきましょう～
新たにレンタルサーバーを選ぶならこれ！
エックスサーバー
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！
またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！
またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。
子テーマを忘れずに！
カスタマイズをするので必ず子テーマを使いましょう！
子テーマについてはこちらでまとめていますのでご参考にしてください。
【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし！
WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ？なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...
plu-plu.net
2018.08.02
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする！
前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する！子テーマを導入する方法は2通りあります。１つは親テーマと一緒にダウンロードする！もう１つは自分で子テー...
plu-plu.net
2018.12.11
Cocoonの子テーマ導入方法はこちら！
デフォルトの状態
コンパクトにまとまっています。
この状態でも十分ですが、目立つようにカスタマイズしていきます。
コード公開
以下のコードをstyle.cssにコピペします。
.toc{
display:block;
padding:0;
}
.toc-title{
position:relative;
background:#ffbc00;/*最上部背景色*/
padding:10px 0;
color:#fff;
font-weight:bold;
}
.toc-title:before{
content:"";
position:absolute;
top:100%;
left:50%;
right:50%;
transform: translate(-50%,0%);
border:15px solid transparent;
border-top:15px solid #ffbc00;/*toc-titleの背景色と同色*/
}
.toc .toc-content{
padding:10px
}
.toc .toc-content ol li a,
.toc .toc-content ul li a{
display:block;
border-bottom:1px dashed #ababab;
margin-left:-20px;
padding-left:20px;
}
このようになります！
目次そのものの幅を広くし、線などに色を付けました。
上記コードのコメントに対応する箇所を変更することで、色や太さを変更することが出来ます。
自分の好みやサイトに合わせて変更してみて下さい！
コピペも良いですが・・・
Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント