Bloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ 結城永人 - 2021年7月22日 (木) 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ファイルでもその他でも大丈夫だ。 本稿ではインラインSVGでブログに表示するマークアップの仕方について取り上げる。 関連ページBloggerで利用可能なSVGアイコンの独自タグによるマークアップ BloggerのSVGアイコンは外部のsvgファイルにid付きで用意されているので、インラインSVGではページ内のデータだけではなく、ページ外のものもURLを参照して扱える。 目次どんなSVGアイコンが用意されているかアイコンの種類:アイコンIDとアイコンデータインラインSVGでアイコンを表示するインラインSVG①外部ファイルを呼び出すインラインSVG②内部データを呼び出すインラインSVG③アイコンデータで描画インラインSVGのマークアップの補足SVGアイコンのデザインの変更について色と大きさのCSSのサンプル どんなSVGアイコンが用意されているか 二十六種類がBloggerブログの「responsive/sprite_v1_6.css.svg」のアイコンファイルに用意されていて利用することができる。 アイコンの種類:アイコンIDとアイコンデータ SVGアイコンのインラインSVGのマークアップではアイコンを表示するためにアイコンIDとアイコンデータのどちらか一つか両方が必要になる。 Bloggerの公式のSVGアイコン アイコンの種類 アイコン アイコンID アイコンデータ メール ic_24_email_dark <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/> フェイスブック ic_24_facebook_dark <g transform="translate(-312 -104)"><g transform="translate(312 104)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 2v3h-2c-.5 0-1 .4-1 1v2h3v3h-3v7h-3v-7h-2v-3h2V7.5C13 5.6 14.6 4 16.5 4H19z"/></g></g> グーグルプラス ic_24_googlePlus_dark <g transform="translate(-344 -136)"><g transform="translate(344 136)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22.5 11h-2V9H19v2h-2v1.5h2v2h1.5v-2h2V11z"/><path fill="none" d="M1.5 5h14v14h-14V5z"/><path d="M8.5 10.7v2.7h3.8c-.3 1.6-1.7 2.8-3.8 2.8-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1 0 2 .4 2.7 1.1l2-2C12 5.7 10.4 5 8.5 5c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-1-.1-1.4H8.5v-.1z"/></g></g> リンク ic_24_link_dark <path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/> ピンタレスト ic_24_pinterest_dark <g transform="translate(-312 -136)"><g transform="translate(312 136)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 14.2c-.8 0-1.6-.3-2.1-.9l-.9 3.2-.1.2c-.2.3-.5.5-.9.5-.6 0-1.1-.5-1.1-1.1V17.8l1.8-5.6c-9.6-12.2-.2-.6-.2-1.5 0-1.7.9-2.2 1.7-2.2s1.4.3 1.4 1.3c0 1.3-.9 2-.9 3 0 .7.6 1.3 1.3 1.3 2.3 0 3.2-1.8 3.2-3.4 0-2.2-1.9-3.9-4.2-3.9s-4.2 1.8-4.2 3.9c0 .7.2 1.3.5 1.9.1.2.1.3.1.5 0 .6-.4 1-1 1-.4 0-.7-.2-.9-.5-.5-.9-.8-1.9-.8-3 0-3.3 2.8-5.9 6.2-5.9s6.2 2.7 6.2 5.9c.1 2.8-1.5 5.6-5.1 5.6z"/></g></g> ツイッター ic_24_twitter_dark <g transform="translate(-344 -104)"><g transform="translate(344 104)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2.3 7.3c-.1 4.6-3 7.8-7.4 8-1.8.1-3.1-.5-4.3-1.2 1.3.2 3-.3 3.9-1.1-1.3-.1-2.1-.8-2.5-1.9.4.1.8.1 1.1 0-1.2-.4-2-1.1-2.1-2.7.3.2.7.3 1.1.3-.9-.5-1.6-2.3-.8-3.6C8 8.5 9.6 9.7 12.2 9.9c-.6-2.8 3.1-4.3 4.6-2.4.7-.1 1.2-.4 1.7-.7-.2.7-.6 1.1-1.1 1.5.5-.1 1-.2 1.4-.4 0 .5-.6 1-1.1 1.4z"/></g></g> 追加ボックス ic_add_box_black_24dp <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/><path d="M0 0h24v24H0z" fill="none"/> 戻り矢印 ic_arrow_back_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/> 進み矢印 ic_arrow_forward_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/> チャット吹き出し ic_chat_bubble_black_24dp <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/> チェックボックス ic_check_box_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> チェックボックスの外形 ic_check_box_outline_blank_black_24dp <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/> 左山形紋 ic_chevron_left_black_24dp <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/> 右山形紋 ic_chevron_right_black_24dp <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/> 閉じる ic_close_black_24dp <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/> 簡略へ縮める ic_expand_less_black_24dp <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/><path d="M0 0h24v24H0z" fill="none"/> 詳細へ伸ばす ic_expand_more_black_24dp <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/> メニュー ic_menu_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> コメント状態 ic_mode_comment_black_24dp <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path d="M0 0h24v24H0z" fill="none"/> 水平の詳細 ic_more_horiz_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/> 垂直の詳細 ic_more_vert_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/> 人物 ic_person_black_24dp <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/> Blogger投稿 ic_post_blogger_black_24dp <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 7v1c0 .55.45 1 1 1s1 .45 1 1v3c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V8c0-1.66 1.34-3 3-3h4c1.66 0 3 1.34 3 3v1zm-6.05 1h2.6c.55 0 1-.45 1-1s-.45-1-1-1h-2.6c-.55 0-1 .45-1 1s.45 1 1 1zM14 13H9.95c-.55 0-1 .45-1 1s.45 1 1 1H14c.55 0 1-.45 1-1s-.45-1-1-1z"/><path d="M0 0h24v24H0z" fill="none"/> RSSフィード ic_rss_feed_black_24dp <path fill="none" d="M0 0h24v24H0z"/><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/> 検索 ic_search_black_24dp <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/> 共有 ic_share_black_24dp <path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/> インラインSVGでアイコンを表示する HTMLのsvgタグとuseタグを使ってブログにSVGアイコンを表示する。 インラインSVG①外部ファイルを呼び出す useタグのhref属性のアドレスに外部ファイルのURLを入力する。 HTML <svg class="svg-icon-24"> <use href="/responsive/sprite_v1_6.css.svg#アイコンID" xmlns:xlink="http://www.w3.org/1999/xlink"/> </svg> ※svgタグの「class="svg-icon-24"」は任意。 Bloggerブログの外部ファイルからデータを呼び出してSVGアイコンを表示するマークアップだ。 useタグのhref属性に使用するアドレスは必ずBloggerで決められたものでなくてはならない。変更すると外部ファイルのアイコンデータを参照できず、SVGアイコンは表示されない。 外部ファイルから呼び出すインラインSVGら最も簡単にSVGアイコンを表示する方法で、非常に使い易い。 インラインSVG②内部データを呼び出す useタグのhref属性のアドレスに内部データのアイコンIDを入力する。 表示用のHTML <svg class="svg-icon-24" xmlns="http://www.w3.org/2000/svg"> <use href="#アイコンID" xmlns:xlink="http://www.w3.org/1999/xlink"/> </svg> 格納用のHTML <svg class="hidden" xmlns="http://www.w3.org/2000/svg"> <symbol id="アイコンID" viewBox="0 0 24 24"> アイコンデータ </symbol> </svg> CSS .hidden {display:none} ※svgタグの「class="svg-icon-24"」と「class="hidden"」とCSSのマークアップは任意。 Bloggerブログの内部データを呼び出してSVGアイコンを表示するマークアップだ。 SVGアイコンを使いたいところに表示用のHTMLを記載してもう一つテンプレートのbody内のどこかにアイコンデータの格納用のHTMLを記載してアイコンIDで呼び出せるようにする。 アイコンデータがブログに含まれることになるので、使用するアイコンIDは表示用と格納用のHTMLで一致していればアイコンの表示に支障はなく、Bloggerで決められたものでなくても構わない。 格納用のHTMLはアイコンデータがあるだけで、アイコンが表示されるわけではないけれどもマークアップの分だけ隙間ができてしまう。消すためにはsvgタグにCSSの「display:none」などを記載して指定する必要があり、サンプルでは指定先として「hidden」というclass属性もsvgタグに追加している。 Bloggerの2017年の公式テーマでは同じCSSが記載されているから何かのタグに「hidden」というclass属性を付けるだけで、消すことができたり、テンプレートによってCSSのマークアップは省略できる場合もある。 内部データから呼び出すインラインSVGはマークアップが増えるけれどもサーバーを介さず、処理にも優れるから多くのSVGアイコンを表示するのには本当に適している。 インラインSVG③アイコンデータで描画 描画用のタグが含まれるアイコンデータをそのままで使用する。 HTML <svg class="svg-icon-24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> アイコンデータ </svg> ※svgタグの「class="svg-icon-24"」は任意。 Bloggerブログのアイコンデータで描画してSVGアイコンを表示するマークアップだ。 実際にアイコン表示する位置にどんな内容かのデータを置くからインラインSVGとしては最も分かり易くて基本的なマークアップといえる。 同じものを繰り返して使う場合は他のところに記載したアイコンデータを呼び出す方がブログ全体のソースコードを簡略化させられるけど、そうでなければアイコンデータで描画するマークアップでも十分だろう。 インラインSVGの表示速度などのパフォーマンスは画像が一つの場合でも内部データから呼び出す方がデータで描画するよりも良いらしいけれどもアイコンのように非常に小さな画像では実用上の大きな差が付くものではない。 インラインSVGのマークアップの補足 三つのインラインSVGのどれでもアイコンを表示するHTMLのsvgタグにwidth属性で横幅、height属性で縦幅を指定してアイコンの大きさを変えられる。 HTML <svg width="36" height="36" xmlns="http://www.w3.org/2000/svg"> <use href="/responsive/sprite_v1_6.css.svg#ic_check_box_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/> </svg> 大きさの単位はpxか%で、単位を省略するとpxとして扱われる。 svgタグの「xmlns='http://www.w3.org/2000/svg'」やuseタグの「xmlns:xlink='http://www.w3.org/1999/xlink'」は大抵のブラウザがあるものと判断して適切に処理する状況だから省略してもアイコンの表示に支障はない。 Bloggerの2017年の公式テーマではSVGアイコンを表示するsvgタグに「svg-icon-24」というclass属性が付いていて色や大きさなどのデザインを指定するために使われている。 svgタグに「svg-icon-24」などのclass属性を追加すればデザインのCSSやプログラムのJavaScriptの指定先として使える。 関連ページインラインSVGのdefsとgかsymbolとuseによる呼び出しのマークアップ 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 で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
生島浩の5:55の心の目に光り輝く尊さ 日本の ホキ美術館 は日本人の画家の写真のように細密に描かれた写実絵画を中心的に所蔵している。その中で、絵を印刷したポストカードの売り上げがホキ美術館の設立当初から一位で、常に最高の人気を誇るのが生島浩の 5:55 (五時五十五分)といわれる。僕も一見して忽ち引き付けられる物凄い...
コメント