2019年1月に、Yahoo!ジオシティーズからJIMDO Freeにホームページを引っ越しました。

先人の知恵も拝借して得たテクニックを、メモとして残します。

使い方：Webページに、Googleドライブ内の画像ファイルを埋め込む際に使用します
1.Googleドライブに、公開したいファイルを格納する
2.格納したファイル名を右クリックし 共有可能なリンクを取得する を選択する
3.クリップボードに格納されたURLを、テキストエディタ等に貼り付ける
4.以下の箇所を置き換える
<変更前>https://drive.google.com/file/d/
<変更後>https://drive.google.com/uc?export=view&id=
5./view?以降を削除する

Tips1 : Googleドライブの画像ファイル参照

Webページに、Googleドライブ内の画像ファイルを埋め込む際に使用します。

1.Googleドライブに、公開したいファイルを格納する
2.格納したファイル名を右クリックし 共有可能なリンクを取得する を選択する
3.クリップボードに格納されたURLを、テキストエディタ等に貼り付ける
4.以下の箇所を置き換える
<変更前>https://drive.google.com/file/d/
<変更後>https://drive.google.com/uc?export=view&id=
5./view?以降を削除する
6.変更後のURLを、データのリンク先として設定する

Tips2 : アコーディオンメニューの作り方(基本編)

アコーディオンメニューを使うとメニューの様に、クリックする度に表示/非表示が切り替わります
1.ヘッダー(CSS)に以下を登録する(<style>と</style>の間に追記すること)
JIMDO:[管理メニュー]→[基本設定]→[ヘッダー編集]→[ホームページ全体]
p.title {
cursor: pointer;
}
p.title:hover {
text-decoration: underline;
}
p.contents {
display: none;
background: #f2f2f2;
margin-left: 1em;
padding: 10px;
}

2.アコーディオンメニューを作るページの下の方に、以下をウィジット/htmlとして追加する
JIMDO:[+コンテンツを追加]→[その他のコンテンツ・アドオン]→[ウィジット/html]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
$("p.title").on("click", function() {
$(this).next().slideToggle(300);
});
});
</script>

3.アコーディオンメニューを作りたい場所に以下をウィジット/htmlとして追加する
JIMDO:[+コンテンツを追加]→[その他のコンテンツ・アドオン]→[ウィジット/html]
<p class="title">
<SPAN style="margin-left:20px">
アコーディオン メニューのサンプル
</SPAN>
</p>

<p class="contents">
もう一回クリックすると、このメッセージが表示されなくなります
</p>

Tips3:アコーディオンメニューの作り方(応用編)

本HPの過去の演奏会情報の作成方法を公開します。

1.Google Driveに、チラシをgifファイルで格納します

　・サムネイル画像なので、横70pixel/縦100pixelあれば十分です

　・画像に対し、リンクを知っている人全員に共有設定を忘れずに行いましょう

2.Google Driveに、演奏会プログラムのpdfファイルを格納します

　・迷惑メール対策と個人情報保護の為に、文字も画像データ化をお勧めします

3.ココから、アコーディオンメニューに表示するhtml作成用のエクセル(マクロプログラム付き)をダウンロードしてください。

　・"テンプレート"のタブをコピーして、新しくタブ名称を付けます

　・チラシURLのセル(B2セル)に、Googleドライブに格納済みのチラシのリンク先URLを入力します(ファイルを右クリック→リンクを取得→リンクをコピー した後、B2セルにペーストします)

　・プログラムURLのセル(B5セル)に、Googleドライブに格納済みのプログラムのリンク先URLを入力します(操作は同上)

　・演奏会情報のセル(C2)に、演奏会の詳細情報を入力します

　・作曲者/曲名/編成の情報を順に入力します

　・入力が完了したら"html生成"ボタンでhtmlファイルを適当なドライブに格納します

4.JIMDOに上記htmlを貼り付けます

　・JIMDOで[+コンテンツを追加]→[その他のコンテンツ・アドオン]→[ウィジット/html]を選択します

　・エディタが開くので、先に格納したhtmlファイルの中身をコピーし、保存します

5.以上でできあがり

※エクセルの記入サンプルとして、第1回～第3回定期演奏会の情報を格納しておいたので、参考にしてください。