表(テーブル)の中に画像を挿入する方法

20160610_img_bill

はじめまして!新人デザイナーのオモトです。

本日は表(テーブル)に画像を挿入する方法ついてお話したいと思います。
テーブルパーツで表を作ったけれど、画像を挿入する方法がわからないという方のためのTipsです。
画像を挿入する際にHTMLを記述する必要があるため、HTMLがわからない方にとっては難しい内容になりますが、覚えると便利ですので、ぜひご活用下さい!

まずは下準備。画像をリソースエディタに登録!

リソースエディタを使えば、外部CSSやjsファイル、画像やムービー、サウンドファイル等、BiNDに搭載されていない機能やファイルをこのフォルダに格納する事で扱う事が可能になります。_userdataフォルダはユーザーが任意のファイルを保存する事が出来ます。なので私の所属するデザインチームも基本的にはBiNDの機能でページを作成しておりますが、どうしても特殊な表現が必要な場合は_userdataフォルダを用いて外部ファイルを使用しています。
※リソースエディタはBiND8以降に搭載されています。BiND8をベースに解説します。

【1】リソースエディタを開く

リソースエディターリソースエディタは、ウィンドウ左上、「メニュー」をクリックすると各メニューが現れますので上から二つ目のリソースエディタを押します。

すると、「設定に誤りがあった場合、サイトの編集ができなくなる可能性がございます。」という注意文言が表示されます。「編集できなくなる」という文章をみてドキッとされるかもしれませんが、ご理解いただいた上で勇気をもって「はい」をクリックして起動しましょう。

リソースエディターを起動

【2】リソースエディタに画像用の「フォルダ」を作成

「_userdata」フォルダが選択されていることを確認し、左下の「フォルダ作成」をクリック。

「フォルダ」とは、サイト編集に必要な画像やcssなどのデータを格納しておく、もの置きのようなところです。ここでは表(テーブル)に挿入する画像用のフォルダを制作します。

リソースエディタの管理画面
「_userdata」フォルダが選択されていることを確認し、左下の「フォルダ作成」をクリック。

リソースエディタのフォルダ作成

このとき、ファイル名は必ず半角英数字で入力してください。全角ですと、ブラウザによってはファイル名の部分が文字化けし、画像が表示されないなどのトラブルの原因になります。また、画像フォルダの名前は、画像群を意味する「images」が一般的です。

入力できましたら「OK」をクリックすると、_userdataフォルダ内に、ファイルが生成されます。

ここでアップロードしたファイルのブラウザ上のURLはサイトURL/_userdata/アップしたファイル名になります。画像がサイト上に上がっているか確認したいときは、このURLにリンクすると、確認することが出来ます。

【3】リソースエディタに画像ファイルを登録

次に、「フォルダ作成」の右隣にある「ファイル作成」ボタンをクリックしてください。リソースエディタのファイルアップロードファイルをアップロードを選択し、「参照」ボタンを押し、アップロードしたい画像を選択、適用してください。

私は、coffee.jpgという画像を登録しました。次に、この画像を使って、テーブルに画像を挿入する方法をご説明します。
リソースエディタのアップロードしたファイルのURL
赤枠の部分で、ファイルURLを確認することが出来ます。

テーブルパーツに画像を挿入

ここからが、山場です。HTMLを書くのは初めての方もいらっしゃるかと思いますが、頑張ってついてきてください!

【1】テーブルパーツを開く

テーブルパーツの編集画面を開いていただき、画像を挿入したいマス目(セル)に目印となる文章を入力。「HTMLソース」をクリック。

テーブルパーツのHTML編集ボタン

【2】スクロールして目印の文章まで移動

見慣れない英文がいっぱいあってびっくりされると思いますが、先ほど目印として入れた文章のところまで、スクロールしてください。

テーブルパーツのソースコード画面

見つかりましたでしょうか?目印の文章の左右に、英文があるかと思います。これは、

<td style=”background-color: #ffffff;”>ここに画像を入れたい。</td>

が、1つのマス目(セル)を表しています。

<td style=”background-color: #ffffff;”>がマス目(セル)始まり、</td>が終わりを表しています。その間に挟まれている文章や、画像がブラウザ上に表示されます。

【3】HTMLに目印の文章を、画像リンクに置き換える

目印の文章を、下記の文章に置き換えてください。

<img src=”[BD:path_userdata]images/coffee.jpg” width=”200″ height=”134″   alt=”コーヒーの写真” />

テーブルパーツソースコードのimgタグ

解説しますと、

<img はここからが画像だよと宣言する記述(※半角英数字)
src=”画像のアドレス” ””の中に画像へのアドレスを入れます。(※半角英数字)
width=”” ””の中に画像の横幅を入れます。(※半角英数字、省略可)
height=”” ””の中に画像の高さを入れます。(※半角英数字、省略可
alt=”” 画像のリンクが切れているときに代替えとして表示されるテキストです。コードを見る時に目印にもなりますので、画像固有の説明を入れます。
/>ここまでが画像だよという宣言です。(※半角英数字)

[BD:path_userdata]は、『BDタグ』と云われるBiNDの独自タグです。
[BD:path_userdata]を用いることで、_userdataフォルダへリンクを繋げることができます。
coffee.jpgの部分を、先ほどアップロードした画像の名前に置き換えてください。
入力できましたら、OKボタンを押して下さい。

テーブルパーツ画像は表示されないのが正しい

テーブルパーツはリアルタイムで表示されないので、「画像のリンクをみたけど画像がないよ?」と真っ白な枠と代替えテキストが表示されますが、これで大丈夫です。適用をクリック。
ブロックエディタに移ったらまた適用をクリックし、ウィンドウを閉じましょう。

【4】画像の設置完了

テーブルパーツに画像の設置完了

如何でしたでしょうか。
画像があるとよりわかりやすい表になりますので、ぜひご活用ください!