第37回：記事欄を角丸の画像で囲んでみよう

ずっとやりたかったけど設定が面倒臭そうで先送りにしていた「記事欄角丸」をようやく実現しました！
やってみたら、思った通り面倒臭かったです…^^;

ついでにデザイン変更もしてみました。
タイトル画像は「ミントblue」様、背景のドット柄素材は「素材の庭園」 様からお借りしました。
ありがとうございます♪

JavaScriptとCSSを使って角丸を実現するといった方法もあるようですが、私が取った方法は「角丸の画像を準備して、それをCSSで背景に設定する」という方法です。

事前準備：角丸画像を準備する

1. 画像ソフトを使って上記のような角丸画像を作成する。
   ※大きさは記事欄の幅に合わせますが、設定サイズちょうどではなく左右に少し余裕があったほうがいいと思います。
   ※私の場合は、幅390px / 高さ81pxで作成しました。
   （上記の画像は縮小してあります）
2. 上記の画像を「entry-top」用、「entry」用、「entry-bottom」用に3分割し、 それぞれ別の名前を付けて保存する。
   
   A.「entry-top」用
   
   
   B.「entry」用
   
   
   
   C.「entry-bottom」用
   
   

ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1： ファイルのアップロード』
を参照して下さい。

CSSを編集する

1. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
   ※カスタムテンプレートの作り方は
   ■ 『第3回：カスタムテンプレートを作ってみよう』
   を参照して下さい。
2. 「編集」画面のCSS記述欄に
   
   .entry-top{
   background-image:url(A.「entry-top」 用画像のURL);/*画像の指定*/
   background-repeat:no-repeat;/*画像の繰り返し：なし*/
   padding:40px 30px 0px 20px;/*画像内側の余白：上右下左*/
   margin:-5px -10px ;/*画像外側の余白：「上下」「左右」*/
   background-position:top center;/*画像の位置*/
   }
   
   .entry{
   background-image:url(B.「entry」 用画像のURL);/*画像の指定*/
   background-repeat:repeat-y;/*画像の繰り返し：縦方向へ繰り返し*/
   padding:5px 30px 5px 20px;/*画像内側の余白：上右下左*/
   margin:-12px -10px ;/*画像外側の余白：「上下」「左右」*/
   background-position:top center;/*画像の位置*/
   }
   
   .entry-bottom{
   background-image:url(C. 「entry-bottom」 用画像のURL);/*画像の指定*/
   background-repeat:no-repeat;/*画像の繰り返し：なし*/
   padding:40px 30px 0px 20px;/*画像内側の余白：上右下左*/
   margin:-12px -10px;/*画像外側の余白：「上下」「左右」*/
   background-position:top center;/*画像の位置*/
   }
   
   上の3つの指定でメインページはきちんと表示できたのですが、 個別ページではコメント欄などがはみ出すなど不具合が出たので下記の設定を追加しました。
   
   .entry-body,.entry-trackback,.entry-comment,comment-content,.comment-form
   {
   padding:10px 0px 0px 5px;
   margin:-5px -10px;
   }
   
   #comment-text textarea, #comment-text-field textarea {
   width: 330px;
   }
3. 設定が完了したら「変更を保存」ボタンを押す。
   ※保存する前に見え方をチェックしたい場合は「確認」ボタンを押してプレビューしてみて下さい。
4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
7. イメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか？

• 今回の角丸画像はフリーソフト「J-Trim」を使いました。
  画像を切り取るための「角丸切り取り」という機能があるのですが、 何もない新規のキャンバスでそのまま使ったところ今回のような角丸画像が簡単に作成できました。
  ■「WoodyBells」 様内「J-Trim」
  ※「J-Trim」は高機能なのに使い易い便利なソフトでオススメですが、インストールについては自己責任でお願いいたします。
• 「まろぶろぐ」の森イチローさんが〈角丸作成専用プログラム〉を作っていらっしゃいます。
  ■Lib/エントリ画像作製
  角丸画像を自分の好みの大きさ・色・形で作成出来るようです。
  利用してみてはいかがでしょうか。【'07/06/16追記】
• 今回のカスタマイズのポイントは「余白」です。
  上記のCSS内の数値はあくまで作った画像を利用した場合の設定であり、画像の大きさ、 切り取り方の違いなどで微妙に違ってくると思います。
  最初は上の設定をコピーして適用してみて、ずれるようであれば設定を細かく変更しながらプレビューを繰り返してみて下さい。
  （私もプレビューを50回以上繰り返しました^^;）
  余白の設定については下記のページなどで確認して下さい。
  ■「TAG index」 様内 「ボックスのマージン （外側の余白）を指定する」/ 「ボックスのパディング（内側の余白）を指定する」
• 画像の幅が大きなものとかはみ出しちゃってますね…お見苦しくてスミマセン(T_T)
  後日修正しておきます。
  画像を多用されている方はこのあたり、注意が必要かと。
  【'06/11/05追記】
  一応目に付いたところは修正しました。
  いずれにしても幅が狭くなるので、このブログのように長文が多い場合はちょっと読みにくいかも知れません。
  レイアウトを3カラムじゃなく、2カラムにして記事欄の幅を広げた方がいいかも。

■素材サイト「ミントBlue」 様
■素材サイト「素材の庭園」 様
■「TAG index」 様
■素材サイト 「PRISM」様＜記事内のボタン素材＞

---

*この記事にコメントを書く*

---