QooQ ヘッダーSVG化 /[CSSのみ]外部リンクにアイコン

2024年08月29日 2024年09月09日

久々、テンプレートメンテナンスにハマる。。

一度は断念したヘッダーをSVG化、twitterのマークを「X」にするため、

SVGを「Bootstrap」のアイコンに統一、外部リンクにアイコンをつけ、

ステマ規制用の文言を、遅ればせながら追加しました。

SVGを「Bootstrap」のアイコンに統一

「Twitter」のアイコンのままだったのよね。。いい加減「X」にしたいよな。

「Blogger」の公式テンプレートSVG画像アイコンもあるんですが、種類が少ない。

BloggerのSVG画像アイコン一覧

BloggerのSVG画像アイコンの一覧です。公式テンプレートEmporioのSVG画像アイコンの書き方です。

「Bootstrap」のアイコンは、そこそこ豊富なので、こちらに統一することにした。

（検索アイコンのみ「Blogger」のアイコンのまま）

Bootstrap Icons

Official open source SVG icon library for Bootstrap

ライセンスの記載

記載方法を探してみたんですが、特に決まりがあるわけではないようで、

上記ページのCDNの冒頭５行をコピー。

/*!
 * Bootstrap Icons v1.10.5 (https://icons.getbootstrap.com/)
 * Copyright 2019-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */

「QooQ」ヘッダーをSVG化

ダークモード対応のため、SVG化することにより、文字色を変更できるようにしたいわけです。

以前、当ブログのロゴをSVG作ろうとして、結局、PIN画像にしてしまったんですが、再挑戦！

こちらを参考にさせて頂き、「Inkscape」にて作成しました。

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法 | リモスキ

ライトモード

ダークモード

SVGの記載

上記ページの「短いタグに置き換える」方法を参考にさせて頂きました。

<svg style='display:none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
     <symbol id='ic_title' viewBox='0 0 43.392 6.879'>
　　　　　（タイトルロゴ）
    </symbol>
    <symbol id='ic_info' viewBox='0 0 16 16'>
       <path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/>
    </symbol>
    <symbol id='ic_home' viewBox='0 0 16 16'>
       <path d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z'/>
    </symbol>
	・・・
  </defs>
</svg>

タイトルロゴのCSS

.blog-logo {
    width:300px;
    height:40px;
    margin:0;
    fill: $(brand.font);(ブランドカラー部分の文字色)
}
@media (prefers-color-scheme: dark) {
  .blog-logo {
    fill: $(brand.color);(ブランドカラー)
  }
}

タイトルロゴの設置

画像表示を取り止め、＜data:title/＞２箇所を変更。

        <b:includable id='header-title'>
          <b:if cond='data:blog.pageType in {&quot;item&quot; , &quot;static_page&quot;}'>
              <p id='header-title'><a expr:href='data:blog.homepageUrl'><svg class='blog-logo' expr:aria-label='data:title'><use href='#ic_title'/></svg></a></p>
          <b:else/>
              <h1 id='header-title'><a expr:href='data:blog.homepageUrl'><svg class='blog-logo' expr:aria-label='data:title'><use href='#ic_title'/></svg></a></h1>
          </b:if>
        </b:includable>

CSSのみで外部リンクにアイコンをつけるる

こちらを参考にさせて頂きました。

[CSS SVG]外部リンクにアイコンを付けてみました。[Blogger QooQ]

アイコンをつけないリンクを特定する

投稿の現状を調査した結果、アイコン表示リンク対象外にしたのは、

【内部リンク】、【画像（jpg,gif）】、【ユーチューブ画像】、【カエレバ】、【ブログカード】

SVGをCSSのbackground-image向けコードに変換

こちらを使用させて頂きました。

SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール | 大石制作ブログ

また、色の変更は、background-imageコードを２種類作成し、指定しました。

外部リンクアイコンCSS

#single-content a[target=_blank]:not([href*="****.blogspot"]):not([href$=".jpg" i]):not([href$=".gif" i]):not(.youtubesm a):not(.cstmreba a):not(.blogcard a)::after {
    display: inline-block;
    vertical-align: baseline;
　　 margin-left:2px;
    width: 20px;
    height: 20px;
    content: "";
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%235f6527%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8.636%203.5a.5.5%200%200%200-.5-.5H1.5A1.5%201.5%200%200%200%200%204.5v10A1.5%201.5%200%200%200%201.5%2016h10a1.5%201.5%200%200%200%201.5-1.5V7.864a.5.5%200%200%200-1%200V14.5a.5.5%200%200%201-.5.5h-10a.5.5%200%200%201-.5-.5v-10a.5.5%200%200%201%20.5-.5h6.636a.5.5%200%200%200%20.5-.5z%22%2F%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M16%20.5a.5.5%200%200%200-.5-.5h-5a.5.5%200%200%200%200%201h3.793L6.146%209.146a.5.5%200%201%200%20.708.708L15%201.707V5.5a.5.5%200%200%200%201%200v-5z%22%2F%3E%3C%2Fsvg%3E')}
@media (prefers-color-scheme: dark) {
    #single-content a{
	    color: $(brand.color);
    }
    #single-content  a[target=_blank]:not([href*="****.blogspot"]):not([href$=".jpg" i]):not([href$=".gif" i]):not(.youtubesm a):not(.cstmreba a):not(.blogcard a)::after {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff462%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8.636%203.5a.5.5%200%200%200-.5-.5H1.5A1.5%201.5%200%200%200%200%204.5v10A1.5%201.5%200%200%200%201.5%2016h10a1.5%201.5%200%200%200%201.5-1.5V7.864a.5.5%200%200%200-1%200V14.5a.5.5%200%200%201-.5.5h-10a.5.5%200%200%201-.5-.5v-10a.5.5%200%200%201%20.5-.5h6.636a.5.5%200%200%200%20.5-.5z%22%2F%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M16%20.5a.5.5%200%200%200-.5-.5h-5a.5.5%200%200%200%200%201h3.793L6.146%209.146a.5.5%200%201%200%20.708.708L15%201.707V5.5a.5.5%200%200%200%201%200v-5z%22%2F%3E%3C%2Fsvg%3E')}
}

ステマ規制用の文言を表示させる

最近、色んなブログで見かけるようになって、気になっていたんですが、

当方が記載せねばならない対象になるのかどうかが、判断難しくないですか？

「任意」な気もするんだが、広告載せてるわけだし、この際、明記することにしました。

<div style='text-align: center;'><p><svg class='ic_info'><use href='#ic_info'/></svg><span style='font-size: 70%;'>当サイトではアフィリエイト広告を利用しています</span></p></div>

メッセージの最初に、インフォメーションのアイコンをつけ、モードにより反転させました。

CSSはこちら、、

.ic_info{
    height:16px;
    width:16px;
    fill:#4B4B4B;
}
@media (prefers-color-scheme: dark) {
  .ic_info {
    fill: rgb(240,240,240);
  }
}

追記

「SVG」って、CSSで色とかサイズを変更できるところが便利なわけですが、

外部リンクにアイコンをつける方法をCSSだけでやろうとすると、

background-image向けコードに変換するという方法になるわけです。

参考にさせて頂いた「mask-image」の使い方が、いまいち理解できず、、

色の変更が上手くゆかなくて、色を変更した２種類のSVGをつくったという暴挙？！

なんだか、コレ、改善の余地がありそうなので、引き続き調査することにします。

Blogger

#QooQ

QooQ ヘッダーSVG化 /[CSSのみ]外部リンクにアイコン

SVGを「Bootstrap」のアイコンに統一

ライセンスの記載

「QooQ」ヘッダーをSVG化

ライトモード

ダークモード

SVGの記載

タイトルロゴのCSS

タイトルロゴの設置

CSSのみで外部リンクにアイコンをつけるる

アイコンをつけないリンクを特定する

SVGをCSSのbackground-image向けコードに変換

外部リンクアイコンCSS

ステマ規制用の文言を表示させる

追記

カテゴリー

ハッシュタグ

アーカイブ

SVGを「Bootstrap」のアイコンに統一

ライセンスの記載

「QooQ」ヘッダーをSVG化

ライトモード

ダークモード

SVGの記載

タイトルロゴのCSS

タイトルロゴの設置

CSSのみで外部リンクにアイコンをつけるる

アイコンをつけないリンクを特定する

SVGをCSSのbackground-image向けコードに変換

外部リンクアイコンCSS

ステマ規制用の文言を表示させる

追記

JetTheme main.js をインライン化してみる

JetTheme で Bootstrap を学んでみよう

猫用 ドーナツ型 エリザベスカラー を手作り🍩【 型紙 あり】

「君の瞳に恋してる」「キャッツ・アイ」ネコ名曲劇場

[CSS,HTMLのみ] ハンバーガーメニュー開閉ボタンをオシャレに

Blogger ブログカード 引用デザイン をオシャレに

PageSpeed CLS改善 の鍵は、アスペクト比 の設定

カテゴリー

ハッシュタグ

アーカイブ

猫用ドーナツ型エリザベスカラーを手作り🍩【型紙あり】

Blogger ブログカード引用デザインをオシャレに

PageSpeed CLS改善の鍵は、アスペクト比の設定