wordpress(賢威)で投稿部分に枠線や影をつける方法

この記事は約3分で読めます。

こんにちはFPヒデです。
今回は、Wordpress(賢威)で記事投稿部分(コンテンツ部)に枠線をつけたり、影をつける方法をお伝えしますね。

このカスタムをするだけでもサイトの見栄えが良くなりますので是非試してみてください。

 
kage0
 

投稿部分に枠線をつける方法

ダッシュボードの『外観』⇒『テーマ編集』⇒『design.css』にて設定します。
 
kage00
 
下記コードを『design.css』の一番下の方(上記画像の点線内)へ追記します。
このコードを追加することでまずは、投稿部分の背景色を変更できます。
「#fff」の部分にカラーコードを指定してあげることで変更出来ます。
※ここでは「#fff」(白)にしてあります。

#main-contents .post{
    background-color: #fff;
    padding: 0.5em;
    margin-bottom: 1.0em;
}

 

そして更に下記コードを追加して枠線を付けてみましょう。

#main-contents .post{
    border: solid 1px #ccc;
    padding: 0.5em;
    margin-bottom: 1.0em;
}

「border: solid 1px #ccc;」で枠線のスタイル(solid)、太さ(1px)と色(#ccc)を指定しています。
 
すると、下記画像のように枠線が入っているのがわかります。
 kage2
 
次は、枠線+影のパターンをやってみましょう。 

投稿部分(コンテンツ)に影をつける方法

投稿部分の左側と下の部分に画像の様に影をつける方法です。
投稿した記事など、コンテンツが少し浮いた状態に見えるため、とても見栄えが良くなります。

先ほどのスタイルコードに追加して「box-shadow」を以下の様に追記してあげます。

#main-contents .post{
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    padding: 0.5em;
    margin-bottom: 1.0em;
}

 
下記画像の赤枠の様に実際に影がついているはずです。
 
kage

サイドバー部分に枠線や影を入れる場合

投稿部分の時と同様に、下記コードを『design.css』へ追記します。
 

#sidebar {
border: solid 1px #ccc;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
padding: 0.5em;
margin-bottom: 1.0em;
}

 
kage3
 

さらに角丸にする場合はこちら

#sidebar {
border: solid 1px #ccc;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
padding: 0.5em;
margin-bottom: 1.0em;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

 
kage4
 

とても簡単にカスタマイズができますので、是非やって見て下さい。

くれぐれもコード間違いに注意してやってくださいね。

コメントを残す

サブコンテンツ

このページの先頭へ