ページのタイトルをどうぞ

 このページ用HTMLは、まず最初に、何個かコピーをとっておいてください。何かを書き間違えたりしたときに、すぐやり直しができます。
 HTMLに慣れない方、得意ではない方は、いちおう、別の解説HTMLを付けますので、そちらもご覧ください。
 慣れている方は、このページをテキストエディタで開き、「○○○」という三つ○が並んだセットを検索し、その部分に必要事項を入れ(もしくは不要ならば削除)、この内部にあります説明文章をご自身の文章に書き換えますと、最終的には、1ページのHTMLファイルができあがります。  
 YouTubeをここに埋め込む場合は、幅 width 380 / 高さ height 210 くらいで入れると、ぴったりするかと思います。
(テキストエディタで見た場合に sns1 と書かれている場所と、そのdivタグを閉じるまでのあいだに、入れてください)
 なお、この欄が不要の場合は、次の欄(クラス名text1aで処理)を一緒に消すか、あるいは次の欄の設定を幅広に直しておかないと、パソコンで見た際に、大きな空欄が生じます。
 この欄でなく別の場所でも、ページ内ならば sns1 でYouTubeを入れられますが、パソコンで見た際に右側に出る枠 (クラス名 text3 で処理している場所)は、狭いですので、左側に出る text2 など、広くとってある場所に入れた方が無難です。
 このページに使われている画像で、青いグラデーションの背景以外は、配布には含まれません。画像はぜひご自身のもの、もしくは素材サイトなどをご用意ください。
 慣れない方は、サンプル画像(名称 sample_1.jpg など、1番から5番まであります)と同じ名称のものを/img/フォルダに入れてからこの画面を見てみますと、表示の雰囲気がおわかりいただけるかと思います。

配布予定素材のご案内

 (ご自由に編集をどうぞ)
 いちおう、右側に画像がfloatで指定してあります。クリックすると大きく見える仕様です。
 画像ファイルは sample_1.jpg 〜 sample_5.jpg と5枚ありますので、5枚のファイルをその名前にして画像フォルダに入れますと、設定を書き換えなくても画像が表示されます。
 この文章がはいっている枠の名前は inline-block_text2 と言います。それをつないだり減らしたりしながら、お好きに枠を調整していってください。
 (ご自由に編集をどうぞ)
 この解説ページのレイアウトは、バターを使ったバウムクーヘン情報サイト「バウムの書」が、姉妹サイトmikimarche内において、お店情報を掲載する際に利用しているものと、ほぼ同じです。
 このページは、バウムクーヘン以外のお店や、製菓製パン以外のお店もご利用いただけるよう、レイアウトを配布していく予定のサンプルです。
サンプル作成日: 2021年5月7日 

 
(ご自由に編集をどうぞ)
 まず、配布予定のファイルについて、必要なものは:

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


 とりあえず、この見本のように1ページで完結する内容で配布しますが、似たページを何枚もつなげて書くことは簡単ですので、必要ならば、ぜひ編集してみてください。
 利用のお約束としては、ご自身で利用する分には、便利なようにどんどん編集していただきたいのですが、それ(ご自身で編集したもの)をほかの人に渡す場合には、お願いがあります。
 サイトが配布時に含めた画像などを、ご自身が編集したものと一緒に他者に渡す場合は、当サイトからダウンロードしたものを編集したとわかるように、説明または文書を添えていただけますよう、ご協力をお願いいたします。
 当サイトが配布時に含めた画像などを使わずに、cssやhtml部分をご自身で編集されて人に渡す場合は、正直なところ、これは一般の人が見て区別がつかないものと思いますので、当サイトに言及してくださいというお願いは、いたしません。
 このHTMLファイルの最下部に、mikimarche.comに言及する文章がコメントアウトされていますが、ご自身でお使いになる場合には、できれば削除しないでいただきたいのです。ただ、ご事情もあると思われるため、無理は申しません。最終判断はおまかせします。

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

 Facebookのページを埋め込むのに適した場所です。
この下に埋め込み可能です。
 ここの部分(エディタで見たとき sns1 と書かれている場所の内部)には、Facebookの公式ツールで発行された、Facebookページのタグを入れてください。出力されるコードのうち、iFrameのほうです。
 横360px、縦400pxくらいに指定したFacebookページを貼りつけると、うまく表示できます。
 不要な場合は、このブロックごと削除してください。

 お店のお知らせなどを、下に入れられます。この欄も、広告欄も不要の場合は、sectionで囲んである2欄を両方とも削除してしまうと、すっきりします。

SSIを許可しているレンタルサーバをご利用の方、こちらにSSIのincludeを表示させると、色違いでわかりやすいかと思います。

 アフィリエイトやバナーの表示をされたい場合は、ページの下部に、広告用スペースを置けます。
 参考までに、隣の楽天市場の広告は、パソコンでは右側、スマホでは最下部に表示されています。
(広告などをご利用の場合、こちらに広告会社から発行されたタグを書いてください)