些細な日常

htmlのリソースヒント（日本語訳）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。
速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。
Luminescence of cars running on a dark road by Mateusz Dach [CC0], via Pexels

目次
リソースヒントのpreconnectの仕組みlinkタグの「rel="preconnect"」の記述法サイトの表示速度を上げ易くする条件WebPagetestで事前接続を調べる方法WebPagetestの通常の入力画面の日本語訳事前接続…

Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと悩まざるを得ないわけなんだ。
公式サイトでは情報が薄いみたいだけど――ヘルプにはマークアップの基礎知識しか紹介されてない――しかし調べると独自タグの出力する内容を載せているBlogger Codeなどの専門サイトが見付かってカスタマイズにとても役立つ。
Bloggerの独自タグを実際に出力される内容に置き換えて分解するとテンプレートのソースコードをさらに細かく作り替えられるようになる。
前々から気がかりだったBloggerブログのhead内のカスタマイズをついに行ってみたいと思い立った。

目次
Bloggerブログのhea…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのソースコードの冒頭付近にnormalize.cssが付いている。

normalize.cssはcssの標準化を意味していてブラウザ毎のサイトのhtmlのデフォルトのデザインの互換性を保つためのcssの独自のソースコードなんだ。
normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。
normalize.cssについて via ニコラス・ギャラガー（訳出）
開発者の一人がニコラス・ギャラガーという。昨年からモバイルで使い易くなったウェブアプリのTwitter Liteの制作にも参加したらしい。世界有数のソーシャルメディアのTwitterに関与するとは相当な経歴…

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。

目次
グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねる

グリッドデザインで画像に文字を重ねるソースコード
画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置する
cssのdisplayのgr…

サイト作成のためにAndroidスマホのhtml編集の無料アプリをPlayストアで探したらWebMaster's HTML Editor Liteが使い易くて良いと思った。

目次
WebMaster's HTML Editor LiteのレビューWebMaster's HTML Editor Liteの使い方画面の最上段の五つのスイッチスイッチを押した後に出る選択肢NEW FILEを作成する際の五種類のタイプPreferencesのSettings（設定）の七項目と内容SettingsのOther（その他）の五項目と内容画面の最下段一段目のサブツールバー検索メニューの三つの操作方法画面の最下段二段目のメインツールバー

WebMaster's HTML Editor Liteのレビュー
入力画面 via WebMaster's HTML Editor Lit…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでは記事ページに新しい投稿や前の投稿のページネーションがデフォルトで付いてないけれどもhtml編集のカスタマイズによって付ける方法が見付かって些細な日常で取り入れてみた。

ソースコードでは最初からページネーションのスペースが取られていて表示しないようにしているだけだからブログの記事ページに設置するための考え方は一から始めるよりは速やかなのが助かる。

目次
ページネーションを取り入れる二つの手順独自タグでページネーションを設定する方法（Sohoは省略可能）独自タグでページネーションを配置する方法cssでページネーションにデザインを付けるページネーションの位置取りを調整する方法ページネーションの上下の余白を調整する方法

ページネーションを取り入れる二つの手順
テンプレートに設定する必要なリンクを生成するテ…

何度も落とされてもう無理だと思いながらアドセンスに合格した瞬間にはガッツポーズを止められなかった。嬉しさの余り、悲しみを余儀なくされた数だけか、何度も繰り返して飛び上がるように部屋を駆け回ってしまうのも造作なかった。どうしても承認されないわけには行かない気持ちが非常に強かったためだろう。
A woman surrounded by many soap bubbles by Alejandro Alvarez on Unsplash
改めてアドセンスに合格できた理由を考える
大前提なのはAdSenseヘルプのコンテンツポリシーに違反しないサイト作成だけど、しかし殆ど適合しても承認されず、最も厳しいと感じるのが不合格の通知の承認されませんでしたというメールの「不十分なコンテンツ」なんだ。落とされる度に目にするし、具体的な指示がなくて、一体、何がどうなっているのかも良く分からない。大丈夫だと思って申…

サイト作成でhtmlの番号なしリストのulや番号付きリストのolを使ってcssの中寄せ：text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。
cssのlist-style-positionのinsideを使う
考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。
同時にcssのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。
cssのlist-style-positionのinsideを使うとリストタグのマ…

サイト広告のアドセンスを使う場合には様々な規約違反を防がなくてはならない。ペナルティーから一度でもライセンスを失うと取り戻せなくなるかも知れない。サイトにアドセンスのサイト広告を載せたら利用規約やプログラムポリシーに細心の注意を払って運営するのが大切だ。

アドセンスの様々な規約違反の中にプライバシーの項目が含まれている。サイトに載せたサイト広告での訪問者の個人情報の取り扱いについてプライバシーポリシー／個人情報保護方針を設置する必要がある。
サイトにアドセンスのプライバシーポリシーをどのように設置するかの方法には法律が影響するし、個人サイトと法人サイトで記述は幾らか変わると思う。欠かせないアドセンスのプライバシーポリシーの基本部分は同じにせよ、概して後者は前者よりも商取引での制限が社会的にさらに加えられるだろう。
僕は個人サイトを運営しているので、アドセンスのプライバシーポリシーの基本部分をし…

Googleの無料サービスでアクセス解析のアナリティクスをサイトのホームページやブログに使う場合にはプライバシーポリシーを同時に設置するように利用規約で定められている。

法律が影響するから個人サイトと法人サイトで、プライバシーポリシーの捉え方が幾らか変わる。基本部分は同じで――アナリティクスの利用規約のプライバシーに示される以外ではない――記述では前者よりも後者に社会的な制限が強い部分が商取引に関連する法律に応じて付け加えられそうだ。僕は個人サイトをやっているからアナリティクスのプライバシーポリシーの基本部分を覚えてサイト運営に取り入れたい。

目次
アクセス解析の個人情報保護の必要性アナリティクスの利用規約のプライバシーサイトのプライバシーポリシーの設置アナリティクス用の一般的な記述例広告向け機能の追加項目の記述例EUユーザーの同意ポリシーへの対応

アクセス解析の個人情報保護の必要性
サイトで訪問…

Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン（縦横を均等に表示する／タイル張り）を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。
サイト作成でcssのGrid Layout：displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。

目次
Bloggerの投稿画像の横並びやグリッドデザインの前提条件個別の記事にcssのGrid Layoutを取り入れる記述についてBloggerの投稿画像にdisplayのgridを的確に反映させる新テーマでのソースコードの修正点旧テーマでのソースコードの修…