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を記載すれば大丈夫だ。 コメント 新しい投稿 前の投稿
ジャパネットたかたの丸尾詩織の商品説明に気持ちが入っていて素晴らしい理由 ジャパネットたかた のテレビショッピングを観ていて社員の丸尾詩織の商品説明の言葉が力強くてどんどん前に出て来るように聞こえるのが凄いと感じた。声が立体的に表現されているのは飛び出す絵本とか3D映像なんて印象まで与えるから他では経験できないほどの聴覚芸術が新たに生み出されたとも過言...
菜の花の真っ黄色の世界で感じる幸運 近所に 菜の花 が密集して良い感じで真っ黄色に咲いていたのが壮観だった。 色も大きさも匂いも最盛期のセイヨウアブラナ 花の根本の萼片が開き切らず、斜めに立っているから セイヨウアブラナ だと思うけど、すると最大の150cmくらい伸びていて非常に大きいと驚く。 通り...
Dropboxで直リンクのURLを取得する方法 クラウドストレージのDropboxはサイトで自由にコンテンツを表示できる直リンクのURLをあらゆるファイル形式で取得することができる。 重要：2023年6月から Dropboxの共有リンクのURLが変更されて直リンクの方法も影響を受けた 。本稿の内容はそれ以前のファイルにしか...
スノーボードのジャンプ中のグラブには幾つもの種類がある スノーボードでジャンプして板を掴む動作をグラブ、またはグラブトリック（掴み技）としてエアー（空中）に組み込まれる。幾つもの種類があって空中での姿勢を安定させたり、ハーフパイプやスロープスタイルやビッグエアーなどの演技を競う試合では得点を左右する要因にもなっている。覚えておくと観る...
アドセンスの個人のアメリカの税務情報／W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
椎名林檎の顔が思い浮かばない理由 近頃はだいぶ慣れて来たというか、 ブログに取り上げるくらい注目する人 なので、大丈夫なんだけれども以前は 椎名林檎 というと人気歌手で色んなところで良く見ている割には、全然、顔が思い浮かばないのを不思議がっていた。 しかし2008年にテレビ番組のトップランナーに出演した際に司...
サイトの表示速度をlinkタグの「rel="preconnect"」で上げる／WebPagetestで事前接続を調べる HTMLの リソースヒント （ 日本語訳 ）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラ...
芦名星のたぶん本当の死因 芦名星は自殺した。その前後、 三浦春馬と竹内結子の自宅のクローゼットでの首吊りという同じ仕方での連続自殺 があり、他殺の陰謀論も思い浮かぶけど、しかし違うのではないか。今の 日本の芸能界には死にたくなる気持ち悪さがある し、芸能人が裕福な生活でも自殺することはさほど不思議ではない...
宜保愛子の死んだペットなどの動物の供養の仕方 宜保愛子 （霊能力者）の霊視で、死んだペットの話が出て来ることがある。そんな中で、僕も同様の経験があって辛い気持ちを抱えていたものがあった。可哀相な亡くなり方といわれる。せめて成仏できるようにペットなどの動物の供養の仕方と併せて取り上げたい。 永井美奈子の可哀相な亡くなり方をし...
Androidの無料で使い易いHTMLエディターの比較検討 Androidのスマホ／タブレットで 気に入って使っていたHTMLエディターアプリのWebMaster's HTML Editor Lite がが終了してしまって有料版しかなくなった。無料で使い易くて嬉しかったし、値段は五百円くらいの安い有料版だから移行しようかとも考えた...
結城永人
結城永人
コメント