jimdoの独自レイアウトをさわってみて、覚えてると便利なことをまとめてみる。
jimdoの独自レイアウト適応は結構簡単。
でもそれなりのくせがあるので、適当に覚書をかいておこうと。
☆このサイト以外で独自テンプレートをさわらせていただいたサイト
▼広探ゲーム
http://www.hirotangame.net/
レイアウト確認はIE5.5以降~8(win)FOX・safari
IE6以下では透過pngだけ対応処理を後回し中です。。。苦笑
【ローカルでデザイン作るときの注意】
階層
・ローカルで画像を「images」などにまとめている場合、階層をjimdo上にもっていけないので、htmlと同じ場所にだらだら置く。
・cssも同じ。
ファイル名
画像ファイルで、「aaa_01.png」とかにしていた場合、パネルからファイルをアップすると、何故?か自動的に「aaa-01.png」と変換される。「 _ 」が「 - 」になるので、最初から - で作ったほうが無難。
個人的には _ を使えるようにしてほしいけど。。。。。#jimdojp
【アップしてから、編集するときなどの注意】
ウィジウィグの背景色
独自レイアウトでbodyに背景色や背景画像を適応した場合、編集画面の文章などをいれる、ウィジウィグの背景が、bodyとおなじになってしまってみにくい。(テキストうちこむと、テキストがある部分の背景は白くなるのだけど。)
どうやら、編集画面ではiframeのなかにhtmlがあって、
そこに(body内に)文章などを打ち込んで編集とさせているようなので、その部分にcssで背景白をいれたら解消できた。
iframeの中にあるbodyにidとかdirとかいろいろついてる。
classに”mceContentBody”がある。
なので、このlassに背景をいれただけ。
/* 編集画面での背景を白に。 */
body.mceContentBody {
background-image: none;
/* 表示されるほうほデザインでbodyに背景を入れてる場合は背景のリセット */
background-color:white;
/* 表示されるほうほデザインでbodyに背景色を入れてる場合は背景色の上書き */
}
ナビゲータ
jimdoのナビゲータはfreeとかproとか3階層まで。ソースとしては、基本的には<ul>のいれこ。
ul.mainNav1 ul.mainNav2 とかになってる模様。
メインメニューと、サブメニューの場所が違う場合は、#mainNav1 #mainNav2 にわかれているようです。
今いるページになると、自動的にaタグに「current」というクラスがつきます。
ちなみに、広探ゲームhttp://www.hirotangame.net/ さんの独自レイアウトを好き勝手さわらせてもらったのですが、オンマウスで<li>の背景が入って、(びっ妙なグラデ。)同じくオンマウスでaの背景にアイコンを出してます。そして、.currentのクラスにもアイコン。
trのhoverの処理。
#sidebar #navigation ul li:hover {
background-image: url(menu-back.jpg);
background-repeat: repeat-x;
background-position: left bottom;
}
2階層目のほうはアイコン出さないようにしたいので、
#sidebar #navigation ul ul li a:hover {
background-image: none;
color:#555;
background-color: #ddd;
}
こんな感じにしてます。
※#navigation は、メニューをhtmlがわでdivで囲っているので、それについてる任意のIDです。
※tr:hoverは、デフォルトではIE6では利きません。別でjs入れて使おうと思ったのですが、なんだかうまくアップロードできなかったので、また今度。透過PNGについても同様。
【そのほか】
cssのこと。
普通のhtmlコーディングも同じですが、
・古いブラウザとかも考慮して、tableの時の初期設定とかも。
・行間は単位なしで指定する。
をしておくといいなぁって。
特に、行間は、emとかpxとかで指定してしまうと、タグの入れ子の関係でものすごいおかしなことになったり、文字サイズを変更したときに綺麗じゃなかったりとか諸々あるので。
・古いブラウザとかも考慮して、tableの時の初期設定とかも。
に関しては、どれだったかな?どれかのどれかのVERのブラウザで、bodyやdivなど、tableを加工要素にいくらcssで設定していても、fontsizeとline-heightをカスケーディングしてくれないとかがあるので。
table {
font-size:1em;/* 親要素のfontsizeにする */
line-height: 1.61;/* デフォルトのline-heightを設定してあげとくときれい。 */
}
※何故1.61なのかとかはきかないでください。笑
コメントをお書きください
Zachery (月曜日, 23 7月 2012 18:58)
Hi there! This post couldn�t be written much better! Reading through this article reminds me of my previous roommate! He always kept preaching about this. I most certainly will forward this post to him. Fairly certain he�ll have a good read. Thank you for sharing!
Juicers Reviews (水曜日, 01 5月 2013 11:12)
This article was in fact just what I had been searching for!