【超簡単】Simplicity2カスタマイズ③（タグ、境界線編）

simplicity2でのタグのデザイン、記事間の境界線、続きを読む等のカスタマイズ備忘録。

基本コピペでOKです。

ごりら

今回はちょっとしたカスタマイズを中心に紹介します

タグのデザイン

まずはタグのデザインを変えていきます。

ソースコードは以下の記事を参考にさせて頂きました。

↓こちらのコードをstyle.cssの一番下にコピペすればOKです。

/*タグ*/
.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;
}

/*タグ*/

.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の部分を変更して文字サイズを変えたりしてみてください。

完成見本

ウイジェットタイトルのデザイン変更は前の記事で紹介しました。

境界線を引く

記事と記事の間に境界線を入れることで、サイト全体が見易くなったように感じます。

コードはこちら。

/* 記事間の線　*/
#main .entry {
    border-bottom: 1px dotted #333333;
    padding-bottom: 15px;
}

/* 記事間の線　*/

#main .entry {

border-bottom: 1px dotted #333333;

padding-bottom: 15px;

}

関連記事にも線を引きたい場合はこちら

/* 関連記事間の線 */
#main .related-entry {
    border-bottom: 1px dotted #333333;
    padding-bottom: 15px;
}

/* 関連記事間の線 */

#main .related-entry {

border-bottom: 1px dotted #333333;

padding-bottom: 15px;

}

おまけ

続きを読むを消す

【続きを読む】ボタンは個人的にはいらないと思ったので消すことにしました。

style.cssをいじらなくても、カスタマイズ画面から消去できます。

カスタマイズ→テーマ内テキスト→「記事を読む」の変更

そこに書いてある「記事を読む」を消去して空欄にするだけで大丈夫です。

本文文字を灰色に

黒よりも灰色の方が読みやすいようなので、本文文字の色を変更しました。

本当に少しだけの変化ですが。

/* 文字を灰色に変更*/
body{
　color:#555555 !important;
}

/* 文字を灰色に変更*/

body{

　color:#555555 !important;

}

まとめ

３回にわたってsimplicity2のカスタマイズを紹介してきました。

記事の通りに全てすれば、このブログと全く同じデザインになります。(2017年３月時点）

カスタマイズ記事は当ブログ以外にもたくさんあるので、色々探してコピペして、理想のデザインを目指してみてください。