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

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

エキスパートコラム

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

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

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

2015年2月23日更新(2017年10月13日改訂)

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

閲覧数19,860views

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

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

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

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

Jimdoはホームページを作成するためのツールで、ホームページを構成するための必要な機能やパーツをほぼ取りそろえています。しかし、システム的な動きをするような、専門性の高い機能は備わっていなかったりします。今回は、以下の3つを利用する方法を解説します。

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

オンラインショップでよく見かける、営業日を掲載するカレンダーです。Jimdoの標準機能である「表組み」でカレンダーを作る事もできますが、カレンダーの構造はマス目の数も多く、作成はとても大変です。JimdoにはGoogleが提供する「Googleカレンダー」を挿入する機能がありますが、営業日カレンダーとして使用するには、それに合った設定をする必要があります。簡易的なカレンダーが欲しい場合、外部サービスを利用し作成すると便利です。

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

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

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

Jimdoに貼り付けるには

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

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

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

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

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

Point

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

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

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

Google アカウントの作成

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

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

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

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

設定が完了したら、忘れずに「保存」ボタンを押します。

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

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

画面なかほどにあるソースコードをコピーします。

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

Jimdoの「コンテンツを追加」から、[…その他コンテンツ&アドオン]をクリックし、隠されたパネルを表示します。次に[Googleカレンダー]をクリックします。

表示される入力欄に、先ほどコピーしたコードを貼付けます。
これで、Googleカレンダーが挿入されました。

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

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

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

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

Googleウェブサイト翻訳ツールにアクセスして[今すぐウェブサイトに追加]をクリックします。

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

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

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

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

翻訳ツールをWebサイトに導入するためのコードが生成されるので、コードをコピーします。

Jimdoの「コンテンツを追加」から、[…その他コンテンツ&アドオン]をクリックし、隠されたパネルを表示します。次に[ウィジェット/HTML]をクリックします。

表示される入力欄に先ほどコピーしたコードを貼付けます。

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

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

まとめ

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

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

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

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

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

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

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

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

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ