moris/blogPosts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

矢印の歪み修正&全体的に太くした

Browse Source
This commit is contained in:
moris 2025-03-27 12:29:55 +09:00
parent 7b2ecad97f
commit b0aa76080d
1 changed files with 4 additions and 4 deletions

8
Posts/external-link-icon.md
View File

@ -1,7 +1,7 @@
---
title: CSSのみで外部リンクにアイコンをつける
description:
thumbnail: 'data:image/svg+xml;utf-8,<svg viewBox="0 0 199 149" xmlns="http://www.w3.org/2000/svg"><path d="m61 124c-6 0-11-5-11-11v-77c0-6 5-11 11-11h39v11h-39v77h77v-38h11v38c0 6-5 11-11 11zm26-29l-8-8l51-51h-20v-11h39v39h-11v-20z"/></svg>'
thumbnail: 'data:image/svg+xml;utf-8,<svg viewBox="0 0 199 149" xmlns="http://www.w3.org/2000/svg"><path d="m61 124c-6 0-11-5-11-11v-77c0-6 5-11 11-11h39v11h-39v77h77v-38h11v38c0 6-5 11-11 11zm27-30l-8-8l50-50h-20v-11h39v39h-11v-20z"/></svg>'
emoji:
date: 2025-03-02
category: Tech
@ -30,9 +30,9 @@ https://mi.moris.day/@moris
## 表示するアイコン
[Google Material Symbols](https://fonts.google.com/icons)のOpen In Newというアイコンを使いました。人力圧縮でオリジナルの300Bから190Bまで圧縮されています。
<svg style="display:block; width:128px; height:128px; margin:auto" viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M10,99C5,99 0,94 0,89V10C0,5 5,0 10,0H50V10H10V89H89V50H99V89c0 5-5 10-10 10ZM37,70l-7-7L80,10H60V0H99V39H89V19Z"/></svg>
<svg style="display:block; width:128px; height:128px; margin:auto" viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M11,99C5,99 0,94 0,88V11C0,5 5,0 11,0H50V11H11V88H88V50H99V88c0 6-5 11-11 11ZM38 69l-8-8l50-50H60V0H99V39H88V19Z"/></svg>
```
<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M10,99C5,99 0,94 0,89V10C0,5 5,0 10,0H50V10H10V89H89V50H99V89c0 5-5 10-10 10ZM37,70l-7-7L80,10H60V0H99V39H89V19Z"/></svg>
<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M11,99C5,99 0,94 0,88V11C0,5 5,0 11,0H50V11H11V88H88V50H99V88c0 6-5 11-11 11ZM38 69l-8-8l50-50H60V0H99V39H88V19Z"/></svg>
```
オリジナル: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:open_in_new:FILL@0;wght@400;GRAD@0;opsz@24
@ -121,7 +121,7 @@ a[target="_blank"]::after {
height: .5em;
margin-inline: 2px;
background-color: currentColor;
mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M10,99C5,99 0,94 0,89V10C0,5 5,0 10,0H50V10H10V89H89V50H99V89c0 5-5 10-10 10ZM37,70l-7-7L80,10H60V0H99V39H89V19Z"/></svg>');
mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><path d="M11,99C5,99 0,94 0,88V11C0,5 5,0 11,0H50V11H11V88H88V50H99V88c0 6-5 11-11 11ZM38 69l-8-8l50-50H60V0H99V39H88V19Z"/></svg>');
vertical-align: super; /* テキストよりちょっと上に配置 */
}
```