2004.02.10現在、jimdo側がdivタグのクラス名を変えたらしく以下の記事は無用ノ物となりました。調べて変えようかと思ったのですがまた変えられたとしたらそんなイタチごっこを続ける気もなく、jimdoではテンプレートをそのまま使ったほうが無難ですよという教訓を残したのでした。
ニッチなことを書く。
どれくらいニッチかというと、そうですね、「すき間家具を入れてできたすき間をなんとかしたい」というくらいのものではないでしょうか。
なんのことかというと「Jimdoでレスポンシブなデザインを取り入れてはみたものの画像が対応してくれないよ、どうしよう」という人に向けた投稿をしようという試みである。
いないと思う。
だいたいJimdoはスマートフォン用のテンプレートも用意されているしあえてそんな手間暇をかけてレスポンシブですか、そもそもそれなんですか？ってなものでそんなことにあーでもないこーでもないと悩む人など、私だ。ひとりいた。もうひとりくらいはいるかもしれないのでその人に向けての投稿だ。
あえてレスポンシブとかJimdoとかの説明はしない。だって読者は「Jimdoでレスポンシブなデザインを取り入れてはみたものの画像が対応してくれないよ、どうしよう」と困っている人だからだ。
Jimdoの独自テンプレートでレスポンシブを取り入れることは簡単である。 どこかでレスポンシブデザインのテンプレートを見つけてきて思い思いのところにナビゲーションなら<var>navigation[1|2|3]</var>、例の広告がもれなくついてくるサイドバーは<var>sidebar</var>、メインの部分は<var>content</var>などを組み込めばよいだけだ。
これでレスポンシブの完成であるが、画像はそうはいかない。 Jimdoの既存のcssでoverflow:hidden;が効いているらしく大乱れはしないものの右から画像が切れていって、これではレスポンシブも台無しである。
しかしレスポンシブレスポンシブうるさいな。
レスポンシブのテンプレートならだいたいクラス名を画像につければ .hoge{width:100%;height:auto;} などcssの魔法の言葉でコンテンツ幅にあわせて拡大縮小してくれるものだがJimdoでは挿入した画像に対してクラス名を付けることができない。ならばとソースを確かめて画像の親要素のクラス名プラスimgで先程のcssを適用させようとしたがうまくいかぬ。
ならばと私は考えましたね。
困ったときのjQueryである。imgそのものにjQueryでクラス名を付けるのはどうだ。 $("img").addClass("hoge"); という具合だ。
だめでした。
しかしソースを確かめてみるとクラス名はたしかに付いている。ではなぜかとソースを凝視しましたね、わたしは。
見つけました。Jimdoでは挿入された画像そのものをdivで囲っていて、そこにwidth="表示される画像のサイズ"と横幅が指定してあるのですね。
ここで「先生、わかりました！」と挙手したと思っていただいても構わない
<script type="text/javascript">
google.load("jquery","1.6.2");
</script>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
$("img").addClass("hoge");
$("div.imgleft").css( "width","100%"); });
})(jQuery);
</script>
を、ヘッダーに挿入することで適用されました。めでたしめでたし。imgleftというクラス名は「文章付き画像」を選択した時に付与されるらしい。画像を右寄せ指定したらおそらくimgrightあたりが付くとふんでいる。どんなクラス名が付くかは各自確認されたい。また、imgの前には親要素のクラス名をつけておいたほうがいいと思う。今回は記事以外に画像を使わなかったのでこれでよしとしました。
なお、noConflictっていうのはJimdoがそもそもPrototypeを使っているため、jQueryを使うときは干渉を防ぐために必須らしいです。
最後になるがieのことは一切考えていないので注意されたいって最初に書いておくべきだったですね、すいません。
カメラート･デザイン部のおしごと
