Simplicityカスタマイズ 線の種類、太さ、色も自分のサイトに合うようにカスタマイズできちゃいます。

今日は全く予定がなくて、朝起きて、リオオリンピックを観て、高校野球観て、昼ごはん食べて、高校野球観て、ビールを飲んでーとダラダラとお盆休みを満喫している岡です。
ダラダラ過ごすのもたまにはいいね!

昨日のブログで書いたWordPressのテーマSimplicityのカスタマイズ。

ブログを書くことはもちろん大切ですが、見た目も大切だと思います。

コードの意味がわからなくても簡単に線が変更できます。

このブログ記事の中でちょっとだけ触れた線の種類、太さ、色の変え方を紹介します。自分のブログサイトのテーマカラーや背景の色を変更されている場合はそれに合わせて線の種類、太さ、色を色々試してみて自分のブログサイトに合った線を見つけてもらえればと思います。

/* 記事間に線を引く */
#main .entry {
border-bottom: 1px solid #898989;
padding-bottom: 10px;
}

上記のコードをCSS編集にコピペすると記事間に線を引くことができます。
border-bottomが下に線を引くというコードで
1pxが線の太さ
solidが直線
#898989が線の色
padding-bottomが線の上の間隔のサイズになります。

例えば線を太くしたいと思うのなら1pxの数字を大きくすると太くなります。
直線じゃなくて破線にしたい場合はsoliddashedに、点線にしたい場合はdottedにするとそれぞれの線に変更することができます。

スクリーンショット 2016-08-15 13.37.35

dashedで破線に

スクリーンショット 2016-08-15 13.37.03

dottedで点線に

(スマホでこのブログを見てる人にはちょっとわかりにくい画像ですね)

dashed、dotted以外にも線の種類があるんで興味がある人は調べてみてくださいね。

#898989はバトルシップグレイという色でちょっと薄めの灰色です。
ボクはサイトのイメージには色が重要だと思っていて色の変更の時には
「WEB色見本」を参考にして色を決めています。

WEB色見本

WEB色見本

色の名前の下の#000000をコードに入れると色が変更されます。
いろんな色を試してみて自分のサイトに合う色を見つけるのも楽しいですよ。

padding-bottomが線の上の余白のサイズになるんですが、10pxの数字を変更することで線の上の間隔のサイズを変更できます。

スクリーンショット 2016-08-15 13.40.26

ボクのブログサイトを例にすると、「記事を読む」ボタンと線との間隔がpadding-bottom: 10px;で変更できるということです。

たかだか線を引くだけでこれだけの作業が必要になるので正直ちょっと面倒くさいかなって思われるかもしれませんが、カスタマイズをする時には線や色の変更がちょくちょく出てくるので一度経験しておけばこれからカスタマイズをしていく上できっと役に立つと思います。

カスタマイズする時は線の種類、太さ、色をどれにしたかをメモするなどして記録しておくことをお勧めします。
他のカスタマイズをする時に統一感を持たせるためにも線の種類、太さ、色は同じにしておいた方がいいと思いますからね。


The following two tabs change content below.
岡 公司
播州瓦工業株式会社 専務取締役 岡 公司です。 生まれ故郷、国産みの島淡路島の土から生まれる瓦の独自の価値をもっと伝えたくて瓦の価値を伝えることをメインにブログを書いてます。 自分の好きな事、楽しい事をFacebook、Twitter、Instagram、ブログ、ニュースレターで発信しています。 エクスマ75期 ニックネームは小池さんです。