前回の続きです。
【サンプル画像】3枚と4枚の画像を横に並べ、画像をクリックすると横サイズ1000ピクセルのポップアップ画像が出るようにしました。
沢山の写真を大きなサイズで見てもらうときに使うと良いでしょう。
こんな場合は画像雛形を使うと便利です。
【画像雛形の設定】① 記事を書く画面を出します。画面右にある[画像雛形を適用]にチェックを入れ、[設定]をクリックします。
② 画像雛形設定画面が出ます。明度、横幅、枠線、テキスト(文字入れ)の設定が出来るようです。ここでは横幅の設定だけしてみましょう。[横幅]にチェックを入れ、横幅のレバーを最大の[1000ピクセル]にして、[設定を保存]をクリックします。
③ デジカメで撮った大きな画像も1000ピクセルに縮小されてアップロードされるよう設定されました。
④ 記事を書く画面を出し、更に画像が入っているフォルダーを出し、2つの画面が見えるようにします。
ここでは岩屋堂散歩道の写真フォルダーを開いています。表示方法を大きいアイコンにすると見やすいです。
写真フォルダの画像は 横サイズ:3264ピクセル、縦サイズ:2448ピクセル、データ-サイズ:1633~3110KBです。
[画像雛形を適用]にチェックを入れ、画像をドラッグしてドロップエリアで離します。
⑤ 1枚目の画像がアップロードされました。
右帯の画像表示エリアはサーバーにアップロードされた画像が時系列に表示されるところです。
画像表示エリアの左上隅に画像が表示されたらアップロード終了です。
注:画像処理に時間がかかる場合があります。表示されるまで待ちましょう。
続いて2枚目をドラッグしてアップロードします。
⑥ 2枚目がアップロードされました。
3枚目~14枚目も同じようにしてアップロードします。
⑦ 14枚目がアップロードされました。
⑧ 次は本文への挿入です。
まずは1枚目の岩屋堂散歩道の入口の写真を挿入しましょう。
1枚目の画像は2ページに入っているので[2]をクリックします。
⑨ 1枚目の画像が出てきたら、クリックすると、本文に画像タグが挿入されます。
⑩ 14枚の画像をアップロードしましたが、そのうち好みの7枚だけアップロードしました。画像タグが連続して挿入されています。
雛形の通り、すべて配置:mid(中央)、横サイズ:1000ピクセル、縦サイズ:750ピクセルとなっていることを確認します。
⑪ この状態でプレビューを見ると、すべての画像が横サイズ:520ピクセルで表示されています。
注:最大画像サイズ(520ピクセル)に自動的に縮小されて表示されます。
⑫ 画像タグのすべての配置を[left]に書き換えます。
⑬ 画像タグのサイズは次の値に書き換えます。
【3枚並び】
1枚目:横サイズ:166ピクセル、縦サイズ:125ピクセル
2枚目、3枚目:横サイズ:167ピクセル、縦サイズ:125ピクセル
【4枚並び】
4枚目、5枚目:横サイズ:122ピクセル、縦サイズ:92ピクセル
6枚目、7枚目:横サイズ:123ピクセル、縦サイズ:92ピクセル
⑭ 3枚目と7枚目の画像タグの後ろに改行タグを挿入します。
⑮ 画像タグは次のようになりましたら、プレビューしてみます。
⑯ サンプル画像と同じになりました。一つの画像をクリックします。
⑰ 大きな画像(横サイズ:1000ピクセル)のポップアップ画面が出てきます。
注:プレビュー画面も通常の表示になり、クリックも効くようになりました。
【画像管理】記事を書く画面にある右帯の機能は画像管理画面にもあります。
過去にアップロードされた画像が管理されているので大変便利です。
画像管理画面には画像削除機能もあります。
アップロードされた画像をダウンロードしてパソコンのフォルダーに保存することができますので、画像のバックアップとしても使えそうです。
まだまだ、検証したいことがありますが、取り敢えずこのテーマは終了します。