スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~ : 第4回 外部サービスを利用して、カレンダーや翻訳機能などJimdoに存在しない機能を付け足す

エキスパートコラム

Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~(全6回)

第4回:外部サービスを利用して、カレンダーや翻訳機能などJimdoに存在しない機能を付け足す

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年2月23日更新

  • このエントリーをはてなブックマークに追加

閲覧数12,069views

このコラムをPDF形式でダウンロードする

"Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。

Jimdoの役目は「かんたんにページを作成する」ことです。さらによりよい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。

Jimdoは、なんでもできるわけではない

Jimdoはホームページを作成するためのツールです。ホームページに関わる基本的なことはほとんどできますが、ビジネスや商売で使いたい専用の機能は備わっていなかったりします。
今回は、以下の3つを利用する方法を解説します。

営業日カレンダーを挿入する

Jimdoには「カレンダー」を作成する機能はありません。表組みで作る事もできますが、マス目の数も多く、作成はとても大変です。そんなときは、外部サービスを利用し、カレンダーを作成すると便利です。

ネットショップ向けカレンダージェネレーター

ネットショップ向けカレンダージェネレーターでは、2ヶ月分のカレンダーを作成することができます。カレンダーが縦に並ぶレイアウトですが、サイドバーなどに設置すれば汎用性は高いです。休業日にチェックを入れると、リアルタイムで下の「プレビュー」に反映されます。その下にある「HTMLソース」を利用し、Jimdoへ貼り付けします。

ネットショップ向けカレンダージェネレーター

Jimdoに貼り付けるには

ネットショップ向けカレンダージェネレーターで表示されている「HTMLソース」をすべてコピーします。次に「コンテンツを追加」から、[…その他コンテンツ]をクリックし、隠されたパネルを表示します。

[ウィジェット/HTML]を選択します。

そして、先ほどコピーしておいたHTMLソースを貼り付けし、保存します。

これで、カレンダーが挿入されました。生成したカレンダーは自動では更新されませんので、定期的にHTMLソースを取得し直すのがよいでしょう。

サイドバーに挿入するとすべてのページで表示されるため便利

Point

ネットショップ向けカレンダーは、サイドバーエリアに挿入すると、すべてのページに共通で表示されるため便利です。ただし、テンプレートによってはサイドバーエリアがページの下部にあったりしますので、利用しているテンプレート次第で、適宜場所や扱いを考慮しましょう。

Googleカレンダーを一般公開して挿入する

Googleカレンダーを利用するには、まずは「Google アカウント」(無料)が必要です。以下のアドレスから、事前にGoogle アカウントを登録しましょう。

Google アカウントの作成

マイカレンダーの右側にある「▼」をクリックすると、カレンダーの一覧が表示されます。Googleカレンダーは、複数のシートを用意できますので、用途や目的に合わせて増やしましょう。たとえば、「休診日」「セミナー開催日程」など、属性の違うカレンダーイベントを管理することができます。

カレンダーの一覧から、公開したいカレンダーシート(この例では赤間公太郎というカレンダーシート)にマウスカーソルを合わせると、すぐ右側に「▼」が現れます。それをクリックし、「このカレンダーを共有」を選びます。

カレンダーは、シート単位で共有可能。内容によって使い分けよう

「このカレンダーを一般公開する」にチェックを入れましょう。さらに下のチェックボックスは、予定の時間枠だけを一般に公開する際にチェックを入れます。一般的には「予定あり」と表示されます。
設定が完了したら、忘れずに「保存」ボタンを押します。

保存ボタンを押すのを忘れないようにしよう

Googleカレンダーのトップに戻りますので、再度カレンダーシート右の「▼」をクリックし、「カレンダー設定」をクリックします。

画面なかほどにあるソースコードをコピーし、Jimdoのウィジェットに貼り付けます。ウィジェットに貼り付けする方法は、ネットショップ向けカレンダーで説明した方法とまったく同じです。

「色やサイズなどをカスタマイズします」では、さらに細かい表示の設定が可能

これで、Googleカレンダーが挿入されました。

Googleにログインしている状態では内容非公開の予定も実際には見えているため、ログアウトやほかのWebブラウザでチェックしてみよう

英語や中国語など、翻訳ツールを導入する

Jimdoは世界各国で利用されており、設定から管理画面を違う国の言語(英語やドイツ語)に変更することができます。しかしながら、ホームページの内容をほかの言語に変更することはできません。ここでは、Googleの翻訳機能をJimdoに導入する方法をご紹介します。利用するには、Googleのアカウントが必要ですので、あらかじめ作成しておきましょう。

Googleウェブサイト翻訳ツール

Googleウェブサイト翻訳ツール

まずはJimdoのホームページアドレスを入力し、「次へ」をクリックします。

翻訳する言語は、「すべて」か、指定した言語に限定することができます。すべて選べる状態だと多少見づらくなってしまいますので、必要なものに絞るとよいでしょう。

表示モード、翻訳ツールを表示する際の見た目を指定します。いくつか試して、Webサイトにマッチしそうなものを選びましょう。設定が完了したら、一番下の「コードを取得」ボタンをクリックします。

翻訳ツールをWebサイトに導入するためのコードが2つ生成されます。上段のコードは、Jimdo右設定パネルの[設定]から「ヘッダーを編集」にコピー&ペーストします。
下段のコードは[ウィジェット]にコピー&ペーストします。

導入が完了すると、Googleの翻訳ボタンが現れます。言語を切り替えられるので、実際に動作を確認してみましょう。

自動翻訳で日本語から英語に切り替えた

以上の作業で、Googleの翻訳ボタンが設置されます。Googleの翻訳はあくまで自動翻訳ですので、正確性や信憑性については、意図して本格的に翻訳したものにはかないません。
あくまで補助的なものとしてとらえ、方針に基づいて導入を検討しましょう。

まとめ

Jimdoに存在しない機能は「ウィジェット」を使用して追加しましょう。

  • ネットショップ向けカレンダージェネレーターを使うと、営業日(休業日)カレンダーを表現できる
  • Googleカレンダーの利用で、カレンダーの中に文字を出すなど、さらに高度な表現が可能
  • Google翻訳を導入で、ホームページが多言語対応となる

次回は、「プロのセオリーを取り入れて、バランスの取れた画像を作る」と題して、画像について知っておくべきポイントを解説します(つづく)。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

10日でSEO&アクセスアップ Jimdoデザインブック

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-
  • 15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2016/9/18~2016/9/24]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

    中小企業・小規模事業者の経営者と経理担当者のための経理サポートサイト