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

 このページでは、当サイトで配布する予定のファイルをご自身で編集していただき、それが完成したらこうなるという予想図を兼ねた、解説をしています。
 HTMLの知識が少しある、ファイルを自分で置ける場所を持っている、といった人のダウンロードを想定しています。  
 埋め込みのサンプル動画(2015年撮影、水族館のラッコ)です。YouTubeに限定公開したものを、ここに埋め込みました。
 動画を埋めるときは下のFacebook埋め込み時と同じクラス名 sns1 が使えますので、ほかのデザインサンプルでも、YouTubeは簡単にご利用いただけます。
 このページに使われている画像で、青いグラデーションの背景以外は、配布には含まれません。画像はぜひご自身のもの、もしくは素材サイトなどをご用意ください。
 このページの画像はすべて当サイト撮影ですが、一部は写真ACにて、mikimaruという名前で掲載しているものもあります。ご関心がありましたら、そちらから無料ダウンロードをお願いします。

配布予定素材のご案内

 2021年5月以降に当サイトが配布する予定のHTMLファイル(およびCSSと背景画像)は、目安としてパソコンの標準的な画面、スマホの標準的な画面で見られるようにしてあります。横向きや、タブレットでも、ご覧になれると思います。あまり難しい技術は使っておりません。ざっくりと処理しています。
 この解説ページのレイアウトは、バターを使ったバウムクーヘン情報サイト「バウムの書」が、姉妹サイトmikimarche内において、お店情報を掲載する際に利用しているものと、ほぼ同じです。
 このページは、バウムクーヘン以外のお店や、製菓製パン以外のお店もご利用いただけるよう、レイアウトを配布していく予定のサンプルです。
サンプル作成日: 2021年5月7日 

 
 まず、配布予定のファイルについて、必要なものは:

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

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

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

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

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

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

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