トール（THE THOR）のテーマを使って一週間。
「カスタマイズ」では変更できない部分で、あと一歩デザインを良くしたいところがいくつかありました。
それは、
- フッターの色
- 「Copyright」の文字色
- 「番号なしリスト」のデザイン
- 目次のデザイン
の4つです。
これらは「追加CSS」でしか変更することができなかったので、メモも兼ねてここにまとめておきます！
1．フッターの色を変えた
トール（THE THOR）のフッター色は「カスタマイズ」から変更することができません。
「追加CSS」に以下を追記しました。
2.「Copyright」の文字色を変えた
フッターにある「Copyright」の文字色がグレーだったので、白に変更しました。
「Copyright」の文字色も「カスタマイズ」から変更できなかったので、「追加CSS」に以下を追記しました。
3.「番号なしリスト」をチェックマークにした
デフォルトの「番号無しリスト」は「○」の表示になっています。
▼デフォルトの番号なしリスト。
▼現在の番号なしリストはこんな感じです。
- 現在の番号なしリスト
- 現在の番号なしリスト
- 現在の番号なしリスト
チェックマークがついていますね。
これも「カスタマイズ」では変更できないので、「追加CSS」に以下を追記しました。
font-family: “icomoon”;
content: “\ea12”;
transform: scale(.8);
}.content ul li {
padding-left: 20px;
}
サイトリンク：「旅するように人生を生きよう！」
4.目次デザインを変えた
デフォルトの目次デザインはかなりシンプルです。
.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」を使っていきましょう。
トップページの色や記事内のパーツ色などは、「カスタマイズ」から簡単に変更できます。
