こんにちは画像屋の竹内です。
数名の方からここのブログの枠線のやり方のご質問を受けたので、このままでよければ使ってください！ということでCSSコードを公開します。
CSSを使うことで下記のようにそれぞれの項目に枠線ついて影付いて、サイドバーのタイトルがカラフルになります。
/* -----------------------------------------------
記事
----------------------------------------------- */
/* 記事タイトル */
.skinArticleHeader {
color: #ffffff;
margin: 0;
padding: 15px 10px;
font-size: 16px;
background-color: #ff0000;
border-left: 0px solid;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
}
.skinArticleHeader a {color: #ffffff;text-decoration: none;}
.skinArticleHeader a:hover {color: #ffc500;}
.skinArticleHeader a:visited {color: #ffffff;}
.skinArticle{
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
/* 記事タイトル 日付ＢＯＸ */
.skinWeakColor, .skinBaseWeakColor {
color: #000;
text-align: right;}
/* 記事内テキスト装飾 */
span.red16 {font-size: 16px; font-weight: bold; color: #ff4343;}
.torikeshi {text-decoration: line-through;margin-top: 0; margin-bottom: 0px;}
.skinArticle {
padding: 0px 0;
border: 0px;}
/* 記事BOX 内枠 */
.js-entryWrapper {
border: 2px solid #fff;
padding: 0px;
width: 670px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px #ff0000;
background-color: #ffffff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/* 記事テキスト */
.articleText {
overflow: hidden;
padding-bottom: 5px;
font-size: 16px;
line-height: 1.5;
}
/* -----------------------------------------------
枠微調整
----------------------------------------------- */
.skinContentsArea {
width: 1000px;
margin: 0 auto;
padding-bottom: 30px;
zoom: 1;
word-wrap: break-word;}
.columnB .skinMainArea {
float: left;
width: 650px;}
.columnB .skinSubA {
float: right;
padding-right: 10px;
padding-left: 10px;}
element.style {
width: 300px;}
/* -----------------------------------------------
サイドメニュー
----------------------------------------------- */
/* サイド枠 */
.skinMenu {
border:2px solid #ffffff;
box-shadow:0px 0px 10px #000;
background-color: #ffffff;
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
/* サイドタイトル */
.skinMenuHeader {
padding: 15px 10px;
background: #635218;
font-size: 16px;
font-weight: bold;
color: #ffffff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
}
/*サイド枠内padding変更 */
.skinMenuBody {
margin: 0px;
padding: 18px;
background: #ffffff;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px; }
/*サイド各タイトルヘッダー変更 */
.themeMenu .skinMenuHeader {background: #ff0000;}
.recentEntriesMenu .skinMenuHeader {background: #187325;}
.profileMenu .skinMenuHeader {background: #fc00ff;}
.rankingMenu .skinMenuHeader {background: #217fd6;}
.favoriteMenu .skinMenuHeader {background: #ff4200;}
.readerMenu .skinMenuHeader {background: #d0228d;}
これをマイページ＞設定>デザインの変更＞CSSの変更＞現在使用中のブログデザインCSSの一番下の張り付けて保存を押してください。
これで記事・サイドバーともに変わってると思います。
後は色などはお好きに変更していただければと思います。
また、このCSSは当方のブログようにカスタマイズしたものなのでCSS編集デザインの2カラム（サイドバー右）用になっております。
※このCSSを適用したことで、今までの表示が崩れたりしても責任はとれませんので、自己責任でお願いします。
※使用しても報告の義務はありませんが、教えてくれたら竹内とても喜びます！
[ 屋号 ] デザイン・ラボ 『画像屋』
[ 担当 ] 竹内
[ 電話 ] 090-6054-7129
[ 時間 ] 12時～24時 年中無休
[ ホームページ ] http://a-hp.net/
