第11回：記事とフッターの間に区切り線（画像）を入れてみよう
エントリー欄とフッター（投稿者名やカテゴリ、固定リンクなどが書いてある部分）の間に区切り線になる画像を入れてみましょう。
こんな感じ↓になります。（クリックで拡大）
事前準備：画像を入手する
区切り線用の画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
私は「Simple Life」 様でお借りした素材 （300px * 28px）を使いました。
※長めのライン画像を使用する場合、自分で設定したエントリー部分の幅よりも短い画像でないと途中で切れてしまうので注意しましょう。
ファイルをココログにアップロードする
画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1：ファイルのアップロード』
を参照して下さい。
CSSを編集する
- 「ファイルのアップロード」の5.で表示されている画像の「ファイル名」をクリックしてページを開く。
※アップロードした画像が表示されたページが開くはずです。 - ブラウザのアドレスバーにそのページのurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。 - 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
※カスタムテンプレートの作り方は
■ 『第3回：カスタムテンプレートを作ってみよう』
を参照して下さい。 - 「編集」画面のCSS記述欄に
.content p.posted
{
background-image:url(●●●);/*区切り用画像アドレスの指定*/
background-repeat:no-repeat;/*画像の繰り返し（なし） */
padding-top:■px;/*画像挿入スペースの作成（上余白の設定） */
background-position:top center;/*画像の位置*/
}
の赤文字部分を全て半角英数で記述する。
※●●●には上記で保存した画像のURL、 ■には画像の高さに合わせて数値を入力して下さい。
（/*～*/で囲まれた部分は表示には影響しません。設定の内容を書いておくメモなどに活用できます。 この中は半角英数以外でもOKです） - 「変更を保存」ボタンを押す。
※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。 - 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
- 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
- 「すべてのファイルを反映しました」の画面に切り替わったら終了。
- イメージ通りに出来ているかどうか確認する。
以上です。
うまく出来ましたか？
- 「background-repeat」は画像の繰り返しを指定するプロパティです。
上記のCSSでは長めのラインを一つだけ表示するため、
「background-repeat:no-repeat;」
を記述して、画像の繰り返しは「なし」 に設定しました。
ここを
「background-repeat:repeat-x;」
と記述すれば、 横方向へ繰り返し表示されるので小さな画像を連続して表示することで繋がったラインのように表示することが出来ます。
例えば、前回サイドバーのタイトルに付けたアイコンを 「repeat-x」で並べてライン状にするとこんな感じ↓になります。
- 書いているときは気付きませんでしたがこの部分（.contrnt p posted）に画像を入れると、 記事だけでなくコメントのフッターにも同じ画像が付くようです。
コメントの区切り線としても使えますね。
【今回お世話になったサイト様、ブログ様です。 ありがとうございました。】
■「PRISM」様＜記事中のボタン素材＞
■「Simple Smile」 様＜ライン素材＞
| 固定リンク
コメント
こんにちは!!
こんなんしたいッッ!!と思ってこちらにお邪魔すると必ずその記事があって嬉しい限りです(^0^ゞ
というわけで、私も画像を入れてみました。。
これからも楽しみにしてますo(*^O^*)O
ありがとうございました!!
投稿： sacchi | 2006/02/27 13:07
回答していただいてどうもありがとうです。。
このようなページがあったのを今しってびっくりしました(ﾟωﾟ; 彡 ;ﾟωﾟ)
どんな世界にも達人がいるんですね(；・ω・)
色々研究させていただきます。。
投稿： ひろし | 2006/03/14 14:28
■ひろしさん
こんにちは。コメントありがとうございます。
「～広場」での回答、お役に立ったようでなによりです。
ココログフリーは無料だけあって多少制限はありますが、容量も大きいしCSSの編集も標準で出来るようになっていますので楽しめる部分も多いと思いますよ。
もし興味があったらテンプレートのデザインなど試してみて下さいね。
またのご訪問お待ちしています(^^)
投稿： tako→ひろしさん | 2006/03/14 22:58
度々こんにちは
今日は記事とﾌｯﾀｰの間に区切り線ってのを試してみましたが、又もや失敗に終わりました・・・ 質問があるのですが「ｶｽﾀﾑCSS編集」の欄に別で使ったCSSが入ってる場合に新たなCSSを書き込む場合には行数を何段ずらすべきなのでしょうか？ それとｱﾆﾒ画像をでも可能でしょうか？教えてください、お願いします。
投稿： Kay | 2006/06/13 08:53
■Kayさん
こんにちは。
＞新たなCSSを書き込む場合には行数を何段ずらすべきなのでしょうか？
（後で修正する場合など）見た目の判りやすさを考えた場合、ある程度改行があったほうが扱いやすいとは思います。
（私は1～2行改行してから書いています）
でも、特に決まりはありませんので、一つ一つの記述がきちんと完結していれば続けて書いても反映されるはずです。
ちなみに「改行」は普通に「Enter」キーで入れて大丈夫ですが、タグの中に「スペース」を入れる場合は必ず「半角スペース」を入れるようにして下さい。
「全角スペース」を入れるとその後ろのタグが反映しない場合があります。
＞ｱﾆﾒ画像をでも可能でしょうか？
可能です。
このブログの中では実際に使ってはいませんが、何度かテストはしていますので間違いないです。
アップロードと設置の方法も記事に書いたとおりにやっていただけば問題なく動画として表示されるはずです。
また何かあったらご連絡下さい。
頑張って下さいね。
投稿： tako→Kayさん | 2006/06/13 13:02
出来ません（￣□￣；）！！改行については分りました、ありがとうございます。ｽﾍﾟｰｽは半角でやっていましたのでそれは問題ない筈ですが。。。 なので勝手ながら前回Takoさんに教えて貰ったｱﾄﾞﾚｽの方にﾀｸﾞをｺﾋﾟﾍﾟして送らせて貰いました。なのでTakoさんの時間の取れる時に見て頂けますか？お願いします。 アニメ画像はもっと実力がついたら試してみたいと思います(^^;)
投稿： Ka | 2006/06/14 06:42
■Kayさん
こんにちは。
メール、拝見しました。
で、原因ですが、
background-image:url
(http://～);
上記の部分が「url」の後ろで改行されて2行になっているためです。
ここの改行をなくして1行にすれば反映されます。
プロパティ（上記なら「background-image」の部分）に対して値を指定する場合、全て終了するまで（セミコロン（;）を記入するまで）改行はしないでひとまとまりで記述して下さい。
※記述欄の幅が足らずに自動的に折り返されるのは、問題ありません。
※また、次の新しいプロパティを書くときは改行してOKです。
以上、試してみて下さい。
投稿： tako→Kayさん | 2006/06/14 07:02
おぉぉぉ 今その様に試してみたらTakoさん出来ましたよぉー♪
本当にありがとうございます！これで又何か他のことをカスタマイズできます(^^♪ Takoさんが居てくれて、丁寧に教えてくれて、私の様な者にも突き放さずに教えてくれて本当に助かってます！感謝してます！又何か問題が出てきたら（今度こそｽﾑｰｽに作業が進めばいいのですが・・・）その時は頼りにさせてください！！
投稿： Kay | 2006/06/15 00:18
■Kayさん
コメントありがとうございます。
成功のご連絡を頂けて私も嬉しいです(^^)
私もまだまだ勉強中で判らないことが多いですが、みなさんから質問を受けて「何でだろう？」と思うことが一番役に立っているように思います。
これからも少しずつ記事を増やしていきますので、また遊びに来て下さいね。
投稿： tako→Kayさん | 2006/06/16 00:01
こんばんは。
早速、試してみました。
そして無事、表示させる事が出来ました。
ありがとうございます。
この「記事とフッターの間に・・・」とありますが、これを記事ごと、あるいは日にちごとに画像を挿入する事は可能でしょうか？
実際、試してみないとどちらを保存するのかは解らないのですが、もし方法があるのなら教えて下さい。
投稿： tsuduku | 2007/03/01 21:31
■tsudukuさん
こんにちは。
わざわざこちらにもコメントありがとうございます。お役に立ったようで何よりです。
ご質問の件ですが、上記の設定では「記事ごと」にライン（画像）が入ります。
「日にちごと」というのは、例えば1日に複数の記事を書いたらその一番最後の記事とフッターの間にだけライン（画像）を表示させたいってことですよね？
これはその「日にちごと」を指定するCSSのセレクタが存在しないので（多分）、無理だと思います…。
※私も全てのセレクターを確認しているわけではありませんが、今まで見てきた中ではそれらしいものはなかったと思います。
ハッキリした回答でなくてゴメンナサイ。
何かの参考にでもなれば幸いです。
投稿： tako→tsudukuさん | 2007/03/01 22:31
再びこんにちは。
ごめんなさい、悩ませてしまって。
現状でいってみます。
投稿： tsuduku | 2007/03/02 13:16
■tsudukuさん
こんにちは。
＞ごめんなさい、悩ませてしまって。
いえいえ、こちらこそお役に立てず残念です。
ちょっと今忙しい時期なので、余裕が出来たら私も確認してみますね。
投稿： tako→tsudukuさん | 2007/03/02 23:37
大変お世話になっております kaoriでございます。
今度はこちらの記事に出現いたしましたとおり、ラインが表示されません。
皆様のコメントも拝見させていただき、自分にあてはめて見直しもいたしましたがお手上げです。
ラインの長さが１８３pxですので繰り返しの記述にしております。これが原因かと繰り返しなしにしてもやはり表示されず。高さは5pxです。
どうかお助けくださいませ。よろしくお願いいたします。
投稿： kaori | 2008/07/10 11:57
■Kaoriさん
こんにちは。
ご質問の件ですが、今回も原因は「CSSに記述してある折り畳みスクリプト」です。
私も何が影響しているのかはハッキリ判らないのですが、スクリプトの直後にあるCSSは無効になってしまうようです。
位置関係の問題のようですのでスクリプトの場所を移動するという手もありますが、それよりも（スクリプトを）CSSファイルから削除するほうが簡単・確実だと思います。
（前にも書いたようにスクリプトはここにあっても無意味ですし）
以上、試してみて下さい。
投稿： tako→Kaoriさん | 2008/07/10 20:21
takoさんこんばんは
ありがとうございました。
移動させましたら バッチリです。
何も知識のない者がやってみようと思うことに無理があるような気もしますが、こうしてできるとこの上ない喜びです。
今回もお手数をおかけいたしましてすみませんでした。
本当にお陰様です。
ありがとうございました。
余談ですがもうひとつのブログもとっても素敵ですね。
投稿： kaori | 2008/07/10 22:06
■Kaoriさん
こんにちは。
取りあえず、今回の問題は解決したようで何よりです。
ただ、スクリプトを移動しただけでは、今回区切り線は表示されたかもしれませんが、移動した場所の下にあるCSSはまた反映しない状況になっていると思うのですがそれは問題ないのでしょうか…？
先のコメントにも書いたように、スクリプトをCSSの中に残しておくことは害になることはあっても、益になることはないと思われますので削除されることをお薦めします。
投稿： tako→Kaoriさん | 2008/07/10 22:27
takoさん
お陰様できちんと反映されるブログになりました。
CSSの記述もいらぬものは削除いたしました。
ありがとうございました。
事あるごとにこちらにお邪魔させていただいております。
これからもこちらを参考にさせていただきながらブログを楽しんでいきたいと思っています。
本当にお陰様です。ありがとうございます。
投稿： kaori | 2008/08/13 17:09