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を記載すれば大丈夫だ。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
コメント