些細な日常

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのインデックスページ（トップ、アーカイブ、ラベルなど）の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。
Three types of devices by coffeebeanworks [CC0], via Pixabay
調べると必要なのはスマホとパソコンで百文字と二百五十文字程度――文字サイズによって前後するし、小さなサムネイル画像と横並びの文章のデザインの場合は八十文字と百七十文字前後まで減る――なのにテンプレートはデフォルトで千文字が記事の本文の冒頭から抜き取られる設定になっているんだ。
最も多く必要なパソコン版の文章だけのスニペットで表現される文字数からしても七百五十文字程度が無駄だと思うし、ブログの表示速度を下げて利便性も下げるか…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableの記事／追加ページにはJSON-LDの構造化データがデフォルトで付けられている。

目次
Google推奨のJSON-LDの構造化データはSEO対策に相応しいBloggerの新テーマのJSON-LDの構造化データのソースコードインデックスページの記事毎のJSON-LDの構造化データを削除するインデックスページに専用のJSON-LDの構造化データを付ける方法JSON-LDの構造化データのソースコードのサンプル新テーマのテンプレートへのマークアップの仕方

Google推奨のJSON-LDの構造化データはSEO対策に相応しい
JSON-LD（推奨）ページのheadやbodyに<script>タグで埋め込まれたJavascriptの表記法です。マークアップは利用者に見える文章で挿入されてませんが、…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像（og:image）が記事の抜粋の画像の掲載数に一致している。
OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。

旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではイン…

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…

所有サイトが複数の場合に他の所有サイトのホームページやブログやソーシャルメディアを指定するhtmlのマークアップに「rel="me"」が使えるんだ。
三つの「rel="me"」の記述法
head内にlinkタグで指定する<link href="所有する外部サイトのURL" rel="me">body内にaタグで指定する<a href="所有する外部サイトのURL" rel="me">body内にareaタグで指定する<area href="所有する外部サイトのURL" rel="me">
実際にリンクを貼るならばbody内のaタグやareaタグに「rel="me"」を追加する。リン…