第36回：記事内に挿入した写真にキャプション（説明文）をつけてみよう

先日『みんなで解決！広場』で「写真にキャプションが付けたい」という質問を見て検索した結果、「All About」の下記の記事を見つけました。

■キャプション付き画像を左右の端に寄せたい

アドレスをつけて回答したのですが「よく判らなかった」という返事が返ってきてしまったので、僭越ながら内容をココログ用にアレンジしてみました。
※以下の内容は、AllAbout掲載の該当記事を全面的に参考にさせて頂きました。ありがとうございました。

*江戸東京博物館内「モダン亭」にて*

実際にCSSを適用すると、こんな感じで画像の下にキャプションが表示されます。
CSSで文章の回り込みを右（または左）に設定するので、画像の後ろにキャプション以外の文章を記述すると画像の横に表示されます。

CSSを編集する

1. 「管理ページトップ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
   ※カスタムテンプレートの作り方は
   ■第3回： カスタムテンプレートを作ってみよう
   を参照して下さい。
2. 「編集」画面のCSS記述欄に
   
   div.imagebox {
      float: right;/*画像の配置場所*/
      font-size: 80%;/*キャプションの文字サイズ*/
      color: gray;/*キャプションの文字色*/
   }
   
   を全て半角英数で記述する。
   ※上記のCSSは全て「All About」 に記載してあるタグのコピーです。
3. 「変更を保存」ボタンを押す。
4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります。

記事に画像を挿入する

記事欄への画像の挿入方法は
■基本3： 記事欄への画像の挿入
を参照して下さい。
※この際に、＜2.画像オプション＞→＜カスタム設定＞にて「テキストの回り込み」を『指定なし』（チェックを外す）にして下さい。
※上記で設定したCSSで既に回り込みが設定されているためです。

画像タグにCSSを呼び出す記述を追加する

1. （「リッチテキストモード」の場合）「HTMLの編集」画面に切り替える。
   ※「プレーンテキストモード」の場合はそのままでOKです。
2. 画面に
   
   <img alt="画像の名前" title="画像の名前" src="画像のアドレス" border="0"  />
   
   ※「カスタム設定」でサムネイルやポップアップを設定した場合はもっと複雑なタグが記入されます。
   というようなタグが表示されるので、上記のタグを
   
   <div class="imagebox">～</div>
   
   で囲む。
3. 更に、最後の</div>の前にキャプションとなる文章を前後に<br />を付けて記述する。
   ※つまり、上の画像タグの場合だったら、
   
   <div class="imagebox">
   <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0"  />
   <br />キャプション<br />
   </div>
   
   になります。
4. 記事が書き終わったら「保存」ボタンを押す。
5. ブログを表示してイメージ通りに出来ているかどうか確認する。
   
   以上です。
   上手くできましたか？

• 「カスタムCSS」内に記述するCSSのそれぞれのプロパティの値（上記では「right」「80%」「gray」） は自分の好きなようにアレンジして下さい。
  ここではそれぞれ「left」「small」「orange」にしてあります。
  ※色はいつものようにカラーコード（#●●●●●●）で指定してもOKです。
• キャプションの文章が長くなる場合は、画像の幅に合わせて適当なところで改行（<br />）を入れて下さい。
• 画像横の文章の回り込みを解除する場合は、解除したい場所（文章やタグの最後）に
  
  <br style="clear:both;" />
  
  を記述して下さい。

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

---

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

---

カスタマイズ・サンプル＜No.5：sewing＞

秋っぽくなってきたので、暖色系のデザインに変えてみました。
「金魚」はやはり短命（？）に終わってしまいました…変えるタイミングが悪かったですね^^;

今回のデザインも（ご覧頂ければ判るとおり）CSSは特に新しいことはしていません。
今まで記事に書いたことを組み合わせているだけです。
変わったように見えているとしたら、それは全て素材の力です。

私の場合、ブログをカスタマイズするときに一番時間を掛けるのは「素材を探す」ことです。
ココログはプロプラン以外ではHTMLが変更できないので、ブログの構成を劇的に変えることは出来ません。
そのため何度かデザインを変更していくうちに素材を使う場所や使い方がある程度決まってきてしまいます。
（実際、CSSについては前回使ったものをコピーして素材と色の部分を書き換えたら殆ど終わりです（笑））
そうなったときに（他のブログと、または以前の自分のデザインと）差を出すために一番手っ取り早いのは、素材にこだわることじゃないかな、と思います。

私は出来るだけデザインを統一したイメージにしたいので、素材のなかでもセット素材を重点的に見ていきます。
欲しいのは壁紙とタイトル用のアイコン（大小）、それに区切り線用のライン。
その他、タイトル部分に入れるイラストやパーツが何かあれば言うことなし！です。

もちろん別々の素材サイトさんから単品でお借りして組み合わせることもありますが、素材は「作品」なのでやはりその作者さんの個性がすごく強く出ているんですよね。
同じようなイメージの素材なのに組み合わせてみたらちょっとぶつかってしまう…なんていうこともけっこうあります。
なのでもしセットではなく単品を使う場合も、出来る限り同じ素材サイトさんのものを使うようにしています。

で、今回の素材は、まず「WEB MAGIC」 様のセット素材のなかに秋のイメージにあった色合いの素材を見つけたので壁紙、アイコン、ラインをお借りして、まずこれでデザイン。
確認してみたところそれだけだとタイトル部分がちょっと白すぎて寂しかったので、壁紙と同系色のリボンが入った写真を「ミントBlue」様よりお借りしました。
この写真があるのとないのでは、随分印象が変わります。
（今回はたまたまイメージにピッタリの素材が見つかってラッキーでした♪この写真がなければ、このデザインはお蔵入りになっていたかもしれません…^^;）

あとは、スクロールバーやリンクなど色指定の部分を素材の色と同系色に変更して完了です。
これからの季節に合った落ち着いたデザインになったと思いますがいかがでしょうか。

各パーツのカスタマイズの詳細については 「記事一覧」のページからそれぞれ過去記事に飛んでみて下さい。

■「WEB MAGIC」様
■「ミントBlue」様
■「IMAGE」様
■素材サイト 「PRISM」様＜記 事内のボタン素材＞

---

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

---

第35回：サブタイトル部分に簡易メニューを付けてみよう

KOROPPYさんのブログを参考に、任意の記事にジャンプする（させる）ための簡易メニューをサブタイトル部分に付けてみました。

参考にさせていただ いたのは以下のエントリーです。
■KOROPPYの本棚様： 「メニューをつけてみました」 / 「サブタイトルの表示をアレンジ」
ありがとうございました♪

KOROPPYさんは画像（バナー）にご自分で文字入れをしたものを使っていらっしゃいますが、私はサブタイトル部分にはリンク用のタグだけを入れてそのリンクをCSSで装飾する方法をとりました。
処理方法は以下の通りです。

リンク用のHTMLタグ、及びCSSタグを準備する

サブタイトル部分の変更は、反映前に「確認」することが出来ません。
保存するとそのまま（少なくともトップページには）反映してしまうので変更する場合は、事前準備をしっかりしておく必要があります。

〈HTMLタグ〉
リンク先を指定するタグです。

1. リンク用のHTMLを「メモ帳」などに記述する。
   
   <a href="●●●">■■■</a>
   ※●●●=リンク先のアドレス、■■■=サブタイトル欄に表示する文字列を代入
   
   ※いくつ書いても大丈夫ですがタイトル表示部分の幅を考えて並べて下さい。
   ※折り返す場合は<br />タグを間に入れましょう。
2. 記述したHTMLを
   
   <div class="menu">
   と
   </div>
   
   で挟む。
   ※下記のCSSを適用するためのクラスをここで指定します。
   ※上記の例でいくと
   
   <div class="menu">
   <a href="●●●">■■■</a>
   </div>
   
   となります。
   ※CSSを適用しない場合は、この<div>タグは不要です。

〈CSSタグ〉
上記のHTMLを装飾するためのタグです。

1. リンク装飾用のCSSタグを「メモ帳」などに記述する。
   ※セレクタはそれぞれ下記のような形で指定します。
   
   /*未訪問*/
   #banner h2 div.menu a:link{～}
   
   /*訪問済み*/
   #banner h2 div.menu a:visited{～}
   
   /*マウスでポイントしたとき*/
   #banner h2 div.menu a:hover{～}
   
   ※{～}内の要素はそれぞれ好きなように記述して下さい。
   ※私は以前
   ■第28回： リンクの装飾を設定してみよう
   でサンプルに使った「枠線を付けてボタン風に表示」のスタイルを使ってみました。

サブタイトル欄にHTMLタグを入力する

1. ［管理ページトップ］→［ブログ］タブ→［設定］→［基本設定］画面を開く。
2. 上記で書き出した〈HTMLタグ〉を全文コピーして、「ブログのサブタイトル（キャッチフレーズ）」欄に入力する。
3. 画面一番下の「変更を保存」ボタンを押す。
   ※保存が終了すると、
   『設定変更の内容を保存しました。変更をサイトに反映させるには、サイトへの反映が必要です。』
   の文章と「サイトに反映」ボタンが表示されますが、ここでは反映せずに次の作業に移ります。
   ※CSSの適用が不要な場合は、ここで「反映」してしまって構いません。

カスタムCSSにCSSタグを入力する

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

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

• KOROPPYさんのように画像（バナー）を使ってリンクを張る場合はCSSは不要です。
  サブタイトル欄にHTMLタグのみを入力して、「保存」→「反映」させて下さい。
• この方法ならどのページから入ってもリンクが見えますので「目次」や「ブログポリシー」「注目記事」 など読んで欲しい記事へのリンクの他、別ブログ、掲示板への誘導など工夫次第でいろいろと便利に使えると思います。
  試してみて下さい。

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

---

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

---