« カスタマイズ・サンプル<No.1:sugar cube> | トップページ | よくある質問集 »

2006/04/22

第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう

記事表示列全体ではなく、個々の記事(エントリー)表示欄にそれぞれ背景画像を設定する方法です。
こんな(↓)感じで各エントリーの同じ場所に同じ画像が繰り返し表示されます。(クリックで拡大)

entry1



手順

事前準備:背景用の画像を準備する

背景用の画像を準備します。

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
※この部分は背景の上に文字が載りますので、文字の読みやすさを考えて背景画像を選択しましょう。
※また、記事表示欄よりも小さめで周囲に余白があるものを選択した方がいいと思います。(理由は「point」にて説明しています)

準備した画像はPC内の判りやすい場所に保存しておきます。

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

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

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
    ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回: カスタムテンプレートを作ってみよう』
    を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    .entry-body{
    background-image:url(●●●); /*背景画像の指定*/
    background-attachment:fixed; /*背景画像の固定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲; /*背景画像の位置指定*/
    }

    を記述する。
    ※漢字、かなで書いてある部分以外は全て半角英数で書いて下さい。
    ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
    ※プロパティを「.entry」で指定すると、 コメント部分で背景画像がダブって表示されてしまうようなのでここを「.entry-body」に変更しました。('06/05/07)
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • .entry部分は文字と表示スペースの間に余白が殆どない状態で設定されているので、 使用する画像は記事表示欄の幅よりも小さめなものを選択し上下左右に余裕がある状態で位置指定するときれいに表示できると思います。
  • どうしてもどこかの辺に接した状態で表示したい、または敷き詰めで表示したい、 という場合は下記のような記述で文章の周囲に余白を作ると見やすさ、読みやすさが向上すると思います。

    .entry-body{
    background-image:url(●●●);
    padding:10px 20px 0px 20px;
    margin:-10px -20px ;
    }

    上記は敷き詰めにした例です。一つの画像を固定にする場合は、「padding」と 「margin」の部分を前述のタグに追加してください。
    marginはマイナス指定にしてください。
    ※それぞれの数値はご自分のブログに合わせて調整して下さい。
    ※ちなみに上記の数値で適用すると、下記(↓)のような状態になります。(クリックで拡大)
    ※下記の画像は余白の状態が分かり易いように少々濃い色の背景素材を使用しています。

entry3


お世話になりました

■写真素材サイト 「ミントblue」 様<記事内に表示した写真をお借りしました>
■素材サイト 「web*citron」 様<参考画像内に使用した背景素材をお借りしました>
■素材サイト 「PRISM」様<記事内のボタン素材>


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


|

« カスタマイズ・サンプル<No.1:sugar cube> | トップページ | よくある質問集 »

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

エントリー部分」カテゴリの記事

背景」カテゴリの記事

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

コメント

takoさんこんにちは(^0^ゞ
コレずっと悩んでたんです(>▽<)
いつかこちらで記事に書いてくださると勝手に思って待ってました(笑)。。
そして今日拝見させてもらい、早速試してみました。
やっと(気持ちが)スッキリした感じです。
ありがとうございました(^0^ゞ

投稿: sacchi | 2006/04/28 10:04

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

画像を入れること自体はそんなに難しくなかったのですが、敷き詰めにしたときに余白を取らないとダメだなあと思っていたのでそれをどう表現しようかな~と思ってるうちに遅くなってしまいました^^;
お待たせしました。

早速使って頂けて嬉しいです。
これからも宜しくお願いします(^^)

投稿: tako→sacchiさん | 2006/04/29 23:34

背景なんとか入れられました。ありがとうございました!

入れ方とかバランスとか、まだまだなので、これから少しずつやっていきますね。takoさんのブログのようにすっきりさせたいです^^

投稿: 桜桃 | 2006/05/01 00:30

■桜桃さん
こんにちは。コメント&記事でのご紹介ありがとうございます。

「ivory」さんの素材はキレイだし色が抑えめで使い易いですよね。
桜桃さんのブログでも素材のバラと背景のピンクの組み合わせ、それと余白の使い方がきれいにまとまっていると思います。

また何か使えそうな小技がありましたらどんどん持って帰って下さいね。

投稿: tako→桜桃さん | 2006/05/02 00:25

■いかさん
こんにちは。
『みんなで解決!広場』に頂いた質問への回答です。

「続きを読む」の部分には、本文の「.entry-body」とは別に「.entry-more」というセレクターを持っているので、指定するセレクターをこれに変更すれば「続きを読む」部分に適用することは可能です。

但し、その場合はメインページの「続き」じゃない部分には背景は表示されません(多分)。

状態によってそれぞれセレクターが違ってくるので、
・メインページ(折り畳まれている状態)でも表示されて、
・「続き」を開いても表示される
といった、「全部合わせて一つ」になるデザインは難しいと思います。
(どちらのセレクターにも指定すると、「続き」を開いた場合は上下2つ表示されるはずです)

私は「続きを読む」は使っていないので自分でテスト出来ないため、これ以上詳しいことは判りかねます。
お役に立てずごめんなさい。

尚、改行については
「shift」キーと「Enter」キー
を一緒に押すと行間が詰まらない改行が出来ると思います。
試してみて下さい。

投稿: tako→いかさん | 2006/09/23 07:09

ご指導ありがとうございます。
すみません・・・・・本当はハンドルは「いか」じゃないんです。
恥ずかしくてURLを晒せません・・・・・

あのう、では「続きを読む」を表示しないで、
本文を長くして、その分写真を一枚大きいのを
表示させることはできるんでしょうか。
続きを読むを表示させない方法はありますか。
よろしくお願いいたします。

投稿: いか | 2006/09/23 08:24

■いかさん
(正しいお名前が不明なのでこのままで失礼します)

>本文を長くして、その分写真を一枚大きいのを
>表示させることはできるんでしょうか。

という設定を書いてあるのが上記のエントリーなのですが…。
(質問の意味を誤解してますか?だとしたらフォローお願いします)

文章の量によって画像が見えなくなる
ということについては、ご自分の書く記事の平均的な長さを把握した上で、それに見合った大きさ(縦の長さ)の画像を準備してください、としかいいようがないです。
文章の量によって画像の見え方が変わってしまうのは、このカスタマイズの場合仕方のないことだと思います。

>続きを読むを表示させない方法

記事を書くときに「続きを読む」部分を利用せずに全て「本文」部分に入力して保存すればOKです。
今まで書いた分については、一つ一つ記事を開いて「続き」から「本文」へ移動して保存、を繰り返す必要があります。

もし『「続き」には何も入力していないのに「続き」の文字が出てくる」状態ならば、
1.記事の編集画面にある「この編集画面の表示設定を変更する」を開く
2.「編集画面の表示設定」の中の「本文(続き)」に入っているチェックを外す
3.そのページの一番下の「保存」ボタンを押す
を実行してみてください。

投稿: tako→いかさん | 2006/09/23 12:06

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: 第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう:

« カスタマイズ・サンプル<No.1:sugar cube> | トップページ | よくある質問集 »