という要望はあるかと思います。
今回は、「トップページにだけ違う画像を表示」というより、
ページ毎のスタイルを変更する
という方法を紹介します。
*自己責任にてお願いします。
独自レイアウトを利用する前提で紹介したいと思います。
まず、レイアウトのHTMLが下記のようだったと想定します。
<div id="title">
<img class="header-image" src="header-image.jpg" alt="">
</div>
<div id="navigation">
<var>navigation[1|2|3]</var>
</div>
<div id="sidebar">
<var>sidebar</var>
</div>
<div id="contents">
<var>content</var>
</div>
<div id="footer">
<var>footer</var>
</div>
この画像
<img class="header-image" src="header-image.jpg" alt="" />
を表示させないようにする場合は、
スタイルシートで下記のようにします。
そして、特定のページ(トップページ等)でこの画像を表示させたい場合は
上記スタイルの逆
というのを、ページ内に記述すると
そのページでのみ、画像が表示されるようになります。
それを、どうやってJimdoの特定のページ内に記述するかというと、
Jimdoには、ウィジェットモジュールがあり、その中へHTMLが記述できるようになっています。
しかし、これは(多分)当初ブログパーツやウィジェットを挿入するという想定でしたので
試した人もいるかもしれないですが、ここへ<style>タグを入れても消えてしまいます。
そこで考えた方法としては、Javascriptとして書き出す方法です。
具体的には、ウィジェットを追加して、以下のように記述します。
<script type="text/javascript"> //<![CDATA[ document.writeln('<style>'); document.writeln('.header-image {'); document.writeln('display: block !important;'); document.writeln('}'); document.writeln('<\/style>'); //]]> </script>
表示されたでしょうか?
簡単ですね。
ちなみにこのサイトのトップページも少し違いますが、同様の方法で
画像を表示させています。
コメントをお書きください
comitment (月曜日, 26 4月 2010 22:27)
全く同じようにやったのですが、うまく行きません・・・。
freeだとできなかったり、jimdoの仕様が変わったということはありませんでしょうか?
Lanthanum〈ランタン〉 永山 (月曜日, 30 1月 2012 14:23)
いつも参考にさせていただいております。
>そこで考えた方法としては、Javascriptとして書き出す方法です。
この方法がよく理解出来ていないようで、うまく実現出来ません。
具体的な方法をお知らせいただけるとありがたいです。
お手数おかけしますが、よろしくお願いいたします。
Lanthanum〈ランタン〉 永山 (火曜日, 31 1月 2012 03:03)
加筆ありがとうございます!
うまく動くようになりました。
以下記述の修正点見つけました。
document.writeln('<style">');→document.writeln('<style>');
お手数おかけしました。ありがとうございます!
宮西洋充 (火曜日, 31 1月 2012 10:38)
無言で修正してましたね。すいません。
ご指摘ありがとうございます。
Clement (月曜日, 23 7月 2012 05:53)
I was very pleased to find this website. I wanted to thank you for your time for this wonderful post!! I definitely enjoy reading it and I have you bookmarked to check out new stuff you blog post.