Google Fontsのアイコンを利用して外部リンクアイコンを加えるメモ

使い方や解説等は記事下部の関連・参考リンクを参照。

前提条件として「Material Symbols」と「Material Icons」の2種類が存在していることに注意。前者の方が新しいようでアイコン数が多い。

マテリアルシンボルガイド | Google Fonts | Google for Developers
https://developers.google.com/fonts/docs/material_symbols?hl=ja

マテリアルアイコンガイド | Google Fonts | Google for Developers
https://developers.google.com/fonts/docs/material_icons?hl=ja

画面左上のGoogle Fontsロゴの下の「Filters」で表示した左メニューのstyleから切り替えが可能。

今回は「Material Symbols」の方を利用する。

まず、HTMLヘッダー部分(<head>～</head>の間)に以下のコードを挿入。

Google公式のマテリアルシンボルガイドでは読み込むアイコンを指定して読み込みサイズを減らせ的なことが書いてあるが、Bloggerでは上手くいかなかったので絞り込みせず。全部読み込むと読み込みサイズが約295KBのようだが、まあこれくらいなら許されるだろう(と思いたい)。
アイコンの種類が事足りるのであればIconsの方が軽いくて良いような気もする。

Material Symbolsの場合

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

Material Iconsの場合

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

次にCSSにaタグが「target="_blank"」の場合にアイコンを付与するコードを追加。

今回は「open_in_new」(e89e)のアイコンを使用。「Material Symbols」と「Material Icons」では同じアイコンでもCode pointの値が異なるので注意。

そのままだとアイコンが文字に近すぎるので適当にmarginで間隔をとる。また太字になるとかなり見にくくなるので太さをnormalで固定。
あと、若干上にズレている感があるのでvertical-alignで少し下へずらす。

a[target="_blank"]:after {
  font-family: "Material Icons";
  content: "\e89e";
  font-weight: normal;
  margin-left: 0.2em;
  vertical-align: -2px;
}

上記で一応完成だが、自サイト内リンクでも「target="_blank"」を使用している部分があるので除外処理を入れる。

CSSは後ろに記述したものが上書きされるので、設定したURLに該当する場合はcontentとmarginをゼロにする。
URLの判定は前方一致っぽいので、サブドメインが異なる場合はそれぞれ追加が必要な模様。

a[href^="https://www.cytn.info/"]:after {
  content:"";
  margin-left:0;
}
a[href^="https://tw.cytn.info/"]:after {
  content:"";
  margin-left:0;
}

自サイト内リンクでも文中に別記事へのリンクを入れる場合に、判りやすいようにリンクアイコンを入れた方がいいかなとも思うが、自サイト内リンクに一括で入れると色々と不都合が起こりそうなので、個別にclass設定した方がいいのかなと思ったり。

ここでは「link」(e157)を使用。大きさなど諸々に手を加える。

a.inside:after {
  font-family: "Material Icons";
  content: "\e157";
  font-weight: normal;
  font-size: 125%;
  margin-left: 0.2em;
  vertical-align: -2px;
}

これをaタグで上記で設定したinsideのclassの指定をする。

<p><a class="inside" href="https://tw.cytn.info/">千屋通信所-台湾旅遊情報站</a></p>

千屋通信所-工作資料站

2026/06/01

Google Fontsのアイコンを利用して外部リンクアイコンを加えるメモ

関連・参考リンク

0 件のコメント:

コメントを投稿