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

投稿

ラベル(アイコン)が付いた投稿を表示しています

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

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

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

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

サイトのファビコンとウェブクリップアイコンの汎用的な設定とBloggerでの導入手順

イメージ
サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ/タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。ファビコンの汎用的な設定についてサーバーに専用の画像をアップロードサイトのhead内にlinkタグで画像URLを記載ファビコンのサイズ縦横16~64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。ファイル形式はpngが小さめの画像の画質には崩れ難くて適しているけれどもWindows…

アイコンの蜜蜂のファイル形式がjpegだったと気付いてpngに置き換えることにした

イメージ
一般的にイラストや小さな画像はjpegよりもpngのファイル形式が劣化が少ないからアイコンには向いていた。僕が蜜蜂を作成して自分のために使うようになったのは数年前からだけれども画像のファイル形式をまだ大して気にかけてなかったらしい。まさかのjpegだったので、思い立って直ぐにpngで保存し直してアップロードしてみたら幾分か画質が良くなった感じがする。Tumblrのアバターもファイル形式がjpegからpngに置き換えられるや綺麗さが増しながら発色も上がったのではないかと嬉しさが込み上げている。ブログのヘッダーに背景の公園の森の写真と共にアイコンの蜜蜂を戻してしまった。アクセスが伸び切れないし、訪問者の直帰率や滞在時間も良くならないので、先日、「記事が何よりも目立つようにヘッダーも添え物でしかないふうに」といったばかりだけれどもブログ自体の魅力こそ表すべきかも知れなかった。ホームページから来…

サイトにAddThisの共有ボタンを置いてみた

イメージ
アクセスアップのためにサイトに共有ボタンを置きたいと考えた。人々に手軽に拡散して貰えて良いのではないかしら。
しかしTwitterやTumblrなど、オリジナルを幾つも並べるとサイトの表示速度が遅くなって反対にアクセスダウンになり兼ねない。訪問したのに何秒も開かない、待たされるだけ待たされて挙げ句の果てにはブラウザが固まってしまう、そこまで重くはならないにしてもか、なるべくスピーディーに動いて欲しい気持ちがある。
ウェブサービスで探しみたらAddThisというのが見付かって使い出している。海外のサイトで日本語には全く対応してないけれどもアカウントを登録して無料で簡単に導入できるんだ。オリジナルの共有ボタンを幾つも並べるよりはサイトの表示速度が遅くならないようにも感じられた。
トップページの下段に共有ボタンを置きました via Wind of crystal
アイコンも好きだ。綺麗に纏まっている。…