Bloggerのテンプレートヴァージョンについて
Bloggerのテンプレートのヴァージョンは三つあり、それぞれに使い方が少し異なる。又、テンプレートのソースコードをHTML編集などから書き換える場合、Bloggerの独自タグであるウィジェットタグに互換性がないものもあるので、注意して使い分ける必要がある。 Bloggerのテンプレートヴァージョンの指定 テンプレートの…
HTMLのpopover属性の基本的な使い方とデザイン
HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input ty…
position:fixedのコンテンツの横幅を指定する方法
テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素…
アドセンスの自動広告のズレを微調整するマークアップ
アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正できるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的…
CSSのグリッドレイアウトのfrと%の違い
display:gridでセルの配置を決めるgrid-template-columns（列）やgrid-template-rows（行）の値のfrと%はどちらもグリッドレイアウトの全体の中の割合（占有率）を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはなら…
サイトの文章を中寄せのままで左寄せに表示するなどの外側と内側で別々に配置する方法
サイトの文章の位置取りはデザインのCSSのtext-alignでleftとcenterとright（左寄せと中寄せと右寄せ）が可能だけれども文章の外側と内側、または全体と部分が同じように整列されてしまう。そこでどうすれば一つの文章て外側（レイアウト）が中寄せで内側（コンテンツ）が左寄せなどの別々の位置取りが可能かを取…
アドセンスの自動広告でサイトのレイアウトが崩れる場合の対処法
アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。 ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少…
Bloggerの管理画面のレイアウトのカスタマイズについて
BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのた…
display:flexで画像が潰れるとか膨らむなんて場合の対処法
ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しか…
ボタンなどのposition:fixedのHTML要素をサイトの幅に合わせて表示する方法
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:…
JavaScriptのsetTimeoutやsetIntervalをrequestAnimationFrameで置き換える
JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 request…
Bloggerで投稿画像を横並びで表示する方法
以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投…
BloggerブログのテーマのHTML編集／テンプレートのソースコードの基本構造と使用可能な独自タグについて
Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源 HTML HTML: H…
CSSで画像に文字を重ねる：グリッドデザインでアイテムのスペースを合わせて表示する
サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン ：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。 目次 グリ…
