1. TOP
  2. アメブロカスタマイズ
  3. (3-6) 記事 のカスタマイズ⑤(記事背景に角丸の枠をつける)

(3-6) 記事 のカスタマイズ⑤(記事背景に角丸の枠をつける)

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

では早速はじめましょう。今回はCSS編集用画面の(3) エリアのスタイルブロックの中の、
「(3-6) 記事」の解説をします。第5弾です。

今回は記事周りに枠線をつける設定を解説します。今回のコラムは角丸設定用の画像を3個用意する必要があります。

そして2カラム用と3カラム用があるのでそこにも注意しなければいけません。この解説コラムでは、これらの角丸の枠を用意しております。こちらを使って試してみたい方はまず一度ダウンロードしてお使いください。

zipの圧縮形式で解凍すると、中にフォルダーがあります。フォルダーの中には3カラム用と2カラム用がありますので、あなたのブログに応じてお使いいただけたらと思います

上記枠を使っての本編のゴールイメージは以下のようになっています。
image-11070254147-11594141654

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つのそれぞれの画像の大きさを以下の指定サイズにしてください。その大きさを守って画像を作っていただければこのスタイルシートのコードでうまくいきますので、お勧めの画像の大きさをお伝えしておきます。

記事枠上部
  • 2カラム・・・幅665px×高さ180px(高さはあなたのブログのデザインで合わせてください)
  • 3カラム・・・幅470px高さ180px(2カラムと同じくデザインによって変えてください)
記事枠中部
  • 2カラム・・・幅665px×高さ2px(高さはあなたのブログのデザインで合わせてください)
  • 3カラム・・・幅470px高さ2px(2カラムと同じくデザインによって変えてください)
記事枠下部
  • 2カラム・・・幅665px×高さ83px(高さはあなたのブログのデザインで合わせてください)
  • 3カラム・・・幅470px高さ83px(2カラムと同じくデザインによって変えてください)

以上を踏まえて「記事」部分のカスタマイズしてみてください。

 

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ