些細な日常
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
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 は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / Pixabay インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SVGのgタグとsymbolタグの違い インラ…
サイトに 自由に描画できるインラインSVG は便利で、しかも画質に優れるからサイト作成ではとても役立つと感じる。 インラインSVGをホームページやブログのデザインに取り入れる際には通常のHTMLとは扱いが異なる部分があるので、混乱しないように幾つか取り上げてどのようなマークアップが特徴的に可能かを覚えておきたい。 目次 インラインSVGの特徴的なマークアップ リンクの付け方について 題名の付け方について 説明文の付け方について ランドマークの付け方について ラベルの付け方について 視覚障害者のサイトの利便性のために インラインSVGの特徴的なマークアップ 狐 狐が地面に身を丸めて眠っている Fuchs by Schmidsi / Pixabay リンクの付け方について <a href="リンク先">リンク名</a> 通常のimgタグの画像にリンクを付けるように外側のsvgタグをリ…
JavaScriptのプログラミングでサーバーを介したデータの受け渡し：Ajax通信を行う仕組みの一つに Fetch API がある。オブジェクトに最初からウェブの送受信の時間差の難点を克服する Promise を想定して使えるのが特徴で、旧来の XMLHttpRequest API と比べて便利に刷新された機能を有する。 しかし取得するデータが Document インターフェースに属さないのがちょっと使い辛い。 例えばfetch()メソッドでhtmlファイルのデータをtextで受け取ってもそこからHTMLを操作するのはUSVStringだから合わなくて全く不可能なのが厄介みたいな場合が出て来る。 Fetch APIはデータに特化して読み書きに純粋に注力するべく考案されているのか、少なくともhtmlファイルなどを一つのDOMツリーとして種々と操作するには却って旧来のXMLHttpRequestこそまだ便利だし…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableでSVGアイコンの共有／シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「Facebook」と「Twitter」と「Pinterest」と「メール」の五種類がデフォルトで表示されて使用可能になっている。 世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれどもはてなブックマークが人気のソーシャルメディアの一つで、 検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つ と考えられるから共有ボタンになるべく入れておきたい。 以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部の Webサービスの共有ボタンのAddToAnyが便利 で、デザインもSVGアイコンだから…
サイトに インラインSVG で描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。SVG画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている。 butt（切り出し／真っ直ぐ） stroke-linecap="butt" 初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。 round（丸い） stroke-linecap="round" 線の両端は線自体よりも少し伸びて丸くなる。 square（平ら） stroke-linecap="square" 線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。 インラインSVGで描画された線の両端の形状がstrok…
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" …
HTMLのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 SVGはScalable Vect Graphics（スケーラブルベクターグラフィックス）の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の 一般的なjpgやpngやgifの画像 のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにSVGファイルの画像を表示するにはimgタグで <img src="画像URL"> とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。SVGのイン…