HTMLとCSSで作るシンプルなページ サンプル S1

 このページでは、当サイトで配布する予定のファイルをご自身で編集していただき、それが完成したらこうなるという予想図を兼ねた、解説をしています。
 HTMLの知識が少しある、ファイルを自分で置ける場所を持っている、といった人のダウンロードを想定しています。  
 素材はデザイン3の水族館と同じなのですが、用意した画像を数秒で変更させるスライドショーを作ってみました。

2015年に撮影、サンシャイン水族館にて 2015年に撮影、サンシャイン水族館にて 2015年に撮影、サンシャイン水族館にて 2015年に撮影、サンシャイン水族館にて 2015年に撮影、サンシャイン水族館にて


 ときどき画像をご自分で入れ替える手間がかかりますが、それでも、アクセントにはなると思います。
 この背景画像は自作ですので、配布に同梱しておきます。もしよろしかったら、背景画像としてお使いください。
 それからスライドショーは、HTMLとCSSのみでおこなっております。JavaScriptが使えないサイトでもお使いいただけます。
 こうしたものはすべてネットで検索して実現しております。ネットのみなさまの叡智に、深く感謝。

配布予定素材のご案内

 さて、今回のサンプルS1からは、新しいことをしたいと思います。
 大きな画面で見た場合には大きな枠(縦長)で画像または広告を表示させ、小さな画面で見た場合には、縦長ではなく四角い中サイズの画像または広告を表示させるという、変化をつけます。
 また、配布するcssファイルも、これまではそのファイルで使っていない機能も(ほかのファイルで使っているものなどを)入れてしまっていたのですが、できるだけ削って、小さく配布予定です。
 この解説ページのレイアウトは、バターを使ったバウムクーヘン情報サイト「バウムの書」が、姉妹サイトmikimarche内において、お店情報を掲載する際に利用しているものと、ほぼ同じです。
 このページは、バウムクーヘン以外のお店や、製菓製パン以外のお店もご利用いただけるよう、レイアウトを配布していく予定のサンプルです。
サンプル作成日: 2021年6月2日 

 
 配布するファイルをご利用の際に、必要になるのは:

  • レンタルサーバ、もしくはファイルを自分で置けるタイプのレンタルスペース。
  • ファイル編集のための、テキストエディタ。たいていのパソコンには、ひとつくらいインストールされていますし、無料でダウンロードできるものも多いです。
  • 画像のサイズを変更できるソフト。
 これくらいあれば、とりあえず大丈夫でしょう。ネットに載せに行くためのFTPソフトも必要ですが、たいていのレンタルサービスで、画面上からファイルを載せることができますので、お持ちでなくてもなんとかなります。

 
 とりあえず、この見本のように1ページで完結する内容で配布予定ですが、似たページを何枚もつなげて書くことは簡単ですので、必要ならば、ぜひ編集してみてください。
 利用のお約束としては、ご自分でお使いになる分には便利なようにどんどん編集していただきたいのですが、それ(ご自身で編集したもの)を他者に配布する場合には、当サイトのものを編集したとわかるように、説明または文書を添えていただけますよう、ご協力をお願いいたします。

 
 ファイルを置くためのレンタルサーバで安いものをお探しの方は、個人的には「さくらインターネット」がおすすめです。初期費用は別途かかりますが、年に1571円で使えるプランから、あります。無料のサブドメイン名も、ふたつまで利用可能ですので、雰囲気の違うドメイン名を使いたい方にも便利。
 実はこのサイト(mikimarche.com)を載せているのはロリポップで、そちらの一番安いプランですと、さくらよりもお得です。お好みで、どちらでも。
 このふたつのサービスを比較した当サイトによる記事は → こちらです

 Facebookのページを埋め込むのに適した場所です。
この下に埋め込み可能です。

 ここの部分(エディタで見たとき sns1 と書かれている場所の内部)に、横360px、縦400pxくらいに指定したFacebookページを貼りつけると、うまく表示できます。
不要な場合は、このブロックごと削除してください。
 お店のお知らせなどを、下に入れられます。以下の欄はSSIで自動で埋め込みしていますので、ご契約のレンタルサーバがSSI対応であれば、同じようにご利用いただけます。SSI非対応の場合は、HTMLに直接書いてご利用になるのもよいでしょうし、欄ごと省略してしまうのもよいかもしれません。

2021年5月24日: HTMLのファイル配布で、これまで見本になっていた4件を、ダウンロードできるようにしました。
タイプミスや解説の書き換えを頻繁におこなっておりますので、気になる物がありましたら、時間をあけてたまにダウンロードしてみてください。
なお、近いうちに「パソコンでは縦型の枠、スマホでは四角い枠」のサンプルを作成予定です。お楽しみに。

 アフィリエイトやバナーの表示をされたい場合は、ページの下部に、広告用スペースを置けます。
 参考までに、隣の楽天市場の広告は、パソコンでは右側、スマホでは最下部に表示されています。
 このページはロリポップの
スタンダードプランで運営されています。