[Tips]画像をかっこよく表示したい。詳細
今回のテーマ「画像をかっこよく表示する」
今回は、アメブロで画像をかっこよく表示するために、
Lightbox 2
を利用しようと思います。
Lightbox 2の元サイトは、こちら
どういうツールかというのは、
このサイトのExampleに表示されている画像ををクリックしてみれば、
一目瞭然かと思います。
サイトが、英語表示になっていますが、大丈夫です。
怖気づかないでがんばりましょう。
ではでは、スタートです。
記事内の画像をクリックしてみてください。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
注意
今回の方法では、Lightbox 2（ファイル）をhttpアクセスできる場所に、
アップロードしなければなりません。自身でレンタルサーバー等に契約されていない方は、
使用できません。それでも、どうしても、どうしても利用したい方、メッセージをください。
ご相談に乗ります。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
ステップ１
ツールをダウンロードします。
まずは、Lightbox 2のサイト を表示してください。
表示したら、右に表示されているメニューから
「DownLoad」を選んでください。
つづいて、赤枠で囲まれているところをクリックすると
ファイルをダウンロードできます。
ステップ２
ツールを展開する。
ＺＩＰ形式で圧縮されていますので、解凍してください。
※ＸＰの方は、ファイルを右クリックして、「すべて展開」で解凍できます。
ステップ３
解凍されたファイルをHttpアクセスできる場所にアップする。
解凍したファイルをフォルダごとHttpアクセスできる場所にアップしてください。
ステップ４
アメブロにスクリプトを読み込むように記述する。
少し前まで、アメブロではJavaScriptが一切使用できなかったため
このような外部ツール使用することが、できなかったのですが、
「サイドバーの設定」メニュー＞サイドバーの設定内にあるフリープラグイン内でのみ
JavaScriptの記述が許可されるようになりました。
このスペースを利用します。
このスペース内に、以下の３行を追加します。
場所は、どこでもいいです。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
赤字の場所は、個人の設定により変化します。
Ｈttpアクセスできる場所に置いた各jsファイル(拡張子が.js)
にアクセスできるＵＲＬに変更してください。
たとえば、
自分が持っている（借りている）ドメインがhttp://www.kakkoyokuhyouji.co.jp
だとしましょう。
そして、ファイルを置いた場所が、
http://www.kakkoyokuhyouji.co.jp/lightbox2.03.2/
だとすると、以下のように修正します。
<script type="text/javascript" src="http://www.kakkoyokuhyouji.co.jp/lightbox2.03.2/js/prototype.js"></script>
<script type="text/javascript" src="http://www.kakkoyokuhyouji.co.jp/lightbox2.03.2/js/scriptaculous.js?load=effects">
</script>
<script type="text/javascript" src="http://www.kakkoyokuhyouji.co.jp/lightbox2.03.2/js/lightbox.js"></script>
ステップ５
アップしたファイルを修正
後戻りとなりますが、実は先程アップしたファイルの一部を修正
しなければなりません。
jsフォルダ内にあるlightbox.jsを２行だけ修正します。
下記行（６４、６５行目）の赤文字の場所を探し、修正します。
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
ここも、先程と同じように、loading.gifとcloselabel.gifファイルにアクセスできるように
URLを記述します。
これで、配置は、完了です。
ファイナルステップ
記事を書き、画像を張り、最後にひと仕事します。
ただ画像を張っただけだと、Lightbox 2は発動しないようになっています。
ここで、最後にひと仕事します。
ＨＴＭＬタグを表示をクリックしてＨＴＭLソースを表示してください。
画像を張り付けると、<a>タグと<img>タグが下記のように生成されますが、
<a href="http://stat.ameba.jp/user_images/f2/3a/10021951819.jpg
" target="_blank">
<img height="365" src="http://stat.ameba.jp/user_images/f2/3a/10021951819_s.jpg
" width="220" border="0" />
</a>
この<a>タグに、rel="lightbox"を追加してください。
<a href="http://stat.ameba.jp/user_images/f2/3a/10021951819.jpg " rel="lightbox" target="_blank">
これで、rel="lightbox"を追加した画像のみが、かっこよく表示されるようになります。
わからないことがありましたら、コメントやメッセージをください。
それでは、みなさんがんばってください！！！