もうお気づきの方も多いと思いますが、
先日画像の表示方法を変更するプログラムを導入しました。
単純に画像をカッチョよく表示するだけではなく、ちょっとした便利機能なんかもありますので、
ここでその使い方をご紹介したいと思います。
◎プログラムの適用方法
まず、いつも通り左のメニューから「ファイルのアップロード」を選んでください。
続いてアップしたい画像を選んで、「アップロード」ボタンを押してください。
ここまでは今までと同じですね。
まず「この画像のサムネイルを作る」にチェックを入れてください。
その際表示する画像のサイズですが、ここではなるべく小さめにすると吉です。
だいたい200〜300ピクセルにするとほどよい大きさかと。
もちろん「縦横比を固定する」はチェックしてください。
次が一番大事なところで、必ず「埋め込み」を選んでください。
「ポップアップ」にすると新しいウィンドウを作って表示してしまうため、
プログラムが適用されなくなってしまいます。
ここも今まで同様表示されたHTMLをコピーしてエントリー内に貼り付けてください。
これで完了です。確認してみてください。画面が暗くなり記事の上に画像が表示されるようになりました。
◎応用編
●画像のグループ化
複数の画像をグループ化することにより、
スライドショーのように次々と閲覧していくことができます。
下の3つの画像はグループ化してあります。写真の上でクリックすると次（前）の画像へ移ります。
実際の適用方法ですが、さきほど貼り付けたHTMLコードに赤字の部分を追加します。
（ブログ名、画像名、サイズは各自異なります）。「rel」の前に半角空きを入れてください。
<a href="http://signal-jp.com/blog/ブログ名/画像名.jpg" rel="lightbox[01]">
<img alt="画像名.jpg" src="http://signal-jp.com/blog/ブログ名/画像名-thumb.jpg" width="112" height="200" />
</a>
[01]がグループ名となり、同じグループ名を付けた画像同士をグループ化できます。
グループ名には好きな文字を入れることができますが、半角英数字のみ有効です。
●画像のキャプション
最後に画像ごとにキャプションを入れる方法です。
先ほどのHTMLコードに青地を追加してください。「title」の前に半角空きを入れてください。
<a href="http://signal-jp.com/blog/ブログ名/画像名.jpg" rel="lightbox[01]" title="タイの写真">
<img alt="画像名.jpg" src="http://signal-jp.com/blog/ブログ名/画像名-thumb.jpg" width="112" height="200" />
</a>
先ほどの3つの画像にキャプションを入れてみました。
いかがですか？うまくできましたでしょうか？？
うまくいかない場合は以下に気を付けてもう一度見直してみましょう。
・「埋め込み」にしていない。「ポップアップ」はNG
・「rel、title」などのスペルミス
・グループ名などが半角英数字ではない
初めてHTMLを触る方には多少難しいかもしれませんが、
気楽にチャレンジしてみましょう！！
不明な箇所あればどしどしコメントしてください。
ではー(･ω･)ﾉﾞ
