E.2.4 個別ページの編集
E.2.1 さっそく作ってみる
E.2.2 Jimdoの基本操作
E.2.3 枠組みの編集
E.2.4 個別ページの編集
E.2.5 スマホで見てみよう
E.2.6 見てもらう工夫
E.2.7 Jimdo便利技
ホームページの枠組みが整ったので、個々のページを作り上げていきましょう。あらかじめ組み込まれているコンテンツを利用しながら、新しいコンテンツを追加していきます。
コンテンツとは、ホームページに表示する文章や写真や図のことです。編集モードでマウスを移動したときに表示される黒枠内が１つのコンテンツです。
カラムには複数のコンテンツが入っています。カラムは枠組みを作る仕掛けです。
次の順序で説明しています。興味のある項目をクリックしてご覧ください。
■ ＋コンテンツを追加
コンテンツの上でマウスを移動していくと「＋コンテンツを追加」というボタンが現れます。たとえば、「ホーム」ページで上から下へマウスを移動すると、次のように「＋コンテンツを追加」ボタンが現れます。
マウスを文章の下の方へ、そっと移動すると…
さらに移動すると…
空白のところにも、「余白」コンテンツが挿入されています。さらにその下には「水平線」コンテンツが挿入されています。
① は「見出し」コンテンツ
② は「文章」コンテンツ
③ は「余白」コンテンツ
④ は「水平線」コンテンツ
それぞれのコンテンツの上または下の黒線にマウスを置いたときに「＋コンテンツを追加」が表示されます。
「＋コンテンツを追加」の上でクリックすると次のような「コンテンツメニュー」が表示されます。メニューを閉じるにはメニューの上・中央の✕をクリックします。
ブルーの帯をクリックするとメニューが拡張されます。
■ 標準コンテンツ
【見出し】フォントサイズ大・中・小の見出しを追加します。Jimdoの古いバージョンでは文字は左揃えでしたが、新しいバージョンでは中央揃えです。
【文章】文章を挿入します。フォントサイズ、フォントカラー、リスト形式、リンクなどを設定できます。
【画像】画像を1枚挿入します。画像にリンクを張ることができます。
【画像付き文章】文章と画像を追加します。画像は文章の左または右に配置できます。
【フォトギャラリー】複数の画像を追加します。画像を縦横に並べたり、スライドショーで表示したりできます。
【水平線】水平線を一本追加します。
【余白】余白を追加します。余白の高さをピクセルで指定できます。
【カラム】カラム構造を追加します。
【YouTube等】YouTubeなどを追加します。YouTubeにアップされたビデオのURLをこのコンテンツに設定します。
【ボタン】ボタンを追加します。ボタンは左揃え・中央揃え・右揃えで配置できます。
【商品】ショップを掲載するときに商品を定義します。JimdoFreeプランでは最大5個の商品を定義できます。
【シェアボタン】FacebookやTwitterといったSNSのアイコンを追加します。ユーザーがクリックしてログインして投稿するとホームページへのリンクが組み込まれます。
■ 拡張コンテンツ
【Googleマップ】Googleマップを追加します。
【ファイルダウンロード】ファイルダウンロードアイコンを追加します。ユーザーがこのアイコンをクリックすると、PDFファイルなどをダウンロードできます。
【ゲストブック】ユーザーの書込みをホームページに表示します。
【商品カタログ】商品コンテンツで定義した商品の一覧を表示します。
【ウィジェット/HTML】アクセスカウンターなどのタグを貼り付けたり、文章コンテンツをHTMLコードで表示させ、HTMLの追加・修正ができます。
【フォーム】各種フィールドを備えたフォームを作成できます。入力されたデータはメールで送られてきます。
【表】表を追加します。Excelの表を貼り付けることもできます。
【Facebook】「Facebook に接続する」と表示され、ユーザーがクリックするとFacebookページや、いいね！ボタンが表示されます。
【Twitter】Twitterボタンが表示され、ユーザーがクリックするとあなたのツイートにフォローできます。
【RSSフィード】「RSSフィードのリンク」を提供します。ユーザーがフィードリーダーで購読するとホームページの更新情報を確認することができます。
■ アドオン
メルマガ配信サービスBenchmarkのアカウントがあるなら、登録フォームを設置できる。
Googleが提供するカスタム検索エンジンを利用して、サイト内の検索ができます。
Googleカレンダーをホームページ内に埋め込みます。
ホームページ内でInstagramの投稿をシェアできます。
Coubic 予約システムの「予約する」ボタンや「予約カレンダー」を埋め込めます。
Googleドライブに置いたPDFファイルをホームページ内で開いた形で閲覧できます。
■ 「文章」コンテンツ
ファットキャッツにあらかじめ追加されている「文章」コンテンツの上でクリックすると、文章を変更できます。「見出し」コンテンツや「画像付き文章」コンテンツなども同じです。「カラム」コンテンツで配置されている「文章」「見出し」「画像付き文章」コンテンツも文章を変更できます。
■ 追加できるコンテンツの数
「文章」コンテンツに文章をどんどん書き連ねることができます。文字サイズを大きくすることで「見出し」コンテンツの効果を兼ねることもできます。しかし、読み返してその途中に画像を挿入したくなることがあり、そのときは「文章」コンテンツを分割しなければなりません。段落ごとに新しい「文章」コンテンツを追加するのが基本でしす。ただし、ページ内に追加できるコンテンツの個数は最大200個迄という制限があります。
■ リンクを作る
クリックすると別のページに飛ぶ仕掛けを「リンク」と呼びます。リンクの上にマウスを移動すると指のマークになります。作成した文章の一部の文字列にリンクを組込むには次のようにします。
① リンクを付けたい文字列を選択します。
② 「リンク」ボタンをクリックします。
③ 「内部リンク」タブをクリックします。
④ ▼をクリックし、リンク先を選択します。
⑤ 「リンクを設定」をクリックします。
⑥ 「保存」をクリックします。
「画像」「画像付き文章」「ギャラリー」「ボタン」の各コンテンツに、同様の「リンク」ボタンがありリンクを作成できます。
リンク先が同一ホームページ内でない場合は「外部リンク」タブをクリックし④の左の入力エリアにリンク先のURLを貼り付けます。
ページ内にアンカーを作成し、ページ先頭ではなくページの途中へリンクするには❝アンカーリンク❞を参照してください。
■ アクセスカウンター
ホームページに訪れてくれた回数をカウントする仕掛けを「アクセスカウンター」と呼びます。ホームページに追加するには、まず、アクセスカウンターをサービスしているサイトで自分のカウンターを作成し、埋め込みコードを取得しておきます。詳しくは❝アクセスカウンターの作り方❞を見てください。最終的に次のようなコードが作成されます。
アクセスカウンターを作成できるサイトはたくさんありますが、Jimdoホームページには❝HTTPS対応❞のカウンターしか動作しません。
ここでは、ファットキャッツのサイドバーの中央に追加したロゴ画像の下に「アクセスカウンター」を入れてみましょう。
① アクセスカウンター作成サイトで「アクセスカウンターのタグ」をコピーします。上の画像で赤枠で示す部分をコピーします。（コードを選択しCtrl+C）
② ファットキャッツのサイドバーの画像の下にマウスを移動して「＋コンテンツを追加」をクリックします。
③ ブルー地の「その他のコンテンツ&アドオン」をクリックします。
④ 「ウィジェット/HTML」コンテンツをクリックします。
⑤ 下の画像の赤枠で示す場所に①でコピーしたコードを貼り付けます。（貼り付ける場所でクリックしCtrl+V）
コードは1行に張り付きます。見えない部分を見るにはスライダーを移動します。見やすくしようと、改行を入れるとカウンターは動作しなくなります。
⑥ 「保存」をクリックします。
⑦ しばらくするとカウンターが表示されます。
ロゴ画像の真下にアクセスカウンターを保存するには、もうひと手間必要です。ここ を参照してください。
■ 番号なしリスト
文章コンテンツで、「番号付きリスト」や「番号なしリスト」を作成できます。ここでは、「番号なしリスト」を作成してみます。文章コンテンツ内でクリックし「番号なしリスト」ボタンをクリックします。
リストにしたい文章を入力します。改行する毎にリストが作成され、行頭に・が表示されます。
上の例では、リストに内部リンクを設定して、クリックするとサブページの「次回の教材」ページか「過去の教材」ページに飛べるようにしています。
■ カラム
「次回の教材」ページにあらかじめ入っているコンテンツのカラムを利用して、「次回の教材」を案内するページを作ってみます。カラムに入っている画像すべてを削除します。
画像の上にマウスを移動すると「ゴミ箱」アイコンが表示されるので、その上にマウスを移動しクリックして画像を削除します。❝サービス１❞やその下の文章を、3列とも変更し次のように書換えました。
カラムの幅が狭いため、「文章」コンテンツをクリックして表示されるボタンは一部しか表示されません。次の画像の赤丸で囲んだ「横3点」をクリックすると残りのボタンも表示され、フォントサイズやフォントカラーを変更できます。
■ ファイルダウンロード
カラムの右端の❝概要❞の「文章」コンテンツの下に「ファイルダウンロード」コンテンツを追加します。「文章」コンテンツにマウスを移動し黒枠の下の辺の中央付近にマウスを移動すると「＋コンテンツを追加」が表示されます。クリックして、さらにブルーの帯をクリックして拡張コンテンツメニューを表示させます。
「ファイルダウンロード」をクリックすると次のような画面が表示されます。
① ダウンロードできるファイルの種類（ファイル形式）が記載されています。Jimdo無料プランではワードやエクセルファイルをダウンロードできません。PDFファイルがダウンロードできます。
② ユーザーがダウンロードするファイルはあらかじめパソコンに用意しておきます。②の部分をクリックし、そのファイルを選択しJimdoサーバーにアップロードします。
③ このフィールドは②でファイルをアップロードすると入力できるようになります。ファイルダウンロードについての説明の❝タイトル❞を入力できます。
④ ファイルダウンロードについての❝説明❞を入力できます。
「ファイルダウンロード」コンテンツを組込むとファイル名が表示されるので、③❝タイトル❞や④❝内容の説明❞は不要かもしれません。
「保存」をクリックすると下の画像の右、❝概要❞下に「ファイルダウンロード」が組み込まれます。
■ 画像付き文章
「過去の教材」ページにはコンテンツが何も入っていないので、編集モードで開くと次のような画面になります。「＋コンテンツを追加」をクリックして「画像付き文章」コンテンツを追加してみましょう。
「画像付き文章」コンテンツには「画像」タブと「文章」タブがあります。最初に画像をアップロードすると自動的に「文章」タブが開きます。
画像の大きさを変えたり右揃えにするには「画像」タブをクリックします。その後、文章を入れるには「文章」タブをクリックします。
① 入力した文字列にリンクを設定するには、その文字列を選択します。
② 「リンク」ボタンをクリックします。
③ 外部のサイトへリンクを張るには「外部リンクかメールアドレス」タブをクリックします。
④ 外部のサイトのURLをコピーしておき、入力欄に貼り付け、「リンクを設定」をクリックします。
最後に「保存」をクリックします。
■ 「余白」の追加
「見出し」と「画像付き文章」の間に間隔をとりたいとき、「余白」コンテンツを挿入します。
余白の高さは、上の画像に赤丸で示す部分でピクセル単位で設定できます。
■ 「水平線」の追加
「水平線」コンテンツはページ内で区切りを設けたいときに利用します。たとえば、「画像付き文章」の下に「水平線」を入れるとメリハリがつきます。
■ 隠しページの追加
上の画像の最後に「教室で配布した資料」という文字列があります。この部分をクリックしたらその資料の内容を表示するようにしてみましょう。まず、新しいページを作ります。このページは「ナビゲーション」には表示しないページなので「隠しページ」と呼びます。
ファットキャッツのページの右上のナビゲーション付近にマウスを移動すると次のようなブルーの帯が表示されます。
「ナビゲーションの編集」と書いた部分をクリックします。
① 「過去の教材」の行の「＋」をクリックします。
② 新しいページが下に追加されるのでタイトルを入力します。ここでは「インターネットで調べよう」としました。
③ ナビゲーションに現れないページにしたいので「非表示」ボタンをクリックします。
「過去の教材」のサブページにするには「＞」をクリックします。
④ 最後に「保存」をクリックします。
「非表示」に設定したページは、ナビゲーションには表示しないことを表すために、編集モードでは❝打消し線❞が引かれています。他のページと同じようにクリックするとページが開き編集できます
■ ワード文書の貼り付けと設定解除
「インターネットで調べよう」をクリックし、隠しページを開き、「文章」コンテンツを追加します。ここには、ワードで作成したファイルの内容を貼り付け、手間を省くこととします。ワードを開き、すべてを選択してコピーし、「文章」コンテンツに貼り付けてみます。
ただ貼り付けただけなのに、❝インターネットで調べよう❞の部分はフォントサイズが大きく太字になっています。このように、別のアプリからJimdoページにコピーすると属性もコピーされます。Jimdoの他のページのスタイルと異なると見苦しいページになってしまいます。このようなときは次のようにします。
貼り付けた文章全体を選択します。
赤丸を付けた「設定解除」ボタンをクリックすると、コピー元で設定されていた属性が解除され、Jimdoで入力した状態になります。改めて、フォントサイズやインデントなどを設定し直します。また、先頭のタイトル行は「見出し」コンテンツに置きかえてみます。
箇条書き部分に文章を追加し、行が折り返すので「番号付きリスト」に置きかえました。
この文章は教室で配布したそのままです。ホームページでは、それぞれの操作の仕方を書き加えるとユーザーに親切なページになりますね。
■ パスワード保護領域
「会員ページ」をユーザーが開くとパスワードを聞いてきます。
このページはユーザー画面だけ
編集モードではパスワードを聞かれることはありません。このページには「パスワード保護領域」の設定がしてあるからです。その設定の仕方は 4.3 枠組みの編集 ５．「パスワード保護領域」を設定します を参照してください。
■ ゲストブック
「ゲストブック」コンテンツを追加すると、閲覧者が書込みを残せる仕掛けを組込めます。「ゲストブック」という名前になっていますが、パスワード保護領域で使うとパスワードを知っている人たちだけが書込みできるため、仲間内の結束を強めるツールとして役立ちます。
「ゲストブック」コンテンツを追加すると次のような画面が開きます。
「ゲストブック」の設定
① 投稿は「会員ページ」に表示されます。会員の結束力を高めるには、新しい順に、古い投稿は後に表示することになるでしょう。
② 投稿時にURLの入力入力を求めるか、求めないか
③ 投稿があったとき、内容を確認してから表示するようにするかどうか
④ 投稿があったとき、メールで通知をうけるかどうか
メールアドレスにはアカウントＩＤとして登録したアドレスが使われます。
⑤ スパム対策として、投稿者が画面から読み取ったコードを入力するようにするか、そこまでしないか
⑥ 投稿があった後、次の投稿を受け付けるかどうか
投稿すると、ユーザー画面では次のように見えます。この例では2人の会員から投稿がありました。最近の投稿から順に古い投稿へと並んでいます。
ログインして「編集モード」で「ゲストブック」コンテンツを開くと次のように表示されます。
投稿ごとに「コメントを削除」ボタンが表示されます。削除したいコメントのボタンをクリックすれば削除できます。投稿の文章を変更したり、削除したものを復活することはできません。
■ フォーム
この部分はカラムを使って横方向にコンテンツを並べています。左列には「見出し」コンテンツが、右列に「フォーム」コンテンツが組み込まれています。ログインして「編集モード」に移り、右の「フォーム」コンテンツをクリックしてみます。
① ❝名前*❞の左に入力フィールドを配置します。
② 上の画像の様に❝名前*❞の下に入力フィールドを配置します。
③ クリックして投稿に対して表示するメッセージを設定できます。
④ 投稿時にスパム防止のためにコードを読み取って入力を求めます。
⑤ クリックしてメールアドレスを編集できます。フォームから送信するとアカウント登録時のメールアドレスにメールが送信されます。このメールアドレスを変更します。
フィールドの上でクリックするとタイトルや入力フィールドの幅を編集できます。また、右に表示されるツールを使ってフィールドの位置を上下に移動したり、複製、削除できます。
① フィールドの種別をアイコンで示します。この例では「テキストエリア」を示しています。（下の画像参照）
② チェックしておくとフィールドのタイトルに赤いアスタリスクが表示され、入力しないと送信できない「必須項目」の扱いになります。
③ フィールドの幅を変更できます。
入力フィールドの境界にマウスを移動してクリックして新しい入力フィールドを追加できます。
ラジオボタンを選ぶと次のような選択肢を組込めます。
■ フォトギャラリー
複数の写真をスライドショー形式で表示したり、タイル状に並べたりするにはフォトギャラリーコンテンツを使います。
「フォトギャラリー」を追加し、「ここへ画像をドラッグ」と表示している部分に画像ファイルをドラッグするか、そこをクリックしてエクスプローラから画像ファイルを選択して画像をアップロードします。次のように8枚の写真を読み込んでみました。
①の部分の「横並び」「縦並び」「タイル」「スライダー」をクリックして4種類の表示形式を選択できます。「スライダー」を選択するとスライドショー形式で表示できます。
写真の大きさは「表示サイズ」の●を移動して変更できます。
「拡大表示」にチェックを入れると閲覧画面で写真をクリックしたとき写真を拡大して表示します。（アップロードした写真のサイズが小さいと、そのサイズで表示します。）
②ボタンをクリックすると下の画像のような画面になり、写真の説明（キャプション）を入力できます。また、画像をドラッグして順番を変更できます。
それぞれの写真のキャプション入力エリアにキャプションを入力し「保存」をクリックします。画像の下の中央にキャプションを表示します。
上の画像のキャプションの上にあるボタンで次のようなことができます。
左から
・画像を削除する
・画像を反時計回りに回転する
・画像を時計回りに回転する
・画像にリンクを設定する