「お絵描きの勉強会」ページの編集
見出し、文章、画像コンテンツの追加
編集モードでJimdoサイトを開き、「お絵描きの勉強会」ページの編集にとりかかった。
デザイン文書に基づき、「お絵描きの勉強会」ページの編集を行う。
大見出し、文章、中見出しを追加する。この部分はスムースに進んだ。
ボタンの追加
次に「ボタン」コンテンツを追加して、その「ボタン」をクリックすると、「お絵描きの作品」ページへジャンプするようにした。
- コンテンツを追加する箇所で、「＋コンテンツを追加」をクリックし、表示されるメニューから「ボタン」を選ぶ。
- 標準の「スタイル１」から「３」まであるので、それぞれを選ぶとプレビュー表示がされるのでその違いを確認した。
- 最終的に「スタイル１」を選び、左揃え｜中央｜右揃えから、「中央揃え」を選んだ。
- ボタンの表面にある文字は「お絵描き作品」とした。
- 鎖の形の「リンク」アイコンをクリックし、「内部リンク」でリンク先「お絵描き作品」ページを設定した。
- 最後に「保存」をクリックする。
- 「プレビュー」モードでリンクが働くことを確認した。
これにより、「お絵描き作品」ボタンが、ページ中央に追加できた。
ボタンのスタイル設定
作成した標準の「ボタン」にスタイルを設定（編集）する
- 「管理メニュー」から「デザイン」、そして「スタイル」と進む。
- 左上隅に表示される「詳細設定」が「オン」になっていることを確認する。「オフ」の場合は「オン」に変更する。
- 編集したいコンテンツ（この場合は、上で作成した「ボタン」）を、コロコロマークのポインターに変形したカーソルでクリックする。
- 編集画面が画面上部に表示される。
- スタイル項目として「フォント」、「フォントサイズ」、「フォントカラー」、「背景色」、「罫線の色」、「罫線のサイズ」、「角丸」が設定できること、一部は（active）状態の設定もできることを説明した。（active）は、カーソルがボタンの上に乗った時の状態を言うことも説明した。各自自由に設定した。フォントサイズを大きくする（例えば28にする）と、文字が大きくなった分ボタンの大きさも大きく見やすくなる。またactive と非 active 状態で異なるスタイルにしたり、角丸の値を変えてボタンに丸みを持たせたりした。これらの変更は、編集モードのままでも確認できた。
- 最後に「保存」ボタンをクリックして、変更を保存した。
- 保存後再度編集メニューを表示して、標準のスタイルへ戻すアイコンについても説明した。
- 編集最後に、編集画面右上隅にある「閉じる」をクリックして編集画面を閉じる。
ボタンを複製する
スタイルを設定したボタンは一個だけなので、複数（例えば3個）のボタンを横並びで追加しようとなった。
そのために「ボタン」コンテンツの複製をして3個のボタンを縦並びに並べた。
- 追加した「ボタン」コンテンツを表示して、編集メニューの「コンテンツをコピー」ボタンを表示する
- 「コンテンツをコピー」ボタンをクリックして、「ボタン」コンテンツを複製する。
- これを繰り返した。結果3個のボタンが縦に並んだ。
- ３個のボタンの表面文字をそれぞれ「お絵描き作品１」「お絵描き作品２」「お絵描き作品３」などとした。
- 同じ長さ（文字数）の文字を追加してみるとボタンの横幅が揃わないことがある。その場合は追加文字にスペースが自動的に追加されているので、余分のスペースを削除することで横幅を揃える。（ヒント：表面文字数が異なる場合、スペースを追加して文字数を揃えると横幅が揃うことになる。）
３列のカラムを追加する
「カラム」コンテンツを追加し、列数を標準の２から３列に増やした。
それぞれのカラムに複製したボタンを移動する
3個のボタンをそれぞれの列のコンテンツに移動した。
移動方法はボタンコンテンツの大きな➕字マークをドラッグして、カラム内のコンテンツを追加するところまでドラッグして、目的の位置に来た時に手を放す方法を取った。
このようにして3個のボタンを一個づつカラムに移動することで、同じサイズのボタンが横並びで並ぶこととなった。
大変です！フッター部分にあるサイドバーに入ってしまった。！
完成した「お絵描きの勉強」ページを眺めているうちに、同じものが他のページでも見える、あるいは他のページにも「お絵描きの勉強」の内容が入っていると、騒ぎになった。数人の方がそうなっていた！😢😪😥
調べてみると、「お絵描きの勉強」ページに追加したコンテンツのいくつか（中見出し、文章、カラムなど）がフッター部分にあるサイドバー部分に追加してしまっていた。
いい機会なので、これらサイドバーにはみ出したコンテンツを、本来のページに戻すことにした。
サイドバーに追加したコンテンツを本来のページに戻す
サイドバーにある複数のコンテンツを、編集状態にすると表示される大きな➕字マークをドラッグしてクリップボードへ移した。
このあと「お絵描きの勉強」ページに移り、それぞれのコンテンツを大きな➕字マークをドラッグして、該当の箇所へ移動した。
サイドバーへコンテンツを入力するうっかりミスを回避する方法
うっかりして、ページ本体に追加すべきコンテンツをサイドバー部分に入力してしまう件は、ページ本体部分で作業している箇所とサイドバー部分が近く隣接していて、どちらの領域で作業しているか見分けずらくなるからかもしれない。
そういう状況に落ちらないようにするために、すぐにできることは、ページ本体下部に、ある程度の量（例えば50ピクセルなど）の「余白」を入れておくと良いかもしれない。
「HP作成勉強会」ページ編集
大見出し、文章、中見出しコンテンツの追加
次に「HP作成勉強会」ページを開いて、編集を行うことにした。
デザイン文書に従って、大見出し、文章、中見出し、文字列へのリンク、中見出しなどを追加した。
特に問題なく進行した。
PDFファイルの準備
ファイルダウンロード用のPDFの元となるWord文書の編集
自分のフォルダーに保存してあるはずのWordファイル「HP作成勉強会案内」を開いて、年月を変更して、名前を付けて保存する。保存されたWord文書は、「HP作成勉強会案内20190718」などとなる。
Word ファイルをPDF形式で保存する
修正が終わったWordファイルは開いたままの状態。
そこで「名前を付けて保存」を始める。
保存先は自分のフォルダー、名前は日本名の「HP作成勉強会案内20190718」、ファイルの種類は「PDF」にする。
これにより、ファイルダウンロード用のPDFファイルが完成する。
PDF文書をJimdoページに追加する
- 編集中の「HP作成勉強会」ページを開く
- 「＋コンテンツを追加」で「ファイルダウンロード」を選ぶ
- 「ここへファイルをドラッグしてください」あるいは「またはここをクリックして追加」をクリックする
- 個人のフォルダーに保存されているHP作成勉強会案内PDFファイルを選択し、「開く」と、PDFファイルはアップロードされてページに貼りつく
- 「タイトル」と「内容の説明」を、デザイン文書のとおり入力する
- 「保存」をクリックする。
これにて、PDFファイルは、タイトルと簡単な内容説明と、「ダウンロード」ボタン付きでページに追加された。
なお、PDFを作成する時に、Microsoft ではなく KingSoft のオフィスソフトのみがインストールされているＰＣでＰＤＦを作成した方が居られた。その場合上のステップ４で変換して保存したはずのＰＤＦファイルを探すが該当フォルダー内に見つからない（表示されない）となった。ファイルの拡張子はエクスプローラーで表示すると .pdf となっているのだが。❓❓❓
エクスプローラーではそのＰＤＦファイルを表示できるので、ステップ３で言っている方法の、ドラッグしてコピーする方法を取ると、ファイルを貼り付けることができた。😮
PDF のダウンロードを確認する
「プレビュー」モードで、「ダウンロード」ボタンをクリックしたときに、ダウンロードが始まること、またダウンロードしたＰＤＦファイルを開いて内容を確認した。
ダウンロードした内容を確認し、必要な操作（印刷など）を終了したら、ＰＣの「ダウンロード」フォルダーにあるＰＤＦファイルを削除することをガイドした。
「ダウンロード」フォルダーに不必要なファイルを残しておくことは、ＰＣのディスクの容量を消費することにほかならないから。
文章とリンクの設定
文章を追加し、その中の文字列に「お問い合わせ」のページへのリンクを貼る。
これにて「ＨＰ作成勉強会」ページの編集は終了とする。