Webクリエイターな備忘録このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。Smaphone-NavホームProfileContactプライバシーポリシーホーム>jimdo>はじめての、jimdoテンプレート制作はじめての、jimdoテンプレート制作2015-02-14jimdojimdo今回は、少し前にクライアント様より既存サイトをjimdoに移設したいとご相談を頂きました。jimdoは、一度も触った事がないのでその時の作業内容を備忘録として掲載致します。この記事の目次オリジナルテンプレートの作成方法jQueryスタイドショーの設置ドロップダウン・メニューの実装jimdoを初めて触ってみてjimdoでBootstrap3を使ってみる参考サイトURLオリジナルテンプレートの作成方法クライアント様のご要望として既存サイトの見た目を同じにしたい!!でしたので、まずは、テンプレートを制作してみたいと思います。jimdo虎の巻-独自レイアウトの基本-を参考に、既存サイトと同じ表示になる様に独自レイアウトを作っていきます。htmlで大体のレイアウトを記述し、content、navigation、sidebar、footer部にjimdoで編集・追加できるようにjimdoのルール通りに記述する。後は、テンプレートで使用する画像及び、jQueryファイルを管理画面より全てアップロードしときます。既存サイトではjQueryのスライドショーを設置しているのですが、jimdoではprototype.jsとの競合があるのでjQueryの動作がなかなか難しいらしいです。トップページだけjQueryのスライドショーを設置したかったので、特定ページだけに表示する記述方法をネットより探してみました。Brothers-ウェブデザインを参考に、今使用しているjQueryスライダーを設置してみる...が、まったく動かない。jsファイルをjimdoの所定の場所にアップロードしたのですが、jimdo側で勝手に名前が変更されているのを発見!!名前も変更された物に指定変更...するも動かず。jQueryでの画像の読込みが出来ないようです。特殊な読み出しをしているのでその為だと思われます。ゴラクレスの夏」(http://summerofgorakuless.jimdo.com/javascript/jquery/)で紹介されているjQueryスライダーに変更したところ、上手く表示出来る様になりました。ドロップダウン・メニューの実装メニューの項目が増える事を見越して、ドロップダウン・メニューを実装したいと思ったので、こちらもネットで検索してみたら、ありました(^o^)jimdo虎の巻-ドロップダウンメニューの実装方法-を参考に早速実装しました。jimdoを初めて触ってみて今回、初めてjimdoを触ってみて、サイト制作をする上でjimdo特有の記述方法や操作方法・ルールを調べる事がたいへんでした。これは他のCMSを使う場合も同じですね。一度作ってしまえば、更新作業は直感的でWebサイトを初めて運営する方には非常に解りやすいシステムの様に感じました(同じような直感的なCMSはありますが...Xoops、Drupal、concrete5など)。Webサイトを初めて運営したい方は、取敢えずjimdoのFreeプランを試してみると良いかと思います。jimdoでBootstrap3を使ってみる前回の記事でBootstrap3を使用していろいろ作ってみると宣言しましたので、jimdoのテンプレート制作でも使ってみたいと思います。Bootstrapを使用する事により、レスポンシブWebデザインになりますので、jQueryのスライドショーもレスポンシブWebデザインに対応した物に変更します。選んだものは、前回の当サイトで使用している「ResponsiveSlides.js」を設置してみました。悩んだのは、スマホ用メニュー項目なのですが、jimdo側で<span><em>タグなんかをそのまま処理してくれずエラーを返してくるんです、少しBootstrapのコードを変更したらすんなり表示してくれました。レスポンシブデザインのテンプレートを使用する場合は、事前にjimdoのスマホ表示をオフにしておかいなとダメです。今回、試しに作ってみたのが、こちらのサイトです。ゴラクレスの夏コメントは受け付けていません。「いいなぁ」と思ったら、ソーシャルメディアでの共有をお願いします。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。