Bloggerで利用可能なSVGアイコンの独自タグによるマークアップ 結城永人 - 2021年7月19日 (月) 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で記述する。 どちらも使う場合はHTMLのマークアップ(テンプレートならばHTML編集、ウィジェットならばHTML / JavaScript、投稿ならばHTMLビューなど)で行う。 独自タグはテンプレートのxmlファイルでしか動作しないけれども通常のインラインSVGはテンプレートのxmlファイルでもその他でも大丈夫だ。 本稿では独自タグでブログに表示するマークアップの仕方について取り上げる。 関連ページBloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ BloggerのSVGアイコンの独自タグはブログのテーマのwidgetタグの内外でグローバルに使うことができる。 目次どんなSVGアイコンが用意されているかアイコンの種類:アイコン名とアイコンIDSVGアイコンの独自タグの一般的な使い方独自タグ①svgIconのinclude独自タグ②svgIconButtonのincludeSVGアイコンの独自タグの種類毎の使い方独自タグ①dataなしのアイコン名のinclude独自タグ②dataありのアイコン名のincludeSVGアイコンのデザインの変更について色と大きさのCSSのサンプル どんなSVGアイコンが用意されているか 二十六種類がBloggerブログの「responsive/sprite_v1_6.css.svg」のアイコンファイルに用意されていて利用することができる。 アイコンの種類:アイコン名とアイコンID SVGアイコンの独自タグのマークアップではアイコンを表示するためにアイコン名とアイコン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ありのアイコン名のinclude includeタグの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を記載すれば大丈夫だ。 コメント 新しい投稿 前の投稿
コメント