トール(THE THOR)にしてから「追加CSS」でデザイン変更したカスタマイズまとめ!

  • 2020年10月21日
  • 2020年10月21日
  • blog
あけこけ
ブログテーマをトール(THE THOR)にしてから、「追加CSS」でデザイン変更したポイントをお話していきます!

トール(THE THOR)のテーマを使って一週間。

「カスタマイズ」では変更できない部分で、あと一歩デザインを良くしたいところがいくつかありました。

それは、

  • フッターの色
  • 「Copyright」の文字色
  • 「番号なしリスト」のデザイン
  • 目次のデザイン

の4つです。

これらは「追加CSS」でしか変更することができなかったので、メモも兼ねてここにまとめておきます!

1.フッターの色を変えた

あけ
フッターの色がデフォルトで黒だったので、オレンジにしました!

トール(THE THOR)のフッター色は「カスタマイズ」から変更することができません。

「追加CSS」に以下を追記しました。

.l-footer .wider .bottomFooter{background:#○○○○○○;}
「#○○○○○○」の部分にカラーコードを入れると、好きな色に変えられます。

2.「Copyright」の文字色を変えた

フッターにある「Copyright」の文字色がグレーだったので、白に変更しました。

「Copyright」の文字色も「カスタマイズ」から変更できなかったので、「追加CSS」に以下を追記しました。

.l-footer .wider .bottomFooter .container .bottomFooter__copyright{color:#○○○○○○;}
「#○○○○○○」の部分にカラーコードを入れて、好きな色に変えられます。
ちなみに「Copyright」の文字や「by FIT-Web Create. Powered by WordPress.」という表示は変更できます。
「カスタマイズ」→「共通エリア設定」→「フッターエリア設定」→「コピーライトの設定」
から変更してください。
あけこけ
フッターを整えるだけで、デザインがかなり統一されたね!

3.「番号なしリスト」をチェックマークにした

デフォルトの「番号無しリスト」は「○」の表示になっています。

▼デフォルトの番号なしリスト。

あけこけ
これをチェックマークのリストにしたかったので、カスタマイズしました。

▼現在の番号なしリストはこんな感じです。

  • 現在の番号なしリスト
  • 現在の番号なしリスト
  • 現在の番号なしリスト

チェックマークがついていますね。

これも「カスタマイズ」では変更できないので、「追加CSS」に以下を追記しました。

.content ul > li::before {
font-family: “icomoon”;
content: “\ea12”;
transform: scale(.8);
}.content ul li {
padding-left: 20px;
}
あけこけ
リストと目次のカスタマイズは、 「旅するように人生を生きよう!」さんのブログを参考にさせていただきました!
他にも数種類のアイコンに変えられるので、ぜひ参考にしてみてください。

4.目次デザインを変えた

デフォルトの目次デザインはかなりシンプルです。

あけこけ
これをポップな感じに変えました!
▼現在の目次はこちら。
これも「カスタマイズ」では変更できないので、「追加CSS」に以下のCSSを追記します。

.content .outline {
border: 3px solid #ff6347;
padding: 10px 0 10px;
background:#4169e1;
}.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#ffd700;
width:auto;
}.content .outline__number{
width:1.8em;
height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#ff69b4;
color:#fff;
border-radius:50%;
}.content .outline__link {
display: block;
color:#777;
}.content .outline__link:hover {
color:#cfcfcf;
}.outline__title {
color: #228b22;
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}.content .outline__switch{
right:1.5rem;
top:10px;
}.content .outline__toggle:checked + .outline__switch::before {
content: “[ ▲ CLOSE]”;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}

.content .outline__switch::before {
content: “[ ▼ OPEN ]”;
border: 0;
color:#999;
}

.content .outline__switch + .outline__list {
background: transparent;
}

.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
border-top:2px dotted #cfcfcf;
}

.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}

.content .outline__switch + .outline__list-2 li ul li:first-child{
margin-top:0.5em;
}

.outline__list-2 > li > a{
font-weight:700;
}

.outline__title:before{
font-family: “icomoon”;
content: “\e92f”;
margin-right:5px;
}

@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}

.content .outline {
width:90%;
margin:3rem 5%;
}
}

@media only screen and (max-width: 991px){
.content .outline {
width:100%;
margin:3rem 0;
}
}

※このままではすごく変な色になります。各カラーコードをお好みで変更してください。

  • #ff6347=目次外枠の色
  • #4169e1=目次背景の色
  • #ff69b4=目次のh2数字の色
  • #228b22=目次アイコン&目次の色
  • #ffd700=目次のh3数字の色
あけこけ
Webカラーコードの見本は下のサイトが使いやすいです!

追加CSSで好みのデザインに!

あけこけブログを作っていて、デザインのほとんどは「カスタマイズ」から変更できる部分で満足でした。

足りなかったのはここで紹介した4つのポイントだけ。

あけこけ
これも「追加CSS」で簡単に整えられたので大満足です!

フッターや目次など、細かい部分まで自分なりの色にしたいという人は、「追加CSS」を使っていきましょう。

トップページの色や記事内のパーツ色などは、「カスタマイズ」から簡単に変更できます。

あけこけ
「カスタマイズ」で変えられる色は別記事にまとめたので、そちらを参考にしてく下さい!
以上、テーマをトール(THE THOR)にしてから行ったカスタマイズまとめでした!