些細な日常
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するか…
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するか…
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / Pixabay インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SV…
写真のソーシャルメディアの Flickr を使い始めたけれどもアカウント登録からアイコンとヘッダー（上段の背景）画像の設定方法に手間取ったので、改めて纏めておきたい。 Flickrはアカウント登録と同時にアイコンとヘッダー画像を設定できないのがソーシャルメディアとしてちょっと珍しいかも知れない。 二つの画像の共通設定 Image selection｜ Flickr Flickrのアイコンとヘッダー画像はアカウント登録が終了してからログイン（サインイン）した自分のページで設定しなくてはならない。 自分のページは一つではないけれども「About」（要約）や「Photostream」（写真連載）などのどのタイプからでも構わない。 最初のうちは慣れなくて迷い易いけれども自分のページへは当該のURLを使うか、またはFlickrの最上段のメニューのパソコンの「You」（貴方）か…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableでSVGアイコンの共有／シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「Facebook」と「Twitter」と「Pinterest」と「メール」の五種類がデフォルトで表示されて使用可能になっている。 世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれどもはてなブックマークが人気のソーシャルメディアの一つで、 検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つ と考えられるから共有ボタンになるべく入れておきたい。 以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部の Webサービスの共有ボタンのAddToAny…
HTMLのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 SVGはScalable Vect Graphics（スケーラブルベクターグラフィックス）の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の 一般的なjpgやpngやgifの画像 のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにSVGファイルの画像を表示するにはimgタグで <img src="画像URL"> とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データ…
サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。 ファビコンの汎用的な設定について サーバーに専用の画像をアップロード サイトのhead内にlinkタグで画像URLを記載 ファビコンのサイズ縦横16～64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。 大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。 ファイル形式は pngが小さめの画像の画質には崩…
一般的に イラストや小さな画像はjpegよりもpngのファイル形式が劣化が少ない からアイコンには向いていた。 pngファイルのアイコンがjpegファイルのものよりも嬉しい 僕が蜜蜂の絵を作成して自分のために使うようになったのは数年前からだけれども画像のファイル形式をまだ大して気にかけてなかったらしい。まさかのjpegだったので、思い立って直ぐにpngで保存し直してアップロードしてみたら幾分か画質が良くなった感じがする。 Tumblr のアバターもファイル形式がjpegからpngに置き換えられるや綺麗さが増しながら発色も上がったのではないかと嬉しさが込み上げている。 そしてブログのヘッダーの背景の公園の森の写真と共にアイコンの蜜蜂を戻してしまった。 ブログ自体の魅力を上げられるとアクセスアップに繋がってくれそうだ アクセスが伸び切れないし、訪問者の 直帰率や滞在時間 も…
ブログにどこかのサイトのリンクでロゴやアイコンの画像が使えると嬉しい。 Tumblrは公式のロゴやアイコンを使える 森と空のTumblr｜ 些細な日常 Tumblrは ロゴを自由に使おう でロゴやアイコンが提供されていた。無料でデバイスにダウンロードしてサイトに載せて構わないらしい。 ただしデザインについて幾つかの注意点があってTumblrのオリジナルのロゴやアイコンの改変、またはアレンジは制限されてしまう。 字体に規定の余白が必要で、テクスチャーやフォントやピリオドを弄ってはならない。 背景だけは自由に改変、またはアレンジして構わないとされていたんだ。 僕としては背景を自分で用意してそこにTumblrのロゴやアイコンを入れるのは面白そうだと感じたけど、公式のサンプルを目にしては惹かれずにいなかった、さらに疑問も湧いて来て手を加えると二次創作の作品になるからオリジナル…
アクセスアップのためにサイトに共有ボタンを置きたいと考えた。人々に手軽に拡散して貰えて良いのではないかしら。 しかしTwitterやTumblrなど、オリジナルのものを幾つも並べるとサイトの表示速度が遅くなって反対にアクセスダウンになり兼ねない。訪問したのに何秒も開かない、待たされるだけ待たされて挙げ句の果てにはブラウザが固まってしまう、そこまで重くはならないにしてもか、なるべくスピーディーに動いて欲しい気持ちがある。 Webサービスで探してみたら AddThis というのが見付かって使い出している 海外のサイトで日本語には全く対応してないけれどもアカウントを登録して無料で簡単に導入できるんだ。オリジナルの共有ボタンを幾つも並べるよりはサイトの表示速度が遅くならないようにも感じられた。 トップページの下段に共有ボタンを置きました｜ Wind of crystal …