Bloggerで利用可能なSVGアイコンの独自タグによるマークアップ

Bloggerの2017年の新テーマから導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。

ブログアドレス/responsive/sprite_v1_6.css.svg

Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。ブログで使用中のメニューと検索とフェイスブックとツイッターとリンクのBloggerのSVGアイコン

ブログでどのように表示するかは二つの方法があってBloggerの独自タグでマークアップを呼び出すか通常のインラインSVGで記述する。どちらも使う場合はHTMLのマークアップ（テンプレートならばHTML編集、ウィジェットならばHTML / JavaScript、投稿ならばHTMLビューなど）で行う。独自タグはテンプレートのxmlファイルでしか動作しないけれども通常のインラインSVGはテンプレートのxmlファイルでもその他でも大丈夫だ。本稿では独自タグでブログに表示するマークアップの仕方について取り上げる。

関連ページ

Bloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ

BloggerのSVGアイコンの独自タグはブログのテーマのwidgetタグの内外でグローバルに使うことができる。

どんなSVGアイコンが用意されているか
アイコンの種類：アイコン名とアイコンID
SVGアイコンの独自タグの一般的な使い方
独自タグ①svgIconのinclude
独自タグ②svgIconButtonのinclude
SVGアイコンの独自タグの種類毎の使い方
独自タグ①dataなしのアイコン名のinclude
独自タグ②dataありのアイコン名のinclude
SVGアイコンのデザインの変更について
色と大きさのCSSのサンプル

どんなSVGアイコンが用意されているか二十六種類がBloggerブログの「responsive/sprite_v1_6.css.svg」のアイコンファイルに用意されていて利用することができる。アイコンの種類：アイコン名とアイコンIDSVGアイコンの独自タグのマークアップではアイコンを表示するためにアイコン名とアイコンIDのどちらか一つか両方が必要になる。

Bloggerの公式のSVGアイコン

アイコンの種類アイコン: アイコン名; アイコンID

メール: emailIcon; ic_24_email_dark
フェイスブック: facebookIcon; ic_24_facebook_dark
グーグルプラス: googlePlusIcon; ic_24_googlePlus_dark
リンク: linkIcon; ic_24_link_dark
ピンタレスト: pinterestIcon; ic_24_pinterest_dark
ツイッター: twitterIcon; ic_24_twitter_dark
追加ボックス: なし; ic_add_box_black_24dp
戻り矢印: backArrowIcon; ic_arrow_back_black_24dp
進み矢印: forwardArrowIcon; ic_arrow_forward_black_24dp
チャット吹き出し: なし; ic_chat_bubble_black_24dp
チェックボックス: なし; ic_check_box_black_24dp
チェックボックスの外形: なし; ic_check_box_outline_blank_black_24dp
左山形紋: なし; ic_chevron_left_black_24dp
右山形紋: なし; ic_chevron_right_black_24dp
閉じる: closeIcon; ic_close_black_24dp
簡略へ縮める: chevronUpIcon; ic_expand_less_black_24dp
詳細へ伸ばす: chevronDownIcon; ic_expand_more_black_24dp
メニュー: menuIcon; ic_menu_black_24dp
コメント状態: commentIcon; ic_mode_comment_black_24dp
水平の詳細: なし; ic_more_horiz_black_24dp
垂直の詳細: verticalMoreIcon; ic_more_vert_black_24dp
人物: defaultAvatarIcon; ic_person_black_24dp
Blogger投稿: flatBloggerIcon; ic_post_blogger_black_24dp
RSSフィード: なし; ic_rss_feed_black_24dp
検索: searchIcon; ic_search_black_24dp
共有: shareIcon; ic_share_black_24dp

公式テーマに備わってないものか、独自タグに使用できるアイコン名がないものもある。SVGアイコンの独自タグの一般的な使い方独自タグ①svgIconのincludeブログにsvgタグとuseタグで表示される。マークアップ<b:include data='{ iconId: "アイコンID", iconClass: "クラス名" }' name='svgIcon'/>出力結果<svg class='svg-icon-24 クラス名'> <use xlink:href='/responsive/sprite_v1_6.css.svg#アイコンID' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg>定義用のマークアップ<b:includable id='svgIcon'> <svg class='svg-icon-24'> <b:class expr:name='data:iconClass'/> <use expr:xlink:href='"/responsive/sprite_v1_6.css.svg" fragment data:iconId' xmlns:xlink='http://www.w3.org/1999/xlink'/> </svg> </b:includable>

参考サイト

Extraire des icônes SVG [svgIcon]

独自タグ②svgIconButtonのincludeブログにbuttonタグとsvgタグとuseタグで表示される。マークアップ<b:include data='{ iconId: "アイコンID", iconClass: "クラス名" }' name='svgIconButton'/>出力結果<button class='svg-icon-24-button クラス名'> <svg class='svg-icon-24'> <use xlink:href='/responsive/sprite_v1_6.css.svg#アイコンID' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> </button>定義用のマークアップ<b:includable id='svgIconButton'> <button class='svg-icon-24-button'> <b:class expr:name='data:iconClass'/> <svg class='svg-icon-24'> <use expr:xlink:href='"/responsive/sprite_v1_6.css.svg" fragment data:iconId' xmlns:xlink='http://www.w3.org/1999/xlink'/> </svg> </button> </b:includable>

参考サイト

Extraire des icônes SVG dans des boutons [svgIconButton]

二つの独自タグのincludeでSVGアイコンを取り込んで表示できる。nameが「svgIcon」だとsvgタグとuseタグ、「svgIconButton」だとそれらをbuttonタグで囲むマークアップとしてソースコードに出力されてブログのコンテンツとしてブラウザに表示される。何れもnameは予め決められていて英語の大文字と小文字が区別される。変えるとエラーで処理されず、ブログも停止するから注意を要する。デフォルトのクラス名の「svg-icon-24」がsvgタグに、「svg-icon-24-button」がbuttonタグに付くので、デザインのCSSやプログラムのJavaScriptなどに使用することができる。公式テーマの場合、デフォルトのクラス名を消去する使用中のSVGアイコンの色や大きさなどのデザインが崩れる。カスタマイズできるのはアイコンIDとクラス名で、それぞれに表示するアイコンの種類と使用する独自タグによって最も外側のsvgタグかbuttonタグのに追加するクラスを入力する。前者は必須項目だから常に入力する。後者は任意項目だから省略しても構わない（省略する場合は「iconClass:」と値のクラス名を一緒に消す）。includeタグの呼び出しの内容をincludableタグでカスタマイズすることができる。includableタグは何かのwidgetタグかdefaultmarkupタグの中でしか使うことができない。使うと定義された内容が前者ならば同じwidget内、後者も何かのwidgetのタイプを指定した場合は管理画面のレイアウトからガジェットを追加したときに同じwidget内の対応するincludeタグに反映する。defaultmarkupタグでブログ全体に共通の「common」のタイプを指定した場合はその時点でwidgetタグの内外の対応する全てのincludeタグに定義された内容が反映する。注意：コードを試したら「svgIcon」というincludableのidとincludeのnameの組み合わせで「data:iconClass」の部分が機能しないようで、マークアップは間違ってないと思うけど、それぞれの「data:iconClass」の部分を使うのを止めるか、idとnameの組み合わせを例えば「svgIcons」のように少し変えないと駄目かも知れない。SVGのデータを取り込むuseタグの「xlink:href」は古くて「href」を使うことが推奨されるとか「xmlns:xlink」の部分はなくてもブラウザがあるものと判断するなんてところ、またはsvgタグのクラス名や何かをカスタマイズすることができるようになる。その他、呼び出しのincludeタグのnameにアイコン名を入力して種類毎に表示することもできる。SVGアイコンの独自タグの種類毎の使い方独自タグ①dataなしのアイコン名のincludeブログにsvgタグとuseタグで表示される。マークアップ<b:include name='アイコン名'/>出力結果<svg class='svg-icon-24'> <use xlink:href='/responsive/sprite_v1_6.css.svg#アイコンID' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg>定義用のマークアップ<b:includable id='アイコン名'> <b:include data='{ iconId: "アイコンID", iconClass: "クラス名" }' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>

参考サイト

Icône SVG - Flèche gauche [backArrowIcon]

またはincludableタグの中身を独自タグ①の一般的な定義用のマークアップと同じものに完全に書き換えても出力結果は変わらない。独自タグ②dataありのアイコン名のincludeincludeタグのdataのbuttonの真偽値で出力結果が変わる。button:falseのsvgタグとuseタグの出力マークアップ<b:include data='{ iconClass: "クラス名", button: false }' name='アイコン名'/>出力結果<svg class='svg-icon-24クラス名 '> <use xlink:href='/responsive/sprite_v1_6.css.svg#アイコン名' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg>定義用のマークアップ<b:includable id='アイコン名'> <b:include data='{ iconId: "アイコンID", iconClass: "クラス名" }' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>

参考サイト

Icône SVG - Flèche gauche [backArrowIcon]

またはincludableタグの中身を独自タグ①の一般的な定義用のマークアップと同じものに完全に書き換えても出力結果は変わらない。button:trueでbuttonタグとsvgタグとuseタグの出力マークアップ<b:include data='{ iconClass: "クラス名", button: true }' name='アイコン名'/>出力結果<button class='svg-icon-24-button クラス名'/> <svg class='svg-icon-24'> <use xlink:href='/responsive/sprite_v1_6.css.svg#アイコン名' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> </button>定義用のマークアップ<b:includable id='アイコン名'> <b:include data='{ iconId: "アイコンID", iconClass: "クラス名" }' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>

参考サイト

Icône SVG - Flèche gauche [backArrowIcon]

またはincludableタグの中身を独自タグ②の一般的な定義用のマークアップと同じものに完全に書き換えても出力結果は変わらない。SVGアイコンの種類毎の独自タグはそれぞれのブログ名に対応したマークアップを出力する。ブログ名はBloggerで利用可能な全ての種類が用意されないけど、しかし用意されたものは文字列が予め決められていて英語の大文字と小文字が区別される。サーバーからincludeタグだけでマークアップを呼び出す場合は変えるとエラーで処理されないと同時にブログも表示されなくなるから注意しくてはならない。定義用のマークアップのincludableタグを記載する場合はそのidと対応するincludeタグのnameが同じでありさえすればブログ名は変えても動作する。includeタグのdataなしのものはSVGアイコンのマークアップを呼び出すだけで、カスタマイズは全くできない。includeタグのdataありのものはSVGアイコンのマークアップを呼び出すときに「iconClass」の値でクラス名を付与したり、「button」の値でbuttonタグの有無を選択できる。クラス名を付与する場合はbuttonタグがなければsvgタグ、あればbuttonタグにそれぞれのデフォルトの「svg-icon-24」、「svg-icon-24-button」に追加されることになる。includeタグの呼び出しの内容をincludableタグでカスタマイズすることができる。includableタグは何かのwidgetタグかdefaultmarkupタグの中でしか使うことができない。使うと定義された内容が前者ならば同じwidget内、後者も何かのwidgetのタイプを指定した場合は管理画面のレイアウトからガジェットを追加したときに同じwidget内の対応するincludeタグに反映する。defaultmarkupタグでブログ全体に共通の「common」のタイプを指定した場合はその時点でwidgetタグの内外の対応する全てのincludeタグに定義された内容が反映する。SVGのデータを取り込むuseタグの「xlink:href」は古くて「href」を使うことが推奨されるとか「xmlns:xlink」の部分はなくてもブラウザがあるものと判断するなんてところ、またはsvgタグのクラス名や何かをカスタマイズすることができるようになる。SVGアイコンの種類毎のデフォルトのincludableタグはその中にも呼び出しのincludeタグが使われていてサーバーのマークアップをカスタマイズする形なので、もしも完全にオリジナルのマークアップを行いたければ書き換える必要があって内側のincludeタグは消してしまっても大丈夫だ。SVGアイコンのデザインの変更についてBloggerのSVGアイコンはマークアップするだけだと大きい黒いデザインになってしまうけど、しかしデザインのCSSで変更することができる。色んな方法がある中で最も汎用的なのはテンプレートのhead内のstyleタグにマークアップを追加するものだ。ブログでSVGアイコンを表示する全てのページで反映する方法で、Bloggerの場合はテーマのHTML編集（主にskinタグ内）やカスタマイズの詳細設定のCSSを追加などで行える。その他、インラインstyleというアイコンを表示するsvgタグなどにstyle属性でデザインのCSSを、直接、記載する方法を取ることもできる。BloggerではテーマのHTML編集などのテンプレートのデザインを変更する他に投稿のHTMLビューで投稿のコンテンツのデザインを変更する際に特に役立つ。色と大きさのCSSのサンプルHTML<svg class="svg-icon-24"> <use href="/responsive/sprite_v1_6.css.svg#ic_share_black_24dp"/> </svg>CSS.svg-icon-24 {fill:#ff0000;width:36px;height:36px}SVGアイコンを表示するsvgタグのクラス名に対してCSSのfillとwidthとheightで、それぞれに色（塗り潰し）と横幅と縦幅を指定してデザインを変更している。CSSの様々なプロパティーと値の組み合わせで色と大きさ以外にもデザインを自由に付けられる。インラインstyleではCCSのマークアップを所定のタグにstyle属性で追加する。<svg style="fill:#ff0000;width:36px;height:36px"> <use href="/responsive/sprite_v1_6.css.svg#ic_share_black_24dp"/> </svg>SVGアイコンのデザインを個別に変えたい場合は表示するsvgタグなどに固有のクラス名を付けてそれに対してかインラインstyleで表示するタグに個別にCSSを記載すれば大丈夫だ。

コメント