【みんビズ jimdoで画像を表示させる時の注意点】画像URLはシステム上、動的に変化します

jimdo

みんビズ、いじってますか？

私は・・・Facebookのウォールと連携させたりくらいですかね。というわけで、久々にみんビズの事を書きます。デザインと画像について。jimdoで用意されている魂のテンプレートと呼ばれるものが豊富にありますが、やはり皆様、独自レイアウトでホームページを作りたいとは思いませんか？私は思います。なぜなら、デザインは徹底的にこだわりたいからです。

そして、デザインの要の１つは画像ですね。というわけでjimdoで、画像を表示させる時の注意点を紹介します。この方法は、HTMLとスタイルシート（CSS）の知識が若干必要になります。あまり馴染みがない方にとっては、わからない語句が出てくるかもしれませんが、やってることは、「だた画像を表示させるだけ」なので、それほど難しく考えずに理解していただけることを願っています。

１．画像を表示させる方法は大きく分けて3パターン

jimdoで画像を表示させるには、大きく分けて3パターンあります。

  1. jimdoの機能で写真または写真付き文章を使って画像を表示させる
  2. 独自レイアウトのファイルからアップロードした画像を表示させる
  3. 別サーバにある画像ファイルを表示させる

この3パターンだと思います。

どれも画像を表示させることができますが、

  1. jimdoの機能で写真または写真付き文章を使って表示させる

こちらは注意することがあります。

写真または写真付き文章を使って表示させた画像は、そのボックス内でしか使えないURLを発行されている

ということです。毎度説明が下手ですみません・・・具体例を出します。まず、下のようにjimdoで写真、または写真付き文章を選びますよね。

ファイルを選択から選んでも、Dropboxから選んでもどちらでもいいです。画像を読み込みましょう。

下部のアドレスバーにご注目ください。

「u.jimdo.com/www42/o/・・・」ってなにやら複雑な文字列がいっぱい出ていますよね。

これはこの画像専用のアドレスという認識で大丈夫です。で、このアドレスがjimdo側のシステムによって動的に変化するということです。これは、システムなんでどうにもできないようです。

つまり、このURLをメモってHTMLの知識がある方が画像を表示させようとして、イメージタグなどを使用して画像を読み込むと画像へのリンク切れが起こります。これがどういうことにつながるのか。さらに例を出しますね。

例として、トップページにはスライドを表示したくて、別のページで使用した画像をスライドの1枚として使用したい。

スライドのスクリプトは巷には色々ありますが、最近ではjQueryのスライドが流行っていますよね。で、HTMLのイメージタグで、このURLを指定してスライドの１つとして表示させるとリンク切れを起こします。さきほども触れましたが、jimdo側でこのアドレスは自動的に変更されるからです。しかし、写真、または写真付き文章のボックスを使って表示させた画像についてはリンク切れを起こしませんでした。

でも・・・・これってデザインする人にとっては、相当制限されたデザインしかできないですよ。HTMLを表示するボックスで、ソースを書くことができるのに、画像は写真ボックスで読み込んだものしか表示できないってのは、ダメでしょう。ということで、HTMLとスタイルシート（css）で画像を表示します。

２．jimdoの「ウィジェット/HTML」にコードを書きましょう

こんな感じでやってみましょう。まず、jimdoの「ウィジェット/HTML」のボックスを追加して、下記のソースコードを貼り付けましょう。

HTML

 <div id="slider">
 <ul>
 <li class="slide01">
 <a href="https://www.imamura.biz/" target="_blank">WEBサイト</a>
 </li>
 <li class="slide02">
 <a href="https://www.imamura.biz/blog/" target="_blank">ブログ</a>
 </li>
 <li class="slide03">
 <a href="https://www.imamura.biz/" target="_blank">twitter</a>
 </li>
 </ul>
 </div>

３．jimdoに画像をアップロードしましょう

jimdoの管理画面から、画像を3枚アップロードします。たとえば、

  • slide01.png
  • slide02.png
  • slide03.png

の計3枚ををアップロードします。「レイアウト」→「独自レイアウト」→「ファイル」からアップロードしてください。

４．スタイルシート（CSS）を書きましょう

先ほどのhtmlに対してスタイルシート（css）を編集します。「レイアウト」→「独自レイアウト」→「css」を選んでください。で、cssの記述の最後部に以下を貼り付けてください。

CSS

 #slider .slide01,#slider .slide02,#slider .slide03{
 text-indent:-9999px;
 }
.slide01 a,.slide02 a,.slide03 a{
 display:block;
 height:240px;
 }
.slide01 a{
 background:url(slide01.png);
 }
.slide02 a{
 background:url(slide02.png);
 }
.slide03 a{
 background:url(slide03.png);
 }

これで表示できたと思います。微調整などは、続けてCSSでやったほうがいいでしょう。または、「ウィジェット/HTML」ボックス内のタグに「style」要素を追加してもいいでしょうね。どちらを選択されるかは、ご判断ください。（※今回はスライドのスクリプトの説明は割愛しました。画像の表示に焦点を絞らせていただいています。）

どうしてもスクリプトが気になる方は、http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider こちらのjQueryスクリプトを使うと設置できます。（※リンク先がなくなりました）

ただし、jimdoでjQueryを使用するにはコツが入ります。その紹介はまた次回いたします。HTMLのソースコードも、次回のｊQueryの記事にも関係しますので、あえてのリストタグの使用でした。

５．まとめ

jimdoをより活用するためには、デザインは必須だと思います。しかも、オリジナリティが必要だと思います。「肝心なのは情報だろ？」ってお思いの方もいらっしゃるでしょうが、内容を見てもらうために体裁を整えることは、当たり前のことですね。

「おもてなしの心を忘れずに」ってやつですね。自分にも言い聞かせていますが・・・精進します！また、例として採用しました表示は私のサイトやブログやtwitterへのリンクがされていますので、こちらは適宜変更ください。

以上、みんビズ関連のjimdoで画像を表示する時の注意点のご紹介でした。

  • jimdoで画像を表示できたけど、画像のリンクが切れて表示されなくなってしまった。
  • jimdoで独自レイアウトを使って、htmlとcssで画像を表示させたい。

という方にとって、少しでもご参考となりましたら幸いです。

著者:bouya Imamura