Internet Explorer、ダメ絶対!

あなたが使用している Internet Explorer というブラウザはとても古いものです。
言ってしまえば、百害あって一利なしの老害です。
世界中で、多くのWEB制作者があなたの Internet Explorer のせいで苦悩しています。

どうか、最新のモダンブラウザ(EdgeやFirefox、Google Chrome)をお使いください。

Google Chromeをダウンロード
yStandardにアイコンを追加する方法

yStandardにアイコンを追加する方法

5月 14, 2020
ブログ

先日、このサイトにyStandardを導入しました。そして、プロフィールように基本で追加されているもの以外も欲しかったので、テーマにアイコンを追加しました。

SVGアイコンを取得

InkScapeでアイコンを描くかウェブ検索で使いたいアイコンを探しましょう。
そして、HTMLに変換します。変換する方法は何でもいいです。
今回はTelegramのアイコンを追加したかったので、iconmonstrからInline版のものを使いました。

テーマにアイコンを追加

テーマエディタでyStandardを編集、library/simple-icons/brand-icon.jsonを編集していきます。
まずはSVGアイコンを追加していきます。書式は以下の通りです。

"IconName":{"title":"IconName","slug":"IconSlug","svg":"<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title/>IconName</title/><path d=\"SVGEmbed\"/></svg/>","path":"SVGEmbed","source":"IconSource","hex":"ColorCode"},

IconNameにはアイコン名
SVGEmbedにはSVGの埋め込み用コード
を入れていきます。このコードを入れる場所はどこでもいいです。

色の追加

このままだとSVGに色が反映されないので、CSSを編集します。
css/ystandard.cssを開き、以下のものを追加します。

--sns-color-IconSlug:#ColorCode;
.sns-bg--IconSlug{background-color:var(--sns-color-IconSlug)}
.sns-text--IconSlug{color:var(--sns-color-IconSlug)}

最初は1行目、そのあとは他のアイコンがある位置に入れてください。

SNSのリストに追加

inc/sns/class-sns.phpを開き、追加したいSNSアイコンの名前を入力していきます。
書式は以下の通りです。

'IconSlug'   => [
					'class'      => 'IconSlug',
					'option_key' => 'IconSlug',
					'icon'       => 'IconSlug',
					'color'      => 'IconSlug',
					'title'      => 'IconSlug',
					'label'      => 'IconSlug',
				],

CSSの追加

今回使ったアイコンには、インラインCSSが含まれていました。
なので、それを追加するコードも書きます。
inc/icon/class-icon.phpを編集します。(122行目から)

$style  = empty( $style ) ? $icons[ $name ]['style'] : $style;
$class = "icon--${name}";
<svg class=\"${class}\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"${style}\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><title>${title}</title><path d=\"${path}\"/></svg>

これを追加して、あとは反映されるのを待つだけです。