はじめての、jimdoテンプレート制作 | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

はじめての、jimdoテンプレート制作

201502xx-1
今回は、少し前にクライアント様より既存サイトをjimdoに移設したいとご相談を頂きました。
jimdoは、一度も触った事がないのでその時の作業内容を備忘録として掲載致します。

オリジナルテンプレートの作成方法

201502xx-2
クライアント様のご要望として既存サイトの見た目を同じにしたい!!でしたので、まずは、テンプレートを制作してみたいと思います。
jimdo虎の巻-独自レイアウトの基本-を参考に、既存サイトと同じ表示になる様に独自レイアウトを作っていきます。
htmlで大体のレイアウトを記述し、content、navigation、sidebar、footer部にjimdoで編集・追加できるようにjimdoのルール通りに記述する。
後は、テンプレートで使用する画像及び、jQueryファイルを管理画面より全てアップロードしときます。

jQueryスタイドショーの設置

201502xx-3
既存サイトではjQueryのスライドショーを設置しているのですが、jimdoではprototype.jsとの競合があるのでjQueryの動作がなかなか難しいらしいです。
しかし、トップページだけjQueryのスライドショーを設置したかったので、特定ページだけに表示する記述方法をネットより探してみました。
jimdoスライダー設置方法 – Bongo Brothers-ウェブデザインを参考に、今使用しているjQueryスライダーを設置してみる…が、まったく動かない。
jsファイルをjimdoの所定の場所にアップロードしたのですが、jimdo側で勝手に名前が変更されているのを発見!!名前も変更された物に指定変更…するも動かず。
jQueryでの画像の読込みが出来ないようです。少し特殊な読み出しをしているのでその為だと思われます。

しょうがないので、「JQuery – Jimdo 独自レイアウトカスタマイズ Webクリエイター学習 | ゴラクレスの夏」(http://summerofgorakuless.jimdo.com/javascript/jquery/)で紹介されているjQueryスライダーに変更したところ、上手く表示出来る様になりました。

ドロップダウン・メニューの実装

201502xx-4
メニューの項目が増える事を見越して、ドロップダウン・メニューを実装したいと思ったので、こちらもネットで検索してみたら、ありました(^o^)
jimdo虎の巻-ドロップダウンメニューの実装方法-を参考に早速実装しました。

jimdoを初めて触ってみて

201502xx-5
今回、初めてjimdoを触ってみて、サイト制作をする上でjimdo特有の記述方法や操作方法・ルールを調べる事がたいへんでした。でもこれは他のCMSを使う場合も同じですね。一度作ってしまえば、更新作業は直感的でWebサイトを初めて運営する方には非常に解りやすいシステムの様に感じました(同じような直感的なCMSはありますが…Xoops、Drupal、concrete5など)。
Webサイトを初めて運営したい方は、取敢えずjimdoのFreeプランを試してみると良いかと思います。

jimdoでBootstrap3を使ってみる

201501xx-2
前回の記事でBootstrap3を使用していろいろ作ってみると宣言しましたので、jimdoのテンプレート制作でも使ってみたいと思います。また、Bootstrapを使用する事により、レスポンシブWebデザインになりますので、jQueryのスライドショーもレスポンシブWebデザインに対応した物に変更します。
選んだものは、前回の当サイトで使用している「ResponsiveSlides.js」を設置してみました。
少し悩んだのは、スマホ用メニュー項目なのですが、jimdo側で<span><em>タグなんかをそのまま処理してくれずエラーを返してくるんです、少しBootstrapのコードを変更したらすんなり表示してくれました。
また、レスポンシブデザインのテンプレートを使用する場合は、事前にjimdoのスマホ表示をオフにしておかいなとダメです。

今回、試しに作ってみたのが、こちらのサイトです。

参考サイトURL

jimdo虎の巻-独自レイアウトの基本-
jimdo虎の巻-ドロップダウンメニューの実装方法-
jimdoスライダー設置方法 – Bongo Brothers-ウェブデザイン
JQuery – Jimdo 独自レイアウトカスタマイズ Webクリエイター学習 | ゴラクレスの夏

コメントは受け付けていません。