画像倉庫をつくって画像を使い回す

一つの画像を何度も表示したいことがあります。

見出し画像や水平線の代わりにセパレータとして使う画像などです。

 

また、画像に対してjQueryで動きを与えたりCSSで装飾する場合にも、一度画像をアップしておいて、その画像を<img>タグで指定する方法が便利です。

 

これらを実現する画像倉庫のページを追加しましょう。

 

まず、ナビゲーションのメニューに「画像倉庫」にするページを追加して、非表示にします。

ちょっとだけ作業が面倒になりますが、作業中の状態を公開したくないので、早めに非表示にしておいた方がよいと思います。

 

次に「新規項目を追加」→「写真付き文章」を選択し、画像をアップロードします。

 

一旦保存して、「プレビュー」状態にします。

 

 

 

アップロードした画像を右クリックしてプロパティを選択します。

 

 

プロパティ画面のアドレス(URL)に画像のアドレスが表示されますので、これをコピーします。

 

コピーした状態のまま、「プレビュー」から再び「編集」に戻します。

 

 

先ほど画像を配置した「写真と文章」の「文章を編集」を開き、URLを記述します。

このとき、<img>タグとして記述しておくと、後で使いまわすときに楽になります。

代替文字列である"alt"も書いておきましょう。

 

使うときは「ウィジェット/HTML」に、先ほど書いた<img>タグの内容をコピペします。

「独自レイアウト」の「HTML」で使用することもできます。

 

この要領でどんどん画像を追加しましょう。