よそ様のブログやサイトを見ていると、、、
リンクのアイコンが付いてる
自分もやりたいな、、、と思いつつも
やり方が解らないからやってませんでした
んが
ChatGPTに聞いたら出来るかな？
ちょっと聞いてみるか。。。
※注意
この記事はBlogger、テーマはF-Lightでのカスタマイズです
他のテーマ、ブログサービスでは確認できておりません
Blogger、F-Light以外の方は参考までに
リンクアイコンを自動で貼付け
聞いてみたら意外とあっさり元となる答えを教えてくれたんですが、、、
それからの調整で苦労しました
素人で知識がないから、、、
ChatGPTに聞く～やってみる～ChatGPTに聞く～やってみる、、、
なんとかできました
外部リンク
※自分のXに飛びます
内部リンク
※当ブログのホームに飛びます
ブログ全体ではなく、記事内にリンクアイコンが付くようにしました
ホームでもアイコン付くようにすると処理が面倒臭いのよ、、、
今後、変更して新たな要素が出てきたらまた処理、、、
面倒なんでホーム（ＴＯＰページ）はやめました(^^;
アイコン付くようにするだけで出来る男感がでるな（笑）
アイコンの準備
アイコンはSVGを使うのですが、、、
F-Lightは標準でSVGアイコンが幾つかアップされてます
その中に外部リンクのアイコンはあったのでそれを使いました
内部リンクアイコンはなかったので
Fontawesomeからダウンロード
linkで検索すると一番に出てきました
コレ使います
ダウンロードしてください
テキストとして見たいわけです
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>これをBloggerにアップする為に少し書き換え
<symbol id='svg-internal-link' viewBox='0 0 640 512'><path d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/></symbol> これをHTMLの編集で <!-- SVG --> に追加します
尚、このようにダウンロードしたアイコンコードを個別に使用する場合は、HTML内や専用ページ内等にライセンスを記載しておいたほうが無難なようです。
F-Light製作者／ふじやんさん
F-Lightは記載されていますのでなにもしなくてもOKです
HTML編集
アイコンの準備ができたらHTMLの編集です
というかF-Light使ってる方ならコピペで終わります
まず外部も内部も両方アイコンが付くコード
<!-- リンクアイコン自動追加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// 記事内のすべてのリンクを取得
const articleLinks = document.querySelectorAll('.post-body a');
const currentDomain = window.location.hostname; // 現在のドメインを取得
articleLinks.forEach(link => {
try {
const url = new URL(link.href); // URLオブジェクトを作成
// figure、separator、#tocタグを含むリンクを除外
if (!link.closest('figure') &!link.closest('.separator') &!link.closest('#toc')) {
// 内部リンクの場合（同じドメイン）
if (url.hostname === currentDomain) {
link.classList.add('internal-link'); // 内部リンク用のクラスを追加
// 内部リンク用のSVGアイコンを作成
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgIcon.setAttribute('aria-label', '内部リンク');
svgIcon.classList.add('svg', 'svg-internal-link');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#svg-internal-link');
svgIcon.appendChild(use);
// アイコンをリンクに追加
link.appendChild(svgIcon);
// 外部リンクの場合（異なるドメイン）
} else {
link.classList.add('external-link'); // 外部リンク用のクラスを追加
// 外部リンク用のSVGアイコンを作成
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgIcon.setAttribute('aria-label', '外部リンク');
svgIcon.classList.add('svg', 'svg-external-link');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#svg-external-link');
svgIcon.appendChild(use);
// アイコンをリンクに追加
link.appendChild(svgIcon);
}
}
} catch (error) {
console.error('リンクの解析中にエラーが発生しました:', link.href, error);
}
});
});
</script>これを</body>の前に貼付けてください
外部リンクだけにアイコンが付くコード
<!-- 外部リンクアイコン自動追加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// 記事内のすべてのリンクを取得
const articleLinks = document.querySelectorAll('.post-body a');
const currentDomain = window.location.hostname; // 現在のドメインを取得
articleLinks.forEach(link => {
try {
const url = new URL(link.href); // URLオブジェクトを作成
// figure、separator、#tocタグを含むリンクを除外
if (url.hostname !== currentDomain &!link.closest('figure') &!link.closest('.separator') &!link.closest('#toc')) {
link.classList.add('external-link'); // 外部リンク用のクラスを追加
// SVGアイコンを作成
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgIcon.setAttribute('aria-label', '外部リンク');
svgIcon.classList.add('svg', 'svg-external-link');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#svg-external-link');
svgIcon.appendChild(use);
// アイコンをリンクに追加
link.appendChild(svgIcon);
}
} catch (error) {
console.error('リンクの解析中にエラーが発生しました:', link.href, error);
}
});
});
</script>お好きな方を使ってください
アイコンが付かないようにしてます
'が多くて見難い、、、
と思ったんですが直せません
Google先生に聞いても、ChatGPTに聞いても
素人には他の書き方が判らない(^^;
玄人さん、これって綺麗にできない？
作っている途中に<more>タグにもアイコンが付くけど、、、
<span>で除外してみたり、、、
tocで目次も除外したいのに消えない、、、
あっ、Google先生に全く聞いてないわ！！
そういやぁ、誰か同じ事やってる人いるだろう。。。
なんで最初にGoogle先生に聞かなかったんだろう。。。
もしかしたら今までの時間は無駄だったのかも。。。
その時に参考にしたのが
【 QooQ カスタマイズ 】 Blogger ブログでリンクの装飾を CSS でカスタマイズ 【 外部リンクアイコン他 】
ここでは、外部リンクと内部リンクを区別するため、a タグにリンクアイコンを付ける方法を紹介します。また、マウスカーソルがリンクの上に乗ったとき、色が変わる調整も一緒にやっています。
indoor-days.blogspot.com
結果的にChatGPTに聞いて作ったコードで上手く動いてます
途中で悩んだ<more>タグに付いてたアイコンは、最終的に<more>タグ指定していないのに消えました。。。
記事内のリンクを取得するコードが変わったのかな？？？
アイコンのサイズ調整
CSSを追加でサイズ調整できます
ここにCSSを追加します
.internal-link svg {
margin: 0 4px 0 3px;
vertical-align: -6%;
font-size: 1.5m;
}
.external-link svg {
margin: 0 4px 0 3px;
vertical-align: -6%;
font-size: 1.3rem;
}まとめ＆注意点
今のところブログ内を見て回っても変な所はありません
素人がChatGPTに聞いて、こんなもんが作れるとは凄い時代ですね。。。
た～だ～、素人なんでChatGPTに聞いた事が間違っていてもそれを間違いだと気が付いてない可能性もあります
なにか不具合あってもコード修正とか、新たなコードを作るなんて対応はできませんのでご自身で解決してください
それと、、、
不具合ではないんですがチェックしている時に気になったのは、、、
画像のすぐあとにリンク貼ってたり、引用や枠の後にリンク貼っている場合
記事書いている時の改行の仕方によるんですが、、、
画像要素を閉じる</div>が文章のあとにきてしまっている時
そうすると文字も画像要素と捉えてリンクアイコン付きません
画像の所で改行するとclassがseparatorになったりします
こうなるとその行は画像要素と判断してリンクアイコン付きません
HTMLビューで見ないと判らないので注意してください
画像アップしてShift押しながら改行したりするとこんな感じになる場合があると思います
玄人さんはHTMLビューで記事を書くようなんですが、自分みたいな素人は作成ビューで記事を書くのでHTMLビューでチェックするまで気が付きません
今回のコード作ってテストしている時、これがどうしてか理解できず慌てました。。。
普通？は作成ビューで記事書く人が多いと思います
アレ？と思ったら、こういう所をチェックしてみてください
昔の記事をチェックしてみたら、、、
何故か <separator> タグが付いてない画像がめちゃめちゃある、、、
山の日記なんか画像ばっかりです、、、
全て手作業で <separator> タグをつけるなんて嫌だ、、、
ちょっとお見苦しい記事もありますが勘弁ししてください(^^;
<separator> タグが付いてない画像の除外の仕方がわからない。。。
素人がChatGPTに聞いて作った物です
何か間違い等があったら教えてください
m(__)m
その他カスタマイズ↓にまとめてます
ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi
BloggerのテーマをZEROからF-liteへ変更、カスタマイズの記事もここにまとめてます
kochimountaingo.blogspot.com
コメントを投稿
別ページに移動します