教会用ホームページテンプレートに画像を準備して挿入する方法
「教会用ホームページテンプレート」の画像を準備して挿入する方法をご案内します。
1. 画像を準備します。
上の画像は、大きめの画像を準備しましょう。実際に画像を挿入して、ホームページをパソコンの画面いっぱいに広げた時に、余計なスペースがなく表示されれば大丈夫です。確認できる方は、1280px × 640pxほどがお勧めです。
下には正方形の画像が3枚入ります。こちらも実際に画像を挿入して、ホームページをパソコンの画面いっぱいに広げた時に、バランス良く表示されれば結構です。確認できる方は、500px × 500px程度がお勧めです。
画像のサイズについてピンとこない方はとりあえず進めていただいて、できあがりの様子を見ながら調節してください。
下の図のように、ダウンロードした「index.html」のファイルを保存したフォルダ内に、「img」という名前のフォルダを作成します。「index.html」と「img」が並んで見える状態であればOKです。
「img」フォルダの中に、画像ファイルを保存します。ここでは、01.jpgが上の画像、02.jpg、03.jpg、04.jpgが下の3枚の画像です。画像の名前は例と同じでなくても構いませんが、分かりやすい名前に変更しておきましょう。
2. テンプレートファイルを編集します。
テンプレートのファイルをテキストエディターで開き、下の4箇所を修正します。いずれも、
「https://」〜「.png」までの箇所を、「img/〜.jpg」のように書き換えています。
上の画像（変更前）
<!-- ⑧ここに上の画像（アイキャッチ）のアドレス -->
<img src="https://placehold.jp/1280x640.png" alt="" class="sumbnail img-fluid">上の画像（変更後）
<!-- ⑧ここに上の画像（アイキャッチ）のアドレス -->
<img src="img/01.jpg" alt="" class="sumbnail img-fluid">これで用意していただいた画像に差し替わります。もし、画像が不要であれば、「<!– 上の画像 –>」から「<!– 上の画像ここまで –>」を削除してください。
下も同様に進めていきましょう。
下の画像（変更前）
<!-- 画像①-->
<img src="https://placehold.jp/500x500.png" alt="" class="sumbnail img-fluid">
</div>
</div>
<div class="col-4">
<div class="footer_sumbnail">
<!-- 画像②-->
<img src="https://placehold.jp/500x500.png" alt="" class="sumbnail img-fluid">
</div>
</div>
<div class="col-4">
<div class="footer_sumbnail">
<!-- 画像③-->
<img src="https://placehold.jp/500x500.png" alt="" class="sumbnail img-fluid">下の画像（変更後）
<!-- 画像①-->
<img src="img/02.jpg" alt="" class="sumbnail img-fluid">
</div>
</div>
<div class="col-4">
<div class="footer_sumbnail">
<!-- 画像②-->
<img src="img/03.jpg" alt="" class="sumbnail img-fluid">
</div>
</div>
<div class="col-4">
<div class="footer_sumbnail">
<!-- 画像③-->
<img src="img/04.jpg" alt="" class="sumbnail img-fluid">うまく直すことができたでしょうか。いずれも「https://」〜「.png」までの箇所を、「img/〜.jpg」のように書き換えています。
「index.html」をダブルクリックして開くと、うまく書き換えられていれば画像が表示されるはずです。もし、表示されない場合には、もう一度よく見直してみましょう。
もし、下の画像は不要であるという場合には、「<!– ⑲下の画像 –>」から「<!– /下の画像ここまで –>」を削除してください。
共有:
[スポンサー広告]
かたい話ばかりでは疲れますから、ネットで見つけたちょっと面白いものを紹介しましょう。教会の中でしかウケないと思いますが、こんなポーチいかがですか？これからの季節のプレゼントにも喜ばれそうです！外のサイトに移動します。
動物のつがいが乗ってる！ ノアの方舟ポーチ 旧約聖書「創世記」でノアと家族、動物たちを大洪水から救う方舟を再現したポーチ。方舟型ポーチのファスナーチャームはオリーブをくわえた鳩の形。大洪水の収束を予感させるモチーフです。さあ、鳩の導きによってファスナーをいざ開けん。……なんと中にはたくさんの動物のつがいの姿が描かれています！みんなに見せびらかしたくなる、マニアックすぎるポーチです。
海よ、いざ割けよ！ モーセが海を渡っていますぞ 旧約聖書「出エジプト記」でモーセが海をふたつに割って渡る伝説を完全再現したポーチ。杖をかざしたモーセのファスナーチャームを引っ張り、ポーチを開いていくと、じわじわと海が裂けモーセが海を渡っていくではありませんか！海をひらいた内生地には、波が割れたようなデザインと海底の砂地に逃げ遅れた魚や貝が！遊び心とこだわり満載の、マニアックすぎるポーチです。