見本ページの画面キャプチャで解説

 画面右上のリンクに、重要なものを入れておきましょう。関係先や、SNSなどがおすすめです。
 動画を使わない場合は、隣も含めて消してしまうか、cssファイルで隣の inline-block_text1a を編集して、表示割合を広くとったほうが、パソコン画面ではきれいにおさまります

  この画面後半からは、二列で表示(スマホでは縦に表示)になります。だいたい左右で同じくらいの長さになるように文章の配置を工夫すると、パソコンの場合に、見やすいかもしれません。

 パソコンなどで2列に表示されるほうの左側がtext2、右側をtext3にしています。
 枠の周囲を点線にしたり、色つきの固定線にしたり、二重線にするのは、それぞれのクラス名のところにcssで指定されていますので、クラス名の欄を見て、必要に応じて編集してください。

 掲載してある見本では、Twitter部分をinline-block_midashiにしてあるのですが、同梱しているcssファイルでは、text3にしています。お好みで。

 掲載してある見本では、Facebook部分をinline-block_midashiにしてあるのですが、同梱しているcssファイルでは、text3にしています。お好みで。
 TwitterとFacebookは、両方を入れるとスマホの画面ではくどく感じる(多くのお店サイトで、中味が似たものを両方で発信しているため、内容が重複する)ので、内容がまったく異なる場合を除き、どちらかだけがよいかと思います。
 この最後のフッター部分(リンクを書く)と、冒頭のヘッダー部分は、色とサイズ(表示幅のパーセンテージ)を、同じにしておくと、見た目がきれいです。
SSIが使えないレンタルサーバの場合、あるいは広告リンクの使用をしない場合は、フッターから下をすべて削除してしまったほうがすっきりします。
 広告リンクだけ使いたい場合は、cssファイルで該当するクラス名のところを幅広に編集するとよいかもしれません。スマホの場合は変更してもしなくても同じですが、パソコンのほうは、広げたほうがきれいです。
 このファイルを見ても、よくわからない点がある場合は、まずはネットで検索をしてみてください。
 当方の記述に誤りがある、もしくは急ぐべき訂正事項があるという場合を除いて、ご質問や感想をいただいても、個別にお返事をすることは難しい場合がありますので、お返事出来ない場合でも、その点はどうか、お含みおきください。
 このファイルは、baum.mikimarche.com内のファイル配布場所において、ファイル本体と一緒に梱包されているファイルです。間違えてネットに載せないようにご注意ください。
2021.05.21 mikimarche