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

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

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

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

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
※この部分は背景の上に文字が載りますので、文字の読みやすさを考えて背景画像を選択しましょう。
※また、記事表示欄よりも小さめで周囲に余白があるものを選択した方がいいと思います。（理由は「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はマイナス指定にしてください。
  ※それぞれの数値はご自分のブログに合わせて調整して下さい。
  ※ちなみに上記の数値で適用すると、下記（↓）のような状態になります。（クリックで拡大）
  ※下記の画像は余白の状態が分かり易いように少々濃い色の背景素材を使用しています。

• padding、marginについての詳しい説明は下記を参照して下さい。
  ■「TAG index」 様内 『ボックスのパディング （内側の余白）を指定する』
  ■「TAG index」様内 『ボックスのマージン（外側の余白）を指定する』

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

---

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

---

第22回：本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉

前回に引き続き「背景画像が透けるように表示してみよう」シリーズの第2弾です。
今回は一番下の「body」部分に入れた背景が全体に透けるように設定してみましょう。
…と言っても基本的には前回の考え方と同じですが（笑）
下記の画像は以前、別ブログ（ココログ）で使っていたデザインです。 
※バナーの部分は別に作成しています。

この方法だと大きな画像をそのまま利用できて、サイドバーやバナーの区切りが全くなくなるので背景画像を変えるだけでブログの見た目が一気に変えられます。

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

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

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

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

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

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

CSSを編集する

1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
   ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
3. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
   ※カスタムテンプレートの作り方は 『第3回：カスタムテンプレートを作ってみよう』を参照して下さい。
4. 「編集」画面のCSS記述欄に
   
   /*バナー、本文、サイドバーの透明化*/
   
   #banner,#container,.content,#right,#left
   {
   background-color:transparent; /*指定エリアの透明化*/
   }
   
   /*背景画像の設定*/
   
   body
   {
   background-image:url(●●●); /*背景画像の指定*/
   background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
   background-attachment:fixed; /*背景画像のスクロール：なし*/
   background-position:■ ●; /*背景画像の表示位置*/
   }
   
   を全て半角英数で記述する。
   ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
   ※画像の位置指定については下記のページを参考にして下さい。
   ■「TAG index」様内 『背景画像の表示位置を指定する』
5. 「変更を保存」ボタンを押す。
   ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
9. イメージ通りに出来ているかどうか確認する。

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

• background-color:transparent;
  の 「transparent」は背景色を透明にする値です。
  カラーコードではないので「#」は不要です。
• background-repeat:no-repeat;
  は、 画像を繰り返さない（＝一つだけ）表示する、ことを指定しています。
  その他の表示方法（繰り返し、敷き詰めなど）については下記のページを参照して下さい。
  ■「TAGindex」様内 『背景画像の並び方を指定する』
• background-attachment:fixed;
  は、背景画像を固定する（＝スクロールで動かさない）ことを指定しています。
  スクロールさせる場合はこの行を削除して下さい。
• 今回の指定箇所は必ず文字が上に載ります。
  それを考慮して背景画像は文字の邪魔にならないものを選びましょう。
  私はお借りした素材をソフトを使って少し薄くなるように加工しています。
  ※素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

■素材サイト 「PRISM」様＜記事内のボタン素材＞

---

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

---

第21回：本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉

今回はエントリー部分やサイドバーの下に画像が透けて見えるように背景を設定する方法です。
※クリックで拡大

具体的な設定方法の前に、まずココログのレイアウト構造を簡単に説明します。
ココログのレイアウト構造を簡単に図にすると、下記のようになります。
※クリックで拡大

一番外側の黒枠内が「body」
その内側の赤枠内が「#container」
タイトルが表示されている部分（オレンジ）が「#banner」
左サイドバー（青）が「#left」
右サイドバー（緑）が「#right」
エントリー部分（紫）が「#center」
という要素でスタイルが決定されています。
（実際には、このほかにもたくさんの要素がそれぞれの部分に設定されています）

そして、重なり順は下から上に
【A】「body」
【B】「#container」
【C】「#banner」「#left」「#right」「#center」
となっています。

つまり、【C】の色（背景）を消すことでそこに【B】の背景を表示出来、
【C】＋【B】の色（背景）を消すことでそこに【A】の背景を表示することが出来る、ということです。
※但し「#center」部分の色は、その下の「.content」で指定されているためここの色（背景）を消すことになります。

今回は【B】に置いた画像を表示するためにその上にある【C】の部分を透明化する、ということになります。

※【A】に画像を置いて、【B】【C】を透明化する方法については次の記事
■第22回： 本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉
にて説明しています。

さて、ここまで判った上で設定方法の説明です。

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

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

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

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

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

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

CSSを編集する

1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
   ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
3. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
   ※カスタムテンプレートの作り方は 『第3回： カスタムテンプレートを作ってみよう』を参照して下さい。
4. 「編集」画面のCSS記述欄に
   
   /*バナー、本文、サイドバーの透明化*/
   
   #banner,.content,#right,#left
   {
   background-color:transparent; /*指定範囲の透明化*/
   }
   
   /*背景画像の設定*/
   
   #container
   {
   background-image:url(●●●); /*背景画像の指定*/
   background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
   background-position:■ ●; /*背景画像の位置*/
   }
   
   を記述する。
   ※漢字、かなで書いてある部分以外は全て半角英数で書いて下さい。
   ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
   ※画像の位置指定については下記のページを参考にして下さい。
   ■「TAG index」様内 『背景画像の表示位置を指定する』
5. 「変更を保存」ボタンを押す。
   ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
9. イメージ通りに出来ているかどうか確認する。

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

• background-color:transparent;
  の「transparent」は背景色を透明にする値です。
  カラーコードではないので「#」は不要です。
• background-repeat:no-repeat;
  は、 画像を繰り返さない （＝一つだけ）表示する、ことを指定しています。
  その他の表示方法（繰り返し、敷き詰めなど）については下記のページを参照して下さい。
  ■「TAGindex」様内 『背景画像の並び方を指定する』
  ※画像を敷き詰める場合は、「background-position」 の指定は不要です。
• 今回の指定箇所は文字が上に載る可能性があります。
  背景画像は文字とのバランスを考えて文字の邪魔にならないものを選びましょう。
  私はお借りした素材をソフトを使って少し薄くなるように加工しています。
  ※素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

■素材サイト「NOION」 様
■素材サイト 「PRISM」 様＜記事内のボタン素材＞

---

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

---

第6回：背景に画像を表示してみよう

前回は背景（body）に色を付けましたが、今回はここにお好みの画像を表示してみましょう。

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

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

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

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

画像をココログにアップロードする

1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
2. 「新規ファイルのアップロード」の「参照」ボタンを押す
3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル（画像）を選択し「開く」ボタンを押す
4. 「アップロード」ボタンを押す
   ※ファイル名が半角英数でない場合、ここで「不正なファイル名です。 半角英数字のみのファイル名に修正したうえでアップロードしなおしてください。」と表示が出てアップロード出来ません。 ファイル名を半角英数に修正してやり直して下さい。
5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
   ※ここまでで画像のアップロードは完了です。

CSSを編集する

1. 上記の5.で表示されている画像のリンクを開く。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
3. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。
   ※CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
   ※カスタムテンプレートの作り方は下記の記事を参照して下さい。
   ■第3回： カスタムテンプレートを作ってみよう
4. 「編集」画面のCSS記述欄に
   
   body{background-image : url(●●●)  }
   
   を全て半角英数で記述する。
   ※●●●には上記で保存した画像のURLを入力する。
5. 「変更を保存」ボタンを押す。
   ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
9. イメージ通りに出来ているかどうか確認する。

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

私は素材サイト 「Simple Life」さんでお借りしたグリーンのタイル柄にしてみました。

• background-imageは背景画像を指定するプロパティです。
  ここに画像の保存先urlを値として指定することで背景画像を表示します。
  urlは半角のカッコ( )で挟んで下さい。

【今回お世話になったサイト様です。ありがとうございました】

■「SimpleLife」 様　背景用の画像を頂きました。
■「PRISM」 様　記事中のボタン素材を頂きました。

---

＜関連記事＞
■第5回： 背景の色を変えてみよう

---

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

---

第5回：背景の色を変えてみよう

タイトル、サイドバー、記事本文の部分はデザインの「スタイル」で変更できますが、その周囲「背景」部分の設定は出来ません。
ここでいよいよ「CSS」の登場です。

今回はCSSを使って背景に色を付けてみましょう。

1. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。
   ※CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
   ※カスタムテンプレートの作り方は下記の記事を参照して下さい。
   ■第3回： カスタムテンプレートを作ってみよう
2. 「編集」画面のCSS記述欄に
   
   body{background-color :  #●●●●●●; }
   
   を全て半角英数で記述する。
   ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
   ※カラーコードについては こちらを参照して下さい。
3. 「変更を保存」ボタンを押す。
   ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
7. イメージ通りに出来ているかどうか確認する。

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

私の場合はタイトル画像の菜の花に合わせて淡いグリーンを選んでみました。

• CSSを記述するときは、必ず下記のような書き方になります。
  
  セレクタ { プロパティ　: 値 }
  
  セレクタで適用する場所、 プロパティでスタイル、 値で具体的な形を指定します。
  全て半角英数での記述になります。
  プロパティと値の間には必ずコロン（ : ）が入りますので忘れずに。
• bodyはブログの表示範囲全体を表す要素（セレクタ）です。
  このbody部分に色や画像を設定すると、その色や画像が背景として表示されます。
• background-colorは背景色を指定するプロパティです。
  ここにカラーコードで値を指定することで背景色を変更します。

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。

---

＜関連記事＞
■第6回： 背景に画像を表示してみよう

---

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

---