スキップしてメイン コンテンツに移動

投稿

ラベル(SVG)が付いた投稿を表示しています

Bloggerのsvgアイコンの共有ボタンにはてなブックマークなどのデフォルト以外の共有先を追加する方法

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでsvgアイコンの共有/シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「Facebook」と「Twitter」と「Pinterest」と「メール」の五種類がデフォルトで表示されて使用可能になっている。 世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれどもはてなブックマークが人気のソーシャルメディアの一つで、検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つと考えられるから共有ボタンになるべく入れておきたい。 以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部のWebサービスの共有ボタンのAddToAnyが便利で、デザインもsvgアイコン…

インラインsvgのstroke-linecapとstroke-linejoinとstroke-miterlimitのデザイン

イメージ
サイトにインラインsvgで描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。svg画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている。 butt(切り出し/真っ直ぐ) stroke-linecap="butt" 初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。 round(丸い) stroke-linecap="round" 線の両端は線自体よりも少し伸びて丸くなる。 square(平ら) stroke-linecap="square" 線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。 インラインsvgで描画された…

インラインsvgのpathタグで描いた線の両端を繋ぎ合わせるにはZコマンドを使う

イメージ
pathは座標からどんな線でも数多く描けるインラインsvgで最も自由度の高いタグだ。 しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240"> <path d="M50 110 L160 20, 270 110 h-220 M80 110 v110 h160 v-110 M240 140 h-50 v80 M95 125 h65 v40 h-65 v-40" stroke-width="4" stroke="#4682b4"…

インラインsvgで線や丸や四角や三角や弧を描いて色を塗るマークアップ

イメージ
htmlのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 svgはScalable Vect Graphics(スケーラブルベクターグラフィックス)の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の一般的なjpgやpngやgifの画像のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにsvgファイルの画像を表示するにはimgタグで<img src="画像URL">とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。sv…

Blogger専用のAddToAnyで記事下に共有ボタンを一発挿入

イメージ
ルーブル美術館のホームページで作品の右上に共有ボタンのアイコンが付いていて押してみたらオリジナルではなくてWebサービスのAddToAnyが使われていて驚いた。世界で最も有名な美術館かも知れないし、そんな大きなところで使われているWebサービスならば相当に信頼できそうだ。共有ボタンとしてはデザインも確かに素晴らしくて無料でカスタマイズも自由自在でアカウントの登録も必要ないので、便利そのものだし、正しく望み通りの印象を抱いた。Bloggerで使えるかどうかを試そうとすると最初から専用の方法が用意されていた。日本で無料ブログというと他のサービスが人気だけど、しかし海外ではBloggerが人気の無料ブログだから多くの人が直ぐに簡単に取り入れられるように考えられているわけだろう。AddToAnyのトップページの「Get the Share Buttons」からBloggerのアイコンで入って「I…