Web全般 on Indexing my brain

ブログの画像をWebPに変えた話とSafariで表示されない件について

Thu, 26 Nov 2020 13:50:31 +0900

画像の形式をWebPに変えた

本ブログにて、Lighthouse使ってみると、表示速度あたりで怒られていたので、
まずはサムネ画像をWebPに変えてみました。

WebPとは、Googleが開発しているオープンな静止画像フォーマットで、
トラフィック量軽減と表示速度短縮を目的しています。（wikiから拝借）

WebPを採用した結果

以下のツイートのとおりです。

たまたま100が撮れただけで、もう一回テストしみると少し落ちました。
それでも90台はキープできていそうです。

個人ブログ（Desktop版）のPerformanceが78だったので、画像をwebpに変えたら一気に100になった🎊
（モバイルは未だに70切ってる😇） pic.twitter.com/VNxztIsR28
— hon-D (@yyh_gl) November 19, 2020

Safariでは注意が必要

多くのブラウザでWebPへの対応が既に完了しています。
ただし、Safariに関してはv14でようやく対応しました。

対応状況

Safari v14は2020年9月17日（日本時間）にリリースされたばかりなので、
まだ画像をちゃんと見れないユーザが多く存在すると思われます。

リリースノート

Safariのwebp対応ってバージョン14からだったんだ😇

自分のブログに来る人の90%弱がSafariじゃないから、まぁいいか←
— hon-D (@yyh_gl) November 26, 2020

自分のブログに来る人の90%弱がSafariじゃないから、まぁいいか←

嘘です、10%ほどの方々すみません🙇‍♂
WebPにしたのはサムネ画像だけで、記事本文内の画像はWebPじゃないので許してください。。。

【OGP】リンク先のサムネイル画像を表示できるようにした話

Mon, 17 Jun 2019 09:00:00 +0900

Twitter のリンクにサムネイル画像が表示されない

このように Twitter でブログのリンクを載せても、サムネイルが表示されない。

はてなブログをやっていたときは、何もしなくてもサムネイルが表示されていました。

トップ画像をよしなにサムネイルにしてくれるのかなぁっと思っていましたが違ったんですね…。

どうやったらサムネイル画像が表示されるか

Twitter や Facebook などの SNS でタイトルやサムネイルといったWebページの情報を表示するには、 Open Graph Protocol（OGP）というものを設定する必要があります。

OGP を設定することで Twitter や Facebook でサムネイル付きのリンクを表示できます。

こちらのサイトで詳細が説明されています。

OGP の設定

今回設定する OGP 情報は以下のとおりです。

og:title
og:type
og:url
og:description
og:image

これらの情報を head タグ内に埋め込みます。

<meta property="og:title" content="【Go + レイヤードアーキテクチャ】DDDを意識してWeb APIを実装してみる">
<meta property="og:type" content="article">
<meta property="og:url" content="https://tech.yyh-gl.dev/blog/go_web_api/">
<meta property="og:description" content="hoge">
<meta property="og:image" content="https://tech.yyh-gl.dev/img/2019/06/go_web_api/featured.png">

ただし、僕の場合、Hugo のテーマの方で og:image 以外は設定してくれていました。
したがって、今回は og:image だけを追加で設定します。

【HTML + CSS + Prism.js】ブログの見た目を整えた話

Sun, 16 Jun 2019 09:00:00 +0900

シンタックスハイライト導入

このブログ、ちょっと前までコードのシンタックスハイライトが効いていませんでした。

正確には対応していない言語が（めちゃくちゃ）ありました。

このとおり、 Goにも対応していませんでした…。

もともと、このブログのテーマは Hugo Themes （Hugo 公式テーマショップ的なの）に
あったものを使わせてもらっているのですが、さすがに対応していない言語が多すぎたので、
シンタックスハイライト部分だけ個別に導入することにしました。

Prism.js

さっそく、「HTML シンタックスハイライト」で調べてみました。

そしたら、だいたい以下の3つが出てきました。

どれにしようか迷ったのですが、見た目が一番好みだった Prism.js を使うことにしました。

導入

導入方法については記事がたくさんあるので、そちらをご覧ください。

導入後

きれいですねー

今回導入した Prism.js のプラグインは、

Line Highlight：行指定した箇所をハイライトする機能（上記画像内では使用していません）
Line Numbers：行番号を表示する機能
Show Language：右上に言語名を表示している機能

の3つです。

困ったこと

行番号が表示されない

行番号を表示するには、

<pre class="line-numbers"><code class="language-c">
コード
</code></pre>

上記コードのように、表示するコードスニペットに対して、
line-numbers というクラスを付与してあげるだけでOKです。

…が、なぜか行番号が他の要素の下にいってしまい、見えなくなっていました。
したがって、prism.css を修正して行番号が他の要素の上に来るようにしました。

リスト表示の行間が異様に広い

Prism.js 導入後…