ここはホームページの作り方のページです
今、ご覧になっているのは「ホームページの作り方」のページです。これを参考にして、いろいろ試して加えたり、色を変えたりしてみてください。
右上の「花散策クラブ」をクリックすると、ページが花散策クラブに変わります。リンクしているといいます。花散策クラブのページには、計画の案内の詳細や、写真を載せていますのでお楽しみください。
（覚え書き）この直ぐ下の編集欄の一番右にある </> をクリックすると、このページを作っているHTML（Source Code)が表示されます。
これを編集すれば、新しいスタイルに変えることができる。また、この文章を編集ーフォント、色などーするとHTMLも変わる。HTMLの終了は、一番下のOKまたはキャンセルをクリックする。（'18/03/31改定）
ホームページを Jimdo を使って作るためには、ワードなどを使って文章を作成・編集することに加えて写真、PDFなど 文章以外の要素を扱う必要があります。以下に必要なテクニックなどについて、簡単に触れてみます。
１ ホームページ上の文章の扱い
１ ワードで作られた文章は 、Jimdo には直接載せられない
ホームページが文章だけで作られたとすると、ずいぶん堅苦しく、見栄えも良くないでしょう。
しかし、反対に文章がないホームページは考えられません。校友会活動を知らせるために、文章は不可欠です。
ところが Jimdo にワードで作った文章をそのまま載せることができません。この問題を回避する方法が二つありま
す。
第１の方法は、載せたい文章を写真またはPDFファイルに変換する方法です。
ア 文章を写真にする
文章を写真に撮って、ホームページに載せる方法です。写真を載せるテクニックと同じです。
イ ワードの文章をPDFに変換して載せる
PDFファイルを直接ホームページで表示することができればよいのですが、残念ながらこれもできません。
しかし、利用者がPDFファイルをダウンロードすれば、端末で読み取ることができます。
ワード文章を「名前を付けて保存する」ときに、PDFファイルを指定すれば簡単にPDFファイルに変換できます。
PDFファイルについては、最近「PDFファイルの埋め込み」という技法がJimdoで可能になりました。
これによって、PDFファイルの有用性が高まったといえます。PDFファイルの扱いについて、やさしく解説した記事がありましたので、リンクを張っておきます。PDFファイルを埋め込む
２ 文章を直接タイプ入力することができる
上記１では、できあがった文章をホームページに載せる方法について扱いました。この方法とは異なり ホームページ上に文章を打ち込む方法があります。簡単な文章や補足説明などを随時加えたり、編集することができます。
直接入力する方式の優れた点は、文章の文字の大きさの変更や、色付けなど直接編集を加えられることです。 このことは、できあがった文章を写真やPDFファイルにして扱う場合にはできないことで、ホームページの画面の見栄えを良くすることに役立ちます。
また、直接ホームページに書いた文章は、コピー・アンド・ペーストすれば、ワード文書で保存することができますので、保存記録（バックアップ）の面からも安心して使える方法です。実際に今見ている文章は、直接ページに書き込んでいます。
２ 文章の色づけと背景色の指定
手入力した文章を色づけしたり、フォントを変えたりすることは、Jimdo では簡単にできます。あまり色を使うと画面がうるさくなるので、ほどほどにしておくのがよいでしょう。
編集画面で操作できないものに、背景色の変更があります。これも色づかいには注意が要りますが、注意深く使えば、画面に潤いをもたらすことが期待されます。
上記の背景色は、以下の赤で示した部分を追加したもので表示できています。
元からあった<p><span style= から・・・ </span></p> で終わる６行を、赤で色付けした２行で囲ったものです。
<div>と</div>で囲むことによって、この区間を指定し、そこに背景色のstyle を適用しています。
<div style="background: #ffffe0;"
<p><span style="font-size: 18px;"> 手入力した文章を色づけしたり、フォントを変えたりすることは、Jimdo では簡単にできます。あまり色を使うと画面が</span></p>
<p><span style="font-size: 18px;"> うるさくなるので、ほどほどにしておくのがよいでしょう。</span></p>
<p><span style="font-size: 18px;"> 編集画面で操作できないものに、背景色の変更があります。これも色づかいには注意が要りますが、注意深く使えば、</span></p>
<p><span style="font-size: 18px;"> 画面に潤いをもたらすことが期待されます。</span></p>
</div>
border（枠）スタイルを以下のように設定しました。太さ 2px、破線(dashed)、色（008000：緑）などを指定しました。marginとpaddingはともに余白です。
<div style="border: 2px dashed #008000; margin: 5px; padding: 10px;">
ある限られた～～囲ってみます。
</div>
文章の背景色や枠線について、jimdo を基本に分かりやすく説明したページがありましたので、リンクを貼っておきます。
４ リンクについて
直ぐ上の箱の中の「はじめてのweb 背景色や枠線をつける方法」にリンクを貼りましたが、これは外部にリンクを貼るケースです。該当する文字を選択して、下の編集欄の鎖印をクリックし、さらに外部リンクを選んでアドレスを入力するだけで完成します。jimdo のめざましい威力が発揮されています。
つづいて、リンク先をさらに細かく、具体的な箇所を指定する方法について説明しますが、まず、言葉の定義からです。
ジャンプして飛んで行く先が「リンク先」です。リンク先は、文字のタイトル、写真や表などを指定できます。
リンク先と対になるものを「リンク元」といい、クリックするところです。
リンク元をクリックすると、リンク先にジャンプするという関係です。
リンク元は文章の中にあっても 構いません。
上例の「はじめてのweb・・・」では、ここがリンク元です。
このようにリンク先もリンク元も、日本語で表示することができますので、適切な文字が使えます。
a 外部リンク
「はじめてのweb・・・」の例では、リンク先にwebのページアドレスを指定しました。
</>を開いて Source Code を見てみると、以下のようになっています。
<a href="https://hajimeteweb.jp/column/hp_qualityup/vol9.php"
"title="https://hajimeteweb.jp/column/hp_qualityup/vol9.php">
<a href= ・・・・・> の指定形式も、後半の "title= もどちらもアドレスに始まるものを指定しています。
後半の "title"の指定が何を示しているのか分かりません。たぶんjimdo の約束ごとだと思われます。
b 内部リンク 枠線についてへ
このページ内でリンクを貼ってみます。リンク先は、上記の３のタイトル「枠線について」にします。
リンク元は、右上の「枠線についてへ」にします。リンク先、リンク元の名前は日本語が使えると説明しましたが、コンピュータは、日本語で書いた宛名を理解できないので、リンク先には英数字で別の名前を付ける必要があります。
ここではwakulinkと名付けます。この英数字の名前の使用は、同じページ内では、ただ一つに限られます。
リンク先に付ける英数字の名前は、この場合はwakulinkは、コンピュータ用の表札のようなものです。具体的には以下のようになります。
<a id="wakulink">枠線について</a>
リンク元では、<a href="#wakulink">枠線についてへ</a> と書きます。
「枠線についてへ」がクリックされたら、「wakulink へジャンプしなさい」という指示です。
これで「枠線についてへ」と書かれた部分にカーソルをあてると手の形が出て、これをクリックすればページの最上部が「３ 枠線について」になって示されます。
リンク先とリンク元に付ける日本語名（日本語に限りませんが）は、全く同じでも構いませんが、混乱が心配なときは、「枠線について」と「枠線についてへ」などと統一するような名付け方もありだと思います。
c 外部ページの部分へのリンク 花散策活動計画へ
このホームページには花散策クラブのページを用意していますが、そのなかに201９年度の予定表があります。
右上の「花散策活動計画へ」が花散策ページの計画表へのリンク元になっています。
花散策ページのリンク先には、<a id="hanaKT">花散策計画表</a>
リンク先名（花散策計画表）とその別名（hanaKT）を付け、
右上のリンク元には、<a href="https://seniakita5.jimdo.com/花散策クラブ/#hanaKT">花散策活動計画表へ</a>
と、それぞれ設定します。
リンク元には、このホームページのアドレス（https://seniakita5.jimdo.com）、花散策ページの名前（花散策クラブ）と花散策計画表に付けた別名（#hanaKT）を順次、指定しています。
内部リンクのときに#wakulink と #を付けた理由が、外部リンクの設定例で理解できます。同一ページ内では、アドレス指定は要らないが本来は、# の前にはＵＲＬを置くことが、基本的なフォームなのでしょう。
ページ内の特定の部分に名前（name)を付ければ、#name と別名を指定するだけで、その部分へのリンクができるということです。
jimdo に関連するHPで、ページ部分を </> からソースをコピーして使っている例を見かけますが、「花散策クラブ」のように明確な名称を使うことができます。
ここで取り上げた例は花散策クラブのページが同じホームページの一部であるので、完全に外部リンクを実現したことになっていません。
しかし、一般的にはホームページ内にリンク先を作ることはできないので、同一ホームページ内にリンク先を設定しました。
この下に「５期ホームページ花散策へ」というボタン（リンク元）を作りました。この方が部外的になっています。
jimdoのボタンの書式では、リンク先の指定はページまでですが、ページの後に#name を加えれば、ページ内の特定の箇所にリンクを貼ることができます。（https://kitaomiya5.jimdo.com/クラブの動き/#hanasannsaku）
5 pdfファイルの貼り付け
Jimdoの画面にワード文書を直接書き込めないということは、はじめに書いたとおりですが、これに代わる方法は以下のものがあります。
１ ワード文書をpdfファイルに変化して、掲載する。
２ 同様にファイル変換する方法ですが、pdfファイルを写真に撮って、.jpgファイルを掲載する
ここでは１のpdfファイルを掲載する方法が簡単であり、ネット上にも詳しく説明されているので、参考にしたURLを書いておきます。
https://www.pik.co.jp/how-to-jimdo/コンテンツ/pdfの埋め込み/
上記の方法は最近（2019年）までJimdoの画面でも誘導していたものです。しかし、2019年秋ごろからJimdoは異なる方法に転換しています。
入力画面の下欄の「その他のコンテンツ＆アドオン」をクリックすると、アドオンの中に「pdf埋め込み」が表れます。これをクリックすると、以下の説明文が表れます。
ＰＤＦ埋め込み
Jimdoは、POWrEmbedを使用し、あなたのウェブサイトに電子ブック、パンフレット、重要な資料を追加し、訪問者がすばやく簡単にアクセスを行えるようにすることをお勧めします。・・・・
しかし、新しいEmbed方式を試行してみると、ファイルに網がかかって解読できず、「このプラグインは要求されていません」「サインアップ」などの意味不明の表示がされ、サイトの反応が極めて遅くなります。
また、ネット上にも十分納得のいく内容が見られないので、しばらくはEmbed方式の採用は見送り、従来の貼り付けによることをお勧めします。
以下の案内pdfファイルは、従来の方法で貼り付けたものです。