Jimdoで独自デザインのサイトを構築した時の注意点覚え

2012年1月8日

ASP型のWebサイト構築サービス、Jimdoで独自デザインのサイトを構築することがあったので、注意点などをまとめておきます。

Pro版です。Free版でできない機能があったらごめんなさい。
構築時点では公式ガイドに記載がなかったので自分で試行錯誤しましたが、Jimdo自体が発展途上のサービスのため今後変更される場合があります。Jimdo公式ガイドの情報を優先してください。

1.画像について

サイトパーツの画像

  1. 独自デザイン設定部分からアップロードした場合、ファイル名の _(アンダースコア)は -(ハイフン)にリネームされる。
  2. 独自レイアウト用にUPした画像ファイルをCSSから読み出す時、パスは同一階層になる
    つまり url(../images/body_bg.jpg) → url(body-bg.jpg) になる。
  3. 独自レイアウト用にUPした画像をコンテンツ内の「文章」ブロックのHTMLエディタから直接記述して読みだす場合は、パラメータ付きのURLを使わないとうまく表示されないっぽい。
    自分はアップロード画像のリストの画面からFirebugで調べてコピペした

ただしパラメータが変更されて将来的にリンク切れになる可能性もあるかもしれない。あくまでも未検証

まず静的HTML+CSSである程度作ってからJimdoに組み込む場合は、これらを考慮しておかないと手間が増える。
(特に自分は画像ファイル名にアンダースコアを使うのに慣れているのでついつい。。。)

↑この方法だと、約10か月後に一部セッションパラメータの期限切れが発生。やめたほうがいい。(2012.10.19追記)
おすすめの方法は、メインサイトの置いてある外部サーバなどにパーツ用ディレクトリを作って、そこから呼び出した方がいい。外部サーバを持ってなければ、flickrとか。。。?

2.CSSについて

  1. 外部CSSは1枚にまとめる必要がある
    (headをいじって別の場所のファイルを読み込む事も出来るかもしれないが面倒なのでやらない)
  2. 自分で書いたCSSは、Jimdoデフォルトの/app/cdn/min/group/web.css?******* で上書きされる。
    これがけっこうやっかい。
    たとえば。。。

    • img要素にdisplay: block;の指定がかかる  背景画像以外でimgを使いたい時もあって困ったので →p img {display: inline !important;} で強制的にもとに戻す。
      またはHTML編集で<img (略) style=”display: inline;” /> で乗り切る
    • Jimdo管理画面の「スタイル」で指定されたフォント指定が優先されるため、自分で書いたCSSのfont-family指定はだいたい効かない。
      Verdana, Geneva, Arial, Helvetica, sans-serif といった指定になる。
      これによってWin環境(特にIE)の場合に半角英数に欧文フォントが優先適用される→クライアントより「数字や記号の文字が小さい」という指摘→MS Pゴシックとメイリオが優先適用されるよう、自作CSSを調整した

雑感

Jimdoは非常に癖があるうえにASPって理由で避ける人もいるかと思うのですが、更新とローンチまでの速さを考えたらメリットはけっこうあります。
今回は既にメインサイト以下複数サイトを持っているお客様ということもあり、手軽さを優先した結果Jimdoが選ばれました。
(これが1つ目のサイトってことになるとまた選択は変わってきたんだろうと思います)

今回のお客さんがかなりデザインにこだわる方だったので、仕様的に実現できない部分などがいくつもあって少し我慢していただいた部分もあるのですが。。。
今後の要望として、もう少し各コンテンツにclassやidを自由に付けられるようになったら、制作者としては嬉しいんですけどね。
(まぁでも、多くのJimdoターゲット層にはそこまで要らないのでしょうが)