(3-6) 記事 のカスタマイズ⑤(記事背景に角丸の枠をつける)
>>こちらもどうぞ
「(3-6) 記事」の解説をします。第5弾です。
今回は記事周りに枠線をつける設定を解説します。今回のコラムは角丸設定用の画像を3個用意する必要があります。
そして2カラム用と3カラム用があるのでそこにも注意しなければいけません。この解説コラムでは、これらの角丸の枠を用意しております。こちらを使って試してみたい方はまず一度ダウンロードしてお使いください。
zipの圧縮形式で解凍すると、中にフォルダーがあります。フォルダーの中には3カラム用と2カラム用がありますので、あなたのブログに応じてお使いいただけたらと思います
上記枠を使っての本編のゴールイメージは以下のようになっています。
CSSを編集しよう
では早速解説します。CSS編集用画面を開いてください。 「(3-6) 記事」の部分ですが、今回は複雑なので全てを「(3-6) 記事」の部分にまるごとコピーペーストでかぶせてしまいます。赤字の部分には画像のURLを貼り付けます。
/* (3-6) 記事
--------------------------------------------*/
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:0px;/*タイトルと記事枠の上下の余白①*/
border:none;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0px;/*タイトル周りの余白の設定②*/
padding:12px 10px;
border-left:none;/*タイトル左の線を消去③*/
font-size:1.3em;/*タイトル文字の大きさ④*/
background-image:url(ブログ記事枠 上の画像のURLをここにコピー);/*タイトルの背景画像の設定⑤*/
}
.skinArticleHeader2{border-left:5px solid #000000;/*タイトル左の線の設定⑥*/
padding:0px 10px;/*タイトル左の線とタイトル文との余白⑦*/
}
.skinArticleTitle{color:#000000!important;/*タイトル文の文字色の設定⑧*/
font-family:"meiryo";
}
/* skinArticleBody 記事本文エリア */
.skinArticleBody{background-image:url(ブログ記事枠 中の画像のURLをここにコピー);}
.skinArticleBody2{
margin:0 29px;
}
/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{background-image:url(ブログ記事枠 下の画像のURLをここにコピー);
background-repeat:no-repeat;
margin:0px 0px 0;
border-top:none;
background-position:left bottom;
padding-top:17px;
padding-bottom:10px;}
解説
今回のスタイルシートにはコードの横に注意書きとして①~⑧の数字がふった説明文があります。これらは全て前回までの記事で解説したものとなっています。
それぞれの役割を知ることで、タイトル文字のカスタマイズ等幅広いカスタマイズができますので一度これ以前の記事も参考にしてもらえばと思います。過去記事は下の枠囲いにリンクをアップしました。
簡単に今回の解説ですが、上にある画像のURL先にあなたがアップロードした画像をアップロードすることになるので、この3つの部分(赤字で書いてある、上中下の部分)を変更することだけは必ず行ってください。
細かい詳細設定は実は記事のカスタマイズコラム①~④までで解説してあるので、例えばタイトルの装飾や記事の文字装飾の点などは前回のコラムを参考にしてみてください。
記事関係の過去コラム一覧
- (3-6) 記事 のカスタマイズ①
記事をカスタマイズする前に・・・準備編
- (3-6) 記事 のカスタマイズ②
記事のタイトルに色つきの帯を設定するカスタマイズ
- (3-6) 記事 のカスタマイズ③
記事本文の部分と、記事フッターに背景色を設定する方法
- (3-6) 記事 のカスタマイズ④
記事本文の文字サイズと文字色のカスタマイズ
これで記事枠を角丸背景にできるようになります。
ご自分で画像を用意する場合の注意点
もしご自分で枠の画像をご用意する場合は、3つのそれぞれの画像の大きさを以下の指定サイズにしてください。その大きさを守って画像を作っていただければこのスタイルシートのコードでうまくいきますので、お勧めの画像の大きさをお伝えしておきます。
記事枠上部
- 2カラム・・・幅665px×高さ180px(高さはあなたのブログのデザインで合わせてください)
- 3カラム・・・幅470px高さ180px(2カラムと同じくデザインによって変えてください)
記事枠中部
- 2カラム・・・幅665px×高さ2px(高さはあなたのブログのデザインで合わせてください)
- 3カラム・・・幅470px高さ2px(2カラムと同じくデザインによって変えてください)
記事枠下部
- 2カラム・・・幅665px×高さ83px(高さはあなたのブログのデザインで合わせてください)
- 3カラム・・・幅470px高さ83px(2カラムと同じくデザインによって変えてください)
以上を踏まえて「記事」部分のカスタマイズしてみてください。