E.2.1 さっそく作ってみる
E.2.2 Jimdoの基本操作
E.2.3 枠組みの編集
E.2.4 個別ページの編集
E.2.5 スマホで見てみよう
E.2.6 見てもらう工夫
E.2.7 Jimdo便利技
まず、あなたのホームページのURLからホームページを開き、そしてログインして編集モードで開いてみましょう。4.1 さっそく作ってみようの手順10でメモした あなたのホームページのURL を手元に用意しましょう。
次の順序で説明しています。興味のある項目をクリックしてご覧ください。
1.ブラウザーであなたのホームページを開く
普段お使いのブラウザー、たとえばエッジ、クロム、あるいはインターネットエクスプローラなどを立ち上げてアドレス入力エリアに❝あなたのホームページのURL❞を正確に入力してEnterキーを押します。次の画像はクロムを使った場合です。
4.1 さっそく作ってみよう の手順12でホームページのタイトルを変更しています。
図1 あなたのホームページのたたき台
作ったばかりのホームページをスマホで開くとき、 Google検索の入力エリアにURLを入れて検索はできません。Googleの検索リストに登録されるまでには時間がかかり、それなりの工夫が必要です。作ったばかりのホームページをスマホで表示するには、クロムなどのブラウザーを立ち上げ、https://~と表示しているアドレス入力エリアにあなたのホームページのURLを入力して改行を(あるいはGoを)タップします。
2.お気に入りに登録しておきましょう
これから何度も開くホームページなので、ブラウザーの「お気に入り」あるいは「お気に入りバー」に登録しておきましょう。クロムのブックマークバーに登録するには次のようにします。
① ☆ をクリックし
② 開いた画面の「名前」に簡潔な名称を入力します。
「ファルダ」でブックマークあるいはブックマークバーを選びます。
「完了」をクリックすると登録されます。
図2 お気に入りに登録しておこう
3.ログインします
画面を一番下までスクロールします。黒い帯の右にある、下の画像で黄色枠で囲んだ「ログイン」をクリックします。
図4 ログインする
①にはアカウントIDであるメールアドレスを、②にはアカウントのパスワードを入力し「ログイン」をクリックします。
Jimdoログインページは、Googleなどで検索しても見つかります。ホームページを開かずに、このログインページから編集モードに移れます。同じアカウントで複数のホームページを持っている場合は、ホームページを選んで編集モードに移ることができます。
4.あなたのホームページの上でマウスを移動してみましょう
あなたのホームページが開いたら、その上でマウスをあちこち移動してみましょう。移動するにつれて、黒枠が付いたり消えたりします。
次の画像は、マウスを文字の上(❝テキストブロックの上❞)に移動したときの様子です。
図5 ブロックにマウスを置いたとき
①と②を「編集ツール」と呼びます。どのブロックにマウスを移動しても、「編集ツール」が表示されます。
ウィンドウの幅が狭いとき、①は右側に表示されることがあります。
黒枠内でクリックすると右の十字カーソルは表示されません。ここでの説明ではカラム以外の黒枠内(ブロック内)でクリックはしません。文字内容を修正したり、画像の大きさを変えたりするときに黒枠内をクリックしますが、ここでは図5に示す赤枠内のボタン(編集ツール)に注目します。
5.編集ツールを使ってみましょう。
【上に移動】マウスをこのマークに移動してクリックするとブロックの位置が上に移動します。(図5の例では❝Jimdoで簡単ホームページ作成!❞という見出しブロックの上に(前に)移動します。
【下に移動】マウスをこのマークに移動してクリックするとブロックの位置が下に移動します。(図5の例では写真が横に3枚配置されブロックの下に(後に)移動します。
❝横に3枚配置されたブロック❞はカラム・コンテンツを使って追加されたブロックです。カラムブロックについては この後で説明します。
【削除】マウスをこのマークに移動してクリックするとブロックを削除します。(図5の例ではテキストブロックを削除します。
ブロックを削除すると、そのブロックに入っていた文章や画像は復活できません。
【複製】マウスをこのマークに移動してクリックするとブロックを複製し、下に(後に)同じ内容のブロックが追加されます。
ご覧になっているような、よく似た構成のブロックが続くときは複製してそれを修正して続けることができて便利です。
【十字ハンドル】このマークをマウスでドラッグし、ブロックを離れた位置に移動できます。
「上に移動」や「下に移動」では上または下に1つしか移動できません。
6.クリップボードに保存しましょう
十字ハンドルをマウスで上方向にドラッグし、画面上端に近づくと黒い帯のクリップボードが現れます。
図6 クリップボード
黒い帯がクリップボードです。ドラッグしてきたブロックを、その上でマウスボタンを離すとクリップボードに保存されます。
クリップボードは、図7の赤丸で示す矢印をクリックすると折りたたんだり、開いたりできます。
図7 クリップボードを折りたたむ
クリップボードが折りたたまれているとき、同じ矢印をクリックするとクリップボードが開きます。クリップボードにあるブロックの上にマウスを移動し、十字ハンドルをドラッグして、そのブロックを追加したい付近に下してくると、次のような横線が表示されます。
図8 クリップボードからブロックを取り出しページに追加する
横線の上ででマウスボタンを離すと、そこにブロックが挿入されます。
クリップボードは別のページにブロックを移動するときに便利です。
7.カラムは横方向にコンテンツを並べる仕掛けです
カラム・コンテンツは、画像コンテンツや文章コンテンツなどを横方向に並べる仕掛けです。カラムの上にマウスを移動してみましょう。「カラムを編集」と書いた青い帯が表示されます。
下の画像は、左の写真の上にマウスを置いたため、画像ブロックの「編集ツール」も表示されています。このまま写真の中央付近でクリックすると画像サイズを変えたりリンクを追加したりできますが、3列のカラムそのものを操作できません。カラムの構造を編集するには「カラムを編集」の青い帯にマウスを移動しクリックします。
図9 カラムを編集
「カラムを編集」と書いた青い帯をクリックすると次のような画面になり、カラムの構造を変更できます。現在見ているカラムは3列ですが、それを4列にしたり、一部の列の幅を広げたり・狭めたりできます。
図10 カラムの構造を変えることができる
①を左右にドラッグしてカラムの幅を変更できます。
②をクリックするとすべてのカラムの幅を均等にします。
③をクリックするとカラムを追加できます。
④をクリックするとそのカラムを削除できます。
変更したら右下隅の「保存」をクリックします。
図10の右側には編集ツールが表示されています。( あなたが見ている画面では左側に編集ツールがあるかもしれません。)カラム自体を移動・削除・複製するには、このように「カラムを編集」と書いた青い帯をクリックしてから表示される編集ツールを使います。
図9のように、カラム内でマウスを移動したときに表示される「編集ツール」はマウスがのっているコンテンツのためのものです。
8.ページを変える仕掛けを「ナビゲーション」と呼びます
ホームページの一番上にページを変えるタブが並んでいます。これをナビゲーションと呼びます。
ナビゲーションの位置はレイアウトによって異なることがあります。ここで選んだレイアウトではナビゲーションは右上端に配置されており、この位置を変更できません。レイアウトを選ぶということは、使われている写真を選ぶのではなく、ナビゲーションやサイドバーの位置などを選ぶことです。
図11 ナビゲーションの位置
ナビゲーションの付近にマウスを移動すると次の画像のように「ナビゲーションの編集」と書いた青い帯が表示されます。
図12 ナビゲーションの編集ボタン
「ナビゲーションの編集」と書いた青い帯をクリックしてみましょう。
図13 ナビゲーションの編集画面
「ナビゲーションの編集」画面にはホームページに表示される「ページタブ」が並びます。左端から少しインデントして表示されているのはサブページです。
この例では❝ホーム❞、❝サービス❞、❝お問い合わせ❞という3つのメインページがあり、❝ホーム❞というページには❝サブメニュー1❞と❝サブメニュー2❞という2つのサブページがあることがわかります。
図13でハイライトされているページ名(サブメニュー2)の右にはページの❝移動❞、❝追加❞、❝削除❞、❝非表示❞ボタンが表示されています。
ボタンをクリックしてページを移動した後にもう一度同じページを移動するとき、マウスの同じ位置でクリックしがちです。移動したいページのボタンかを確認してからクリックしましょう。
【上に移動】選択中のページを上に移動します。
「サブメニュー2」が「サブメニュー1」の上に移動します。
【下に移動】選択中のページを下に移動します。
「サブメニュー2」が「サブメニュー1」の下で、メインページの位置に移動します。
【左に移動】選択中のページを左に移動します。
「サブメニュー2」が左に移動し、メインページになります。
【右に移動】選択中のページを右に移動します。
「サブメニュー2」が「サブメニュー1」のサブページになります。
【追加】選択中のページの下に新しいページを追加します。
【削除】選択中のページを削除します。
【下に移動】選択中のページを非表示にします。
「サブメニュー2」が「ナビゲーションに表示されなくなります。
【新規】新しいページを追加します。
青いボタンのすぐ上に新しいページが作成されます。
おおよその基本操作が分かったところで、次はホームページの枠組みを編集しましょう。トップ画面の画像やナビゲーション、サイドバーなどを編集してみます。