« 第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう | トップページ | 管理人不在のお知らせ&年末のご挨拶 »

2006/11/04

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

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

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

記事欄角丸画像サンプル


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

手順

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

entry_base


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

    A.「entry-top」用
    角丸画像「entry-top」用

    B.「entry」用

    角丸画像「entry」用

    C.「entry-bottom」用

    角丸画像「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」様<記事内のボタン素材>


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


|

« 第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう | トップページ | 管理人不在のお知らせ&年末のご挨拶 »

カスタマイズ」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

 おぉ、すばらしい!
Macのディスプレイを見るようですね~。
いいな~!

 この技は、私もやってみたいなぁ、でもやっぱり…。
と、躊躇していたカスタマイズです。
 よく参考書籍には載っているんですけどね
近頃、根気が続かなくって^_^;

 毎度思うんですが、takoさんは色の配分や選択が
とってもお上手です!
 コレは、さすがに真似できません。 

投稿: はっさく | 2006/11/15 21:26

■はっさくさん
こんにちは。コメントありがとうございます。

このカスタマイズは(記事にも書きましたが)、とにかく面倒臭いです!(笑)
何しろ、余白の設定が複雑過ぎて自分でも何をやっているのか段々判らなくなりました。
更にそこまでやってもブラウザによっては(多分)崩れているのではないかと思います…^^;
なので、オススメはしません(爆)
確かに見た目はすっごく私好みなんですが、そのために犠牲になっているものがあまりにも多い、ような気がします(T_T)

>色の配分や選択がとってもお上手です

ありがとうございます~♪すごく嬉しいです(^^)
これがリアルな生活にも反映されてれば言うことないんですが…(泣)
せめてブログでは頑張りたいと思います。

投稿: tako→はっさくさん | 2006/11/17 23:05

はじめまして。
ブログを始めてまもなく、「 ココログ 」ではじまる検索キーワード
という所を、ポチポチと見ておりました。
凄い綺麗で、私には中々出来ませんが。
「サイドバーを項目ごとに折り畳んでみよう」を、実行してみました。
凄い感動しています。。ありがとうございました。
今後ともよろしくおねがいします。

投稿: バボ | 2006/11/21 10:48

■バボさん
こんにちは。

ココログはHTMLの編集は出来ないので、構造自体を大きく変えることは出来ませんがCSSの編集とスクリプトの導入でかなり見た目や使い勝手が変えられると思います。
私のブログが少しでもその手助けになっていれば嬉しいです。

またお時間があったらご訪問下さい。
コメントありがとうございました。

投稿: tako→バボさん | 2006/11/23 20:06

記事枠の勉強させていただきました。
なんとか成功しました♪
後は自分なりに 画像を作ろうと思っています。
それでは 頑張ってください、失礼します。。

投稿: 僕。 | 2006/12/16 23:28

■僕。さん
こんにちは。コメントありがとうございます。

私の記事がお役に立って何よりです(^^)
これからもカスタマイズ、頑張って下さいね。

投稿: tako→僕。さん | 2006/12/17 23:04

ココログを始めて、最初にこの角丸背景に惚れました。

自分のブログを角丸にしたのを皮切りに、今やメインのHPから最近立ち上げたWikiに至るまで、どこにでも角丸を使ってます^^。

で、角丸も最初はGIMPで作ったのですが、自在に幅や色を変えるのが面倒になって、本当に角丸にしか役に立たないソフトまで作ってしまいました。

この角丸を普通の方が使われるには、どうしても角丸画像がネックになると思われ、大して役にも立たないソフトなのに失礼かもしれませんが、紹介させていただきます。

http://hpcgi2.nifty.com/maronomori/wiki/index.cgi?Lib%2f%a5%a8%a5%f3%a5%c8%a5%ea%b2%e8%c1%fc%ba%ee%c0%bd

投稿: 森イチロー | 2007/06/07 21:30

■森イチローさん
こんにちは。コメントありがとうございます。

確かに自分の思ったとおりの色や形で角丸画像を作るのって結構面倒なんですよね。
使用頻度は低いかもしれませんが、角丸が自由自在に作れるならニーズは高いのではないでしょうか。

記事の中で紹介させていただきますね(^^)

投稿: tako→森イチローさん | 2007/06/16 11:31

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/4067518

この記事へのトラックバック一覧です: 第37回:記事欄を角丸の画像で囲んでみよう:

» 記事欄を角丸画像と罫線で囲む [***Country Netlife***]
 前回から大分間が開いてしまいましたが、続きです。 《前回までの記事》  記事欄の角を丸くしてみた  かんたん作成! GIMPで角丸画像(罫線タイプ) 《参照サイト》  初めてのココログ・カスタマイズ  「第37回:記事欄を角丸の画像で囲んでみよう」(tako様)  takoさんご紹介のような透明角丸画像タイプで囲む場合、作成した角丸画像を上・中・下の3パートに切り、それを各パートに表示させるとい... [続きを読む]

受信: 2009/03/09 00:00

« 第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう | トップページ | 管理人不在のお知らせ&年末のご挨拶 »