simplicity2でのタグのデザイン、記事間の境界線、続きを読む等のカスタマイズ備忘録。
基本コピペでOKです。
ごりら
今回はちょっとしたカスタマイズを中心に紹介します
タグのデザイン
まずはタグのデザインを変えていきます。
ソースコードは以下の記事を参考にさせて頂きました。
https://momoura.com/simplicity2-customize
↓こちらのコードをstyle.cssの一番下にコピペすればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*タグ*/ .tagcloud a { font-size: 14px !important; /* 文字サイズ */ line-height: 1em; background: #00008B; /* 背景色 */ color: #fff; /* 文字色 */ display: inline-block; white-space: nowrap; padding: 8px 8px; /* 文字周り余白 */ margin-top: 3px; /* タグ余白 */ border-radius: 4px; /* 角を丸くする */ text-decoration: none; } .tagcloud a:hover { background: #ddd; /* マウスホバー背景色 */ color: #cc0033 !important; /* マウスホバー文字色*/ } /* アイコンを入れる「Font Awesome」*/ .tagcloud a:before { font-family: "FontAwesome"; content: "\f02b"; padding-right: 4px; } |
お好みで#〇〇〇〇〇〇の部分を変更して色を変えたり、
〇〇pxの部分を変更して文字サイズを変えたりしてみてください。
完成見本
ウイジェットタイトルのデザイン変更は前の記事で紹介しました。
【超簡単】Simplicity2カスタマイズ②（小見出し、ウィジェット編）
当ブログで変更したタイトル（小見出し、ウイジェット）カスタマイズの備忘録。
シンプルさと見易さと簡単さを重視しました。
goristudy.com
境界線を引く
記事と記事の間に境界線を入れることで、サイト全体が見易くなったように感じます。
コードはこちら。
|
1 2 3 4 5 |
/* 記事間の線 */ #main .entry { border-bottom: 1px dotted #333333; padding-bottom: 15px; } |
関連記事にも線を引きたい場合はこちら
|
1 2 3 4 5 |
/* 関連記事間の線 */ #main .related-entry { border-bottom: 1px dotted #333333; padding-bottom: 15px; } |
おまけ
続きを読むを消す
【続きを読む】ボタンは個人的にはいらないと思ったので消すことにしました。
style.cssをいじらなくても、カスタマイズ画面から消去できます。
カスタマイズ→テーマ内テキスト→「記事を読む」の変更
そこに書いてある「記事を読む」を消去して空欄にするだけで大丈夫です。
本文文字を灰色に
黒よりも灰色の方が読みやすいようなので、本文文字の色を変更しました。
本当に少しだけの変化ですが。
|
1 2 3 4 |
/* 文字を灰色に変更*/ body{ color:#555555 !important; } |
まとめ
３回にわたってsimplicity2のカスタマイズを紹介してきました。
記事の通りに全てすれば、このブログと全く同じデザインになります。(2017年３月時点）
カスタマイズ記事は当ブログ以外にもたくさんあるので、色々探してコピペして、理想のデザインを目指してみてください。