チャレンジ！
E.2.7 Jimdo便利技
１．水平線のいろいろ
ウィジェット/HTMLコンテンツで、次のようなHTMLコードを入力して様々な水平線が描けます。
<hr size="10" width="60%" color="blue" align="left">
<hr size="5" width="50%" color="yellow">
<hr width="40%" size="4" color="green" align="right">
<hr style="border:none;border-top:dashed 4px red;height:1px;color:#FFFFFF;width:30%;" />
注１：「ウィジェット/HTML」コンテンツの実用的な応用例
として紹介する。
注２：HTMLコードはＨＰにたくさん紹介されているので検索の
仕方を説明する。
２．隠しページ
「ナビゲーション」で新しいページを作成する際に右端のボタン（下図の赤枠）で「非表示」にします。こうすることで、ナビゲーションに表示されないページ（隠しページ）を作れます。
新しいページを増やしたいが、ナビゲーションに追加するほどの内容ではない場合に利用できます。
図１ ナビゲーション編集画面
ユーザには見えないページですが、この隠しページにリンクを張ることができます
図２ 文字列に隠しページへのリンクを張れる
ただし、隠しページといってもページ名を知っている人には次のようにURLの末尾にページ名を追加して、外部からアクセスできます。
https: pasokonnnopa.jimdo.com/（ページ名）/
注１：たとえば、“HPを作ろう”というページ名のとき、なぜか小文字の“hpを作ろう”とする必要があります。
３．アンカーリンク
図２の方法でページにリンクを張ることができますが、ページの先頭以外の位置にリンクを張れません。
HTMLではアンカータグを用いて、①アンカーを定義しておき、②そのアンカーにリンクを張ることができます。
<a name="abc"> --------- ①
<a href="#abc"> ---------- ②
この方法を「ウィジェット/HTML」コンテンツで実現します。
例として「HPを作ろう」というページに次の文字列があり、その先頭にアンカーを設けるものとします。
アンカーを設けたいコンテンツの直前にカーソルを置きます。ウィジェット/HTMLコンテンツを追加し、①を書き込みます。
図３ アンカーを作成する
次に、リンクを設けたい文字列を選択し、まず、下図（図４）の方法でページへのリンクを張ります。そのままでは、リンクをクリックすると「HPを作ろう」ページのトップを表示します。
図４ではアンカーを設けた文字列にリンクを設けています。実際にはこのようなことはありません。
図４ ページトップに飛ぶリンクを設ける
リンクを張った文字列があるコンテンツを「HTMLを編集</>」で開き、下図のようにhref属性の末尾に#abcを追加します。
図５ アンカーを書き込む
注： 上の方法では図４でページトップに飛ぶリンク文字列を生成し、図４でそのリンク文字列の末尾にアンカーを追記しています。
別の方法として、図４の手順を踏まずに、図５でリンクを張りたい文字列ＸＸＸＸの先頭と末尾に次のように書き込む方法でもＯＫです。
<a href="./#abc">ＸＸＸＸ</a>
４．表の挿入
Jimdoの表コンテンツは使いにくく、特に大きな表では苦労する。そのようなとき、Excelで表を作っておき、次のようにしてJimdo表コンテンツに貼り付けると楽にできる。
（１）Excelの表の罫線は消しておく
（２）Jimdoの表コンテンツをページに追加する
（３）最初にできる２行２列を削除する
（４）Excelの表をコピーし表コンテンツに貼り付ける
※右クリックしてコピペ、あるいはCtrl+C/Vを試す
（５）整形し罫線を描く
Wordの表も張り付くがセルの背景色が付くことがあるようだ。
５．カスタム検索
コンテンツ追加メニューのアドオングループから追加します。Googleのカスタム検索エンジンにサイトを登録し、サイト内の文字検索ができます。
６．Googleカレンダーの挿入
コンテンツ追加メニューのアドオングループから追加します。Googleカレンダーの左メニューの「友達のカレンダーを追加」の＋をクリックし「URLで追加」をクリックします。マイカレンダーから公開するカレンダーをクリックし、「一般公開して誰でも使用できるようにする」にチェックを入れます。その下の方に表示される埋め込みコードをコピーしてGoogleカレンダーコンテンツに貼り付けます。
７．PDF埋め込み
コンテンツ追加メニューのアドオングループから「PDF埋め込み」を追加します。「ファイルダウンロード」コンテンツではPDFファイルをダウンロードしてから閲覧できますが、このコンテンツを利用するとページ上のフレーム枠内でPDFファイルを閲覧できます。
PDFファイルをGoogleドライブにアップロードしておき共有リンクの個別IDを<Frame>タグに組み込み、任意のフレームサイズを指定します。
８．HTMLを使って中央揃いに
（１）アクセスカウンターを中央へ
アクセスカウンターを追加しましたが、その上の画像と中央揃えにした方がきれいです。ログインしてアクセスカウンターの上でクリックします。
開いた画面にはアクセスカウンターのタグコードが1行で入っています。その行の前に <center> その行の後ろに </center> と書き加えて「OK」をクリックします。次のように画像とアクセスカウンターが中央揃えになりました。
９．Googleスプレッドシートの貼り込み
AさんがオーナーのホームページにBさんが作成したGoogleスプレッドシートをAさんが貼り込みます。Bさんにオーナーのアカウントを知らせる必要がありません。ここでは、Googleスプレッドシートで作成した野球のスコア表をJimdoホームページに貼り付けてみます。
■ Bさんがやること
Googleスプレッドシートは、エクセルに似た表計算アプリで、Googleドライブで作成できます。Bさんは、Googleアカウントを持っている必要があります。Googleアカウントは Googleアカウントの作成 をクリックして作成できます。Androidスマホをお持ちならすでに取得済です。
Googleドライブへのアクセスの仕方は こちら を参照してください。Googleドライブにアクセスできたら左上隅にある「＋新規」をクリックします。
Googleスプレッドシートをクリックし、空白のスプレッドシートを開きます。エクセルとほぼ同じ操作でスコア表を作成できます。
スマホで作成するにはGoogleスプレッドシートアプリをインストールして右下にある＋ボタンをタップして空白のスプレッドシートを開けます。しかし、パソコンの方がはるかに楽に操作できます。
野球のスコアのサンプルでは、各回の列幅は50ピクセルにしてあります。
試合ごとにシートを分けて作成します。複数の試合をまとめて貼り付けるときは１枚のシートに複数のスコアを書き込みます。
作業が終わったらスプレッドシートを公開しホームページに貼り付けるためのタグ（文字列）を取得するため、「ファイル」メニューを開きます。
「ウェブに公開」をクリックすると次のような画面が開きます。（下の画面は「公開」ボタンをクリックした後の表示です。）
① 「公開」をクリックします
② 「埋め込む」をクリックします
③ 埋め込むシートを選択します
④ コードをCtrlキーを押しながらCキーを押してコピーします
⑤ メールソフトを開きAさんへのメールの本文をクリックします
⑥ Ctrlキーを押しながらVキーを押して埋め込みコードを貼り付けます
⑦ Aさんへメールを送信します。
■ Aさんがやること
Bさんから届いたメールに貼り付けられた文字列を正確にコピーし、ワードなどに一旦貼り付けます。コードは次のような形式です。
<iframe src="https://docs.google.com/spreadsheets/....true&widget=true&headers=false"></iframe>
このコードの中に下に赤文字で示した文字列を追加します。
これはスコア表の幅を700ピクセルにするためのコードです。値を小さくすれば横幅が狭く、大きくすれば広くなります。ただし、ホームページの横幅が限度です。
慣れればJimdoページでウィジェット／htmlコンテンツにコードを貼り付けてからWIdth要素を書き加えればOKです。
<iframe src="https://docs.google.com/spreadsheets/....true&widget=true&headers=false" width="700"></iframe>
widthの前に半角のスペースを忘れないようにします。完成した文字列（修正済コード）をコピーします。コードを追加するために使ったワードファイルは捨てます。
次に、ホームページを開きログインして編集モードにします。スコア表を掲載したいところでウィジェット／HTMLコンテンツを追加し、コピーしてあった修正済コードを貼り付けて保存すれば完成です。
コードは１列になって貼り付きます。これを、見にくいからと改行を入れると正しく動作しません。
10. Apple系でのファイルダウンロード
Jimdoでホームページを作成する便利技ではありませんが、Apple系デバイスでのファイルダウンロードについて書いています。
Jimdoでファイルダウンロードコンテンツを組み込んだページをiPadで開き「ダウンロード」をタップします。
するとダウンロードしようとするファイルが開きます。ファイルとしてダウンロードしたいときは、画像上部に表示されるダウンロードボタンをタップします。
次のようなウィンドウが開いて、ファイルを保存する場所を選択できます。ここでは「ファイルに保存」を選び、iCloud中のフォルダーに保存するとパソコン側でも利用できます。
Apple系ではファイルの内容をダウンロードする前にまず、見せるのですね。この方が利用する側にとってはありがたいですが、Windows系に慣れていると戸惑います。
11．リストの開始番号や記号を変える
文中に「番号付きリスト」や「番号なしリスト」を設けることができます。下図は文章コンテンツを挿入したときのウィンドウです。
上図の左の赤丸が「番号付きリスト」ボタン、右の赤丸が「番号なしリスト」です。
■ 番号付きリスト
リストを入力して選択し「番号付きリスト」をクリックするとリストは番号１から始まります。
- リストを入力する
- リスト全てを選択する
- 「番号付きリスト」をクリックする
リストの間に文章や画像を挿入しその後にリストを続けたいことがあります。リストを入力し「番号付きリスト」をクリックすると番号１から始まるリストになってしまいます。
- リストの続きを入力する
- リスト全てを選択する
- 「番号付きリスト」をクリックする
このリストを番号４から始まるリストに修正したいとき、次の様にします。
（１）上の画像に黄色枠で示す「HTMLを編集」をクリックします。
※黄色枠で示す部分がリストです。リストは赤枠で示す<ol>とリストの下の</ol>で挟まれています。
（２）先頭の<ol>を<ol start=4>と書き換えます。
これでリストは４番から始まります。
- リストの続きを入力する
- リスト全てを選択する
- 「番号付きリスト」をクリックする
■ 番号なしリスト
リストを入力して選択し「番号なしリスト」をクリックすると次のようなリストになります。
- くり
- かき
- とうもろこし
先頭記号は・です。これを□にしてみます。
- くり
- かき
- とうもろこし
先頭記号が小さくて分かりにくいですが、上から白抜きの円、黒の四角、黒の円です。このように先頭記号を変えるには次の様にします。
（１）リストを含む文章コンテンツを開き「HTMLを編集」をクリック
（２）項目の先頭にある<li>タグをみつけます
（３）白抜きの円にするには<li type="circle">、黒の四角にするには
<li type="square">と書き換えます。<li>のままだと黒の円になります。
E.2.1 さっそく作ってみる
E.2.2 Jimdoの基本操作
E.2.3 枠組みの編集
E.2.4 個別ページの編集
E.2.5 スマホで見てみよう
E.2.6 見てもらう工夫
E.2.7 Jimdo便利技