E.2.3 枠組みの編集
E.2.1 さっそく作ってみる
E.2.2 Jimdoの基本操作
E.2.3 枠組みの編集
E.2.4 個別ページの編集
E.2.5 スマホで見てみよう
E.2.6 見てもらう工夫
E.2.7 Jimdo便利技
ホームページの❝枠組み❞とは、トップページの画像や、ページを変えるナビゲーション、どのページにも表示されるサイドバーやフッター部分などを指しています。枠組みにブログ機能を追加することもできます。枠組みが出来上がってはじめて、コンテンツ（内容）を作っていきます。枠組みは、訪問者が内容を利用しやすくするための仕掛けです。
次の順序で説明しています。興味のある項目をクリックしてご覧ください。
手始めにロゴを変えてみましょう。
１．ロゴを変更します
ロゴとは、ホームページを立ちあげている主体を表す画像です。選んだレイアウトでは最初から❝TOKYO❞というロゴが入っています。ロゴの上にマウスを移動すると黒枠が表示されます。
図１ ロゴ画像
この画像を削除し、用意した別の画像に変えてみます。画像を削除するため、黒枠の左上に表示されているゴミ箱マークをクリックします。
図１ 画像の削除
「このコンテンツを削除してもよろしいですか」と表示されるので、「はい、削除します」にマウスを移動しクリックします。画像が削除された部分にマウスを移動すると次のように黒枠が表示されます。
この黒枠はユーザーには見えません。
図２ ロゴエリア
この黒枠にはロゴエリアと表示されているように、ロゴ用に予約された特殊な場所です。
ロゴエリアをクリックすると次のような画面になります。
図３ ロゴ画像を追加する
マウスを移動すると、図3の様にブルーで表示される部分があります。
ロゴエリアが狭いので細く表示されているようですが、プログラムのバグのようでもあります。
ブルー地のところでクリックするとエクスプローラが開いて、ファイルを選択する画面になります。用意した画像ファイルが保存されているフォルダーに移動してロゴ画像を選択し「開く」をクリックします。
図４ ロゴ画像
２．背景を変更します
次に、背景画像を変更するために、画面左上の「管理メニュー」をクリックします。ここでの背景画像とは、バナーとも呼ばれる、トップページの一番上に横幅いっぱいの画像を指しています。
図５ 「管理メニュー」で「デザイン」をクリック
開いた画面で「デザイン」をクリックします。
図６ 「スタイル」をクリック
開いた画面で「スタイル」をクリックすると、次のような画面が開きます。まず、東京タワーの画像を変えてみましょう。
図７ 「背景」を変更します
「背景」タブをクリックします。現在使われている背景画像のサムネイルが表示されます。左端にある「＋」をクリックします。
図８ 「画像」をクリックします
「画像」をクリックするとエクスプローラが開きます。背景画像が保存されているフォルダーを開き画像ファイルを選択して「開く」をクリックすると背景画像が変更されます。
図９ 背景画像が変更されました
３．スタイルを変更します
「スタイル」とは背景色や文字の色・サイズのことを指します。
「スタイル」に文字フォントも含まれるはずですが、JimdoFreeプランでは日本語フォントを選ぶことができません。
背景を変更した画面（図９）で、「スタイル」タブをクリックします。
図８ 「詳細設定」をオンにします
画面左上に「詳細設定」ボタンがあります。オンにすると、マウスカーソルがローラーの形になります。壁に塗料を塗る感覚で、塗りたいところにローラーを移動しクリックすると色を変更できます。
「詳細設定」をオフにしておくと、ホームページ全体のスタイルが変わります。
ここでは、サブメニューが表示されている黒い帯の左端（図８に赤枠で示す場所）をローラーでクリックします。
図９ 「背景」をクリックします
「背景」色が表示されます。現在、黒になっていますが、これをもっと明るい色に変更してみましょう。「背景色（黒）」をクリックします。
図10 パレットから色を選びます
パレットが表示されるので、好みの色をクリックして「選択」をクリックすると黒かったバーの色を変更できます。
続いて、ホームページタイトルの「ファットキャッツ」の文字サイズと色を変えましょう。「ファットキャッツ」の文字の上にローラーを移動すると薄いブルーの枠が表示されます。その上でクリックします。
図10 フォントの
開いた画面でフォントサイズを95、パレットからバーと同じ色を選択してみました。
図11 フォントサイズとフォントカラーを変更する
変更が終わったら図11の赤枠で示す「保存」をクリックします。
４．ナビゲーションを変更します
ホームページの構成を、どのようにするかを考えてみましょう。ホームページをみてくれる人に「何を伝えたいか」「どのように行動してほしいか」を検討して、それらを効果的に伝えるページ建てを考えましよう。
ここでは、❝ファットキャッツ❞というパソコンくらぶの紹介と会員勧誘、さらに会員に教室での教材テーマを伝えたり、会員ごとのページを設けたホームページを作ってみます。ページ建ては次のようにしてみました。
図11 ホームページの構成
ナビゲーションを次のように変更します。
（１）「サービス」を「教材テーマ」に変更
（２）「教材テーマ」の次に新規ページを追加し「会員ページ」に
（３）「お問い合わせ」を「お問合せ」に
（４）「ホーム」の2つのサブページを「教材テーマ」に移動
（５）「サブメニュー１」を「次回の教材」に変更
（６）「サブメニュー２」を「過去の教材」に変更
ナビゲーションの上にマウスを移動するとブルーの帯が表示されるのでクリックして、次の画像の様にページ名などを変更します。（ボタンの機能については ここ を参照してください。）変更が済んだら「保存」をクリックします。
図12 ナビゲーションの変更
会員ページには会員の数だけの個人ページを作成することにします。個人ページは非表示（隠しページ）にして、メニューには並べません。そのために、個人ページを追加したら編集ツールの右端にあるボタンで「非表示」に設定します。次のナビゲーションには3人の会員のためのページを追加し、それぞれ非表示に設定しています。
図 13 隠しページの追加
５．パスワード保護領域を設定します
ユーザーが「会員ページ」をクリックしたらパスワードの入力を求めるように設定しましよう。このような設定を「パスワード保護領域を設定する」といいます。
画面左上にある「管理メニュー」をクリックします。
図14 「管理メニュー」を開く
「管理メニュー」画面の「基本設定」をクリックします。
図15 「パスワード」を開く
「基本設定」の「パスワード保護領域」をクリックします。
右ペインに開いた画面の「パスワード保護領域を追加する」をクリックします。
図16 「パスワード」の設定
「名前」には❝会員ページ❞などと適当な名前を付けて、パスワードをかけたページを区別できるようになっています。空白でもＯＫです。
「パスワード」に、会員ページに入るためのパスワードを設定します。
パスワードをかけたいページをチェックします。サブページがある場合は、それらすべてがパスワードで保護されます。
設定が終わったら「保存」をクリックすると次のような確認画面が開きます。
図17 「パスワード保護」ページの確認
設定したパスワードが右ペインに表示されています。変更するには「編集」を、パスワード保護を取りやめるには「削除」をクリックします。
他のページに、別のパスワードを設定することができます。
６．プレビューしてみましょう
ユーザーには、編集モードで変更した内容がどのように見えるかを確かめるには、ログアウトしなくても「プレビュー」モードが用意してあります。ログアウトしていないので、確認したらすぐに編集モードに戻れます。
「プレビュー」モードに移るには、画面右上のボタンをクリックするか、画面の一番下の文字「プレビュー」をクリックします。
図17 「プレビュー」ボタン
あるいは、ホームページの一番下の右端にある「プレビュー」の文字をクリックします。
図17 「プレビュー」
どちらから「プレビュー」に入っても次の画面が表示されます。
図17 さまざまな「プレビュー」
① スマホやタブレットを横にしたときの見え方をプレビューできます。
② スマホやタブレットを縦にしたときの見え方をプレビューできます。
③ パソコン画面での見え方をプレビューできます。
④ 編集モードからログアウトして、ユーザーが見る画面に移ります。
⑤ 「プレビュー」モードから「編集モード」に移ります。ホームページの一番下の右端にある「編集」の文字をクリックするのと同じです。
会員ページに設定したパスワードを試してみましょう。
７．サイドバーを編集します
どのページにも表示される要素を「サイドバー」といいます。語感から画面横に配置されていると思えますが、私たちが選んだレイアウトではページの一番下に配置されています。ページを変えて、どのページにも表示されることを確認してみましょう。
図18 サイドバー
サイドバーの部分は薄いグレーになっています。個別ページを編集中に、慣れないとサイドバーに続きを書いてしまうことがあるので背景色に注意しましょう。
この例では、サイドバーには1個のカラムが配置されています。マウスをサイドバーに移動すると青いブルーの横棒が表示されますが、ここではクリックしません。カラムの構造をそのままに、①と②の文章コンテンツだけを削除します。
右端のフェイスブックのマークのある列をクリックしてみましょう。
図19 サイドバーの編集（１）
フェイスブックやツイッターのマークは、このホームページをSNSを介してPRするための入り口です。たとえば、ホームページのユーザーがフェイスブックのアイコンをクリックして自分のフェイスブック・アカウントでログインし記事を書いたとき、その記事にこのホームページのURLが自動的に書き添えられます。
図20 サイドバーの編集（２）
日本では見かけないSNSのチェックを外して、①「保存」をクリックします。ここでは、アイコンサイズを64pxにしています。
一番左の列には文章コンテンツを追加します。 ② 「＋コンテンツを追加」をクリックします。
図21 サイドバーの編集（３）
「文章」をクリックします。
図22 サイドバーの編集（４）
文章を入力します。文字色を赤にしたいので、黄色枠で示すアイコンをクリックします。（横3点のアイコンはメニューを拡張します）
図23 サイドバーの編集（５）
「テキストカラー」ボタンの右にある小さな▼をクリックします。
図24 サイドバーの編集（６）
パレットから文字色（赤）を選んでクリックし、① 「色を選んでください」をクリックして ② 「保存」をクリックします。
真ん中の列の「＋コンテンツを追加」をクリックします。この列には画像を追加します。
図25 サイドバーの編集（７）
コンテンツ選択メニューから「画像」を選びクリックします。
図26 サイドバーの編集（８）
黄色枠で示す「アップロード」アイコンをクリックするとエクスプローラが開きます。追加したい画像ファイルを選択し「開く」をクリックすると画像がアップロードされます。
図27 サイドバーの編集（９）
① で画像サイズを小さく（大きく）できます。② で左揃え／中央揃え／右揃えを設定します。
これでサイドバーが完成しました。
図28 サイドバーの完成
① で画像サイズを小さく（大きく）できます。② で左揃え／中央揃え／右揃えを設定します。
８．ブログを追加します（任意）
ホームページでは情報の記載場所が固定されていますが、ブログでは流れていきます。ホームページは伝えたい情報を論理的に場所を決めて配置し、一見、冷たい感じです。一方で、折に触れて書くブログがホームページに暖かさを加えてくれます。ブログ記事は感情的要素が豊富です。ホームページの目的が、ブログを加えることで一層効果的と思えるならブログを追加しましょう。
ブログ機能だけを利用したいなら、ブログ専用サイトも検討しましょう。Jimdoのブログの作り方はJimdoホームページの作り方をベースにしており、ブログ専用サイトより操作が複雑です。
ブログを作成するには「管理メニュー」をクリックします。
図29 管理メニューからブログ作成
初めて管理メニューの「ブログ」をクリックしたときは、次のような画面が開きます。
図30 ブログを有効にする
「ブログを有効にする」をクリックすると次のようにナビゲーションに「ブログ」タブが作られます。
図31 ナビゲーションに「ブログ」タブが作成される
「ブログ」タブができましたが、まだブログを書いていません。さっそく左ペインの「ブログ」をクリックしてブログを書いてみましょう。
図32 新しいブログを書く
「新しいブログを書く」をクリックします。
図33 「タイトル」を書く
① 「タイトル」に、書こうとするブログのタイトルを書きます。
② 「保存」をクリックします。
右ペインの「＋コンテンツを追加」をクリックして見出しや文章コンテンツなどを追加していきます。
ブログの編集を終わるには、図33の左上の「← 戻る」をクリックすると「管理メニュー」に戻ります。
もう一度「管理メニュー」の「ブログ」をクリックしてみましょう。
図34 ブログを編集・公開・削除する
① ブログを編集するには「編集」ボタンをクリックします。
② ブログを公開／非公開にするには「ブログの状態」をクリックします。ボタンを押すごとに公開または非公開に変わります。緑の②は公開状態、その下のグレーのマークは非公開を表しています。
③ ブログを削除するには縦3点ボタンをクリックし
④ 「ブログを削除」をクリックします。
⑤ 「管理メニュー」に戻るには「← 戻る」をクリックします。
「テーマ」や「カテゴリー」を設定して閲覧者がブログを活用しやすくできます。「テーマ」を設定するとナビゲーションにサブページが作られて同じテーマのブログがそのサブページに集められます。「カテゴリー」を設定しておくと同じカテゴリーのブログがページを超えて集まります。
９．フッターを編集します
ホームページの一番下、どのページの下にも表示されているのがフッターです。ホームページを作った直後には次のように表示されています。
図35 フッター（変更前）
フッターを変更するには、まず左上の「管理メニュー」をクリックします。
図36 管理メニュー
「基本設定」をクリックします。
図37 「共通項目」
「共通項目」をクリックし、続いて右ペインで「フッター編集」タブをクリックします。
図38 「フッター」記載内容の変更
① フッターに記載する内容を入力します。
② ショップについては盛り込む予定がないので「配送・支払い条件」へのリンクのチェックを外しました。
③ 「保存」をクリックします。
図39 「フッター」が完成
これでホームページの枠組みが整いました。つぎは、いよいよ個別ページを編集しましょう。