些細な日常

Bloggerのテンプレートのヴァージョンは三つあり、それぞれに使い方が少し異なる。又、テンプレートのソースコードをHTML編集などから書き換える場合、Bloggerの独自タグであるウィジェットタグに互換性がないものもあるので、注意して使い分ける必要がある。 Bloggerのテンプレートヴァージョンの指定 テンプレートのhtmlタグに特定の属性を付けるか何も付けないことでヴァージョンが確定する。 ヴァージョン3 b:layoutsVersion='3' ヴァージョン2 b:version='2' ヴァージョン1 指定なし Bloggerのテンプレートのヴァージョンによって使用できるヴィジェットのヴァージョンが異なっている。 もう一つクラシックテーマ（第一世代）というのが管理画面のレイアウトのメニューから利用できるけれどもこれはテンプレートヴァージョンと無縁のもので、最初のもの…

HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。 開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。 popover｜ MDN Web Docs ｜Mozilla ボタンとコン…

テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 position｜ MDN ｜Mozilla 通常、position:fixedのコンテンツは固定位置指定として親要素ではなくてビューポートと呼ばれる大外…

アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正できるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的に止めて欲しいと思うし、そのせいで、アドセンスの自動広告を最初の頃は使わないでいた。 目次 自動広告の微妙なズレが悩ましい CSSで微調整を行うことができる 自動広告の微調整に役立つ二つのCSS要素 自動広告の微調整のためのCSSの指定先 自動広告の微妙なズレが悩ましい 今は相当に改善されているけれどもブログで又出たのが一つ見付かった。 ページャーに寄ってこれでは誤クリックを誘発し兼ねないほどの不味い位置にある。 自動広告にとってデザインのバランスが取り難い場所があるのか、他は大丈夫なのにズレ…

display:gridでセルの配置を決めるgrid-template-columns（列）やgrid-template-rows（行）の値のfrと%はどちらもグリッドレイアウトの全体の中の割合（占有率）を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。 グリッドレイアウトのfrの単位の特徴 トラックを分け合って隙間を全体に収める。 二つのトラックを半文字分の隙間で均等に分ける セル（横幅：トラック合わせ） セル（横幅：トラック合わせ） HTML <div class="grid-layout"> <div class="cell pink">セル（横幅：トラック合わせ）</div> <div class="cell cyan"&g…

サイトの文章の位置取りはデザインのCSSのtext-alignでleftとcenterとright（左寄せと中寄せと右寄せ）が可能だけれども文章の外側と内側、または全体と部分が同じように整列されてしまう。そこでどうすれば一つの文章て外側（レイアウト）が中寄せで内側（コンテンツ）が左寄せなどの別々の位置取りが可能かを取り上げる。 二つの親要素で文章を別々に整列する 文章の外側と内側に別々の親要素を設置してそれぞれに整列することができる。 外側が中寄せで内側が左寄せの例 あいうえお かきくけこさしすせそ たちつてとなにぬねのはひふへほ はひふへほまみむめもやゆよ らりゆれろわをん HTML <div class="outer"> <div class="inner"> <p>あいうえお</p> <p>かきくけこさ…

アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。 ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少しずれて何なのかと調べてみて自動広告を外したら直ったので、原因はこれしかないと分かった。 Googleでアドセンスの自動広告の出し方が変更されれば今までにないことが起きる可能性は十分にあるし、または自分のサイトのテンプレートの変更も影響しないとはかぎらないから注意しなくてはならない。 アドセンスの自動広告がどういうふうに表示されるかは良く分からないし、たとえ分かっても広告コードを非公式に変更するとペナルティーを食らう恐れが全くないわけではないから厄介だ。 個人的にアドセンスの自動広…

BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout：管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。 …

ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しかし何とか考え通りの表示を果たしたので、覚え書きというか、どうすれば上手く行ったかの対処法を纏めておきたい。 目次 フレックスボックスと画像を分けて捉える 画像を親ボックスに入れて文章と揃える方法 画像の親ボックスと文章の四対六の横並びの例 画像をそのままで文章と揃える方法 画像自体と文章の四対六の横並びの例 フレックスボックスと画像を分けて捉える 失敗の原因として気付いたのは画像を親ボックスに入れて画像の大きさだけを指定して文章と合わせようとした。するとフレックスボックスに対しては画像の親…

サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, pe…

JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnimationFrame()メソッドの大きな…

以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Contempo／コンテンポ Soho／ソーホー …

Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源 HTML HTML: HyperText Markup Language HTML5（目的別） CSS CSS: カスケーディングスタイルシート CSS3（目的別） JavaScript JavaScript JavaScript Blogger レイアウト用ページ要素タグについて レイアウト用のウィジェット タグ Les balises Blogger [introduction] 一般的にサイト作成はHTMLとCSSという構成とデザインのマークアップ言語とその他にJavaScriptなどのデータを扱うプログラミング言語…

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン ：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。 目次 グリッドデザインで画像に文字を重ねるソースコード 画像の中央に文字を重ねる 画像の右上に文字を重ねる 画像の左上寄りに文字を重ねる 文字の位置取りを余白で調節する 区分けしたレイアウトで画像に重なる文字を整序させる 画像の中央の下のスペースの中央に文字を重ねる 文字を整序して位置取りを余白で調節する 文字の幅を確保しながら画像に重ねる グリッドデザインで画像に文字を重ねるソースコード 画像に文字を配置するスペースの割合を計算する 計算されたスペースの中に文字を実際に配置する CSS のdisplayのgr…