賢威で投稿部分に枠をつける方法(角丸枠、浮かせた影付き枠)

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

  • LINEで送る

投稿部分の枠デザイン

賢威6.1の投稿部分は他の背景と同色になっています。
賢威6.1では、より平面的なデザインに統一されているのでこのようになっていると思いますが、
投稿部分はサイト・ブログのメインとなるコンテンツ部分なので目立たせたいです。

そこで、投稿部分に枠をつけて目立たせる方法を説明します。

投稿部分のみに枠を設定

投稿部分のみに枠を設定するには「post」に対するスタイルを追加します。
「外観 > テーマ編集」から「design.css」を開き、1番下に以下のスタイルを追加します。

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

「background-color: #fff;」で背景色を設定できます。例では白背景にしています。

また、背景色は変更せずに枠線のみつけることも可能です。
その場合は、以下のスタイルを追加します。

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

「border: solid 1px #ccc;」で枠線のスタイル(solid)、太さ(1px)と色(#ccc)を決めています。
「border」の詳細は、以下のページをご覧ください。実践だけでなく、点線なども可能です。
border-スタイルシートリファレンス | HTMLクイックリファレンス

トップページの最新投稿にも枠がつく

ここでひとつ注意したいのは、この設定を追加するとトップページにも影響が出ます。
初期設定の場合、トップページで記事の抜粋を表示していますが、
その記事部分にも同様の枠が表示されます。

トップページの投稿部

トップページの投稿部分です。
投稿の個別ページと同様の枠が表示されます。

投稿枠のデザインを浮かせたり、角丸にしてみる

背景色や枠線で囲むだけでもだいぶ印象は違いますが、
さらにデザインをちょっと変更してみます。

背景色を浮き出した枠にする

背景色を付けるだけでなく、その枠を少しだけ浮かしたイメージにします。
先ほどの背景色のスタイルに「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;
}

浮かせた影付き枠

枠の右側と下側が少し浮いた感じで表示されます。
「box-shadow」では、内側などにも影を付けて立体的にできますので、
詳しくは、以下のサイトを参考に数値などをサイトイメージに合わせてください。
box-shadow-CSS3リファレンス | HTMLクイックリファレンス

枠線を角丸にする

次に枠線を角丸にする方法です。
先ほどの枠線のスタイルに「border-radius」を以下のように追加します。

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

角丸枠

上下左右の枠線が角丸になります。
「border-radius」のピクセルを変更することで、角丸のサイズを変更できます。

  • LINEで送る

“賢威で投稿部分に枠をつける方法(角丸枠、浮かせた影付き枠)” への2件のフィードバック

  1. イノウエ より:

    はじめまして、検索より訪問させて頂きました。

    これ、ずっとやってみたかったんですけど
    自分にはムリだろうと思ってました。
    が、こちらで分かりやすく説明なさっていたので
    簡単に変更することがで、とても喜んでいます。

    また。見出しのデザイン変更とコメント欄の
    メールボックスの非表示も参考にさせて頂きました。

    ありがとうございます!!
    今後も記事の公開、楽しみにしています。

  2. […] カスタマイズ情報は、いつもの『賢威カスタマイズ研究所』のこの記事です。 […]

コメントを残す

このページの先頭へ