2018年12月20日木曜日

CSS スプライトは表示速度の改善にならない?

SVG の target 属性による画像の切り替えは、1 枚画像による background-potition での方法とは違い、速度や転送量の改善に効果が薄いことがあるようです。

SVG の URLフラグメントによる画像切り替えは、次のようなスタイルを追加した SVG ファイルを用意しておきます。

<svg>
<style>
<![CDATA[
g { display: none; }
g:target { display: inline; }
]]>
</style>
<g id="image1">
<rect x="1" y="6" class="st7" width="30" height="20"/>
</g>

<g id="image2">
<path d="M32,27.313C32,29.891,29.891,32,27.313,32H4.688C2.109,32,0,29.891,0,27.313V4.688C0,2.109,2.109,0,4.688,0 h22.625C29.891,0,32,2.109,32,4.688V27.313z"/>
</g>
</svg>

HTML から target を指定して呼び出します。

<img src="splite-mail-soft.svg#image1" alt="">
<img src="splite-mail-soft.svg#image2" alt="">

当然、画像の読み込みは 1 回限りと思い込んでいましたが、実際はそうではありませんでした。

2018年9月20日木曜日

Googlebot が激増

Googlebot 乱舞。9月16日 から 17日、さらにそれ以降も、Googlebot のアクセスが半端ではない数に上っています。

平均が 367 で 5,235 ということは、14倍

これまでも、だいたい 20 日スパンで大きなアクセスがあったものの、せいぜい 3倍程度。中には 2桁前半の来訪数もあるので、いかに途方もない数字なのかがわかります。

それで本題はなにか

2018年6月28日木曜日

な、なんと! AddThis が無料に! ↝ 💩終了

AddThis は 2023年5月31日 に終了しました

Twitter や Facebook のソーシャルメディアのシェアボタンを簡単に設置できるウェブサービスの AddThis の全ての機能が無料で使えるようになりました。

AddThis is Now Free!

AddThis is Now Free!

完全に無料です。有料ユーザーには払い戻しされます。

AddThis はこのブログにも設置されています。見えない時は広告ブロックをオフにすると AddThis ボタンを確認できます。

なぜ、無料なのか?

2018年5月29日火曜日

Google のガイドライン から読み解く画像検索 SEO

Search Console ヘルプ の画像に関するガイドラインが更新されました。

画像公開に関する Google のガイドライン

今までのありきたりな内容より有用性の高い情報が追加されています。Google は最近、画像検索に力を入れているので、その影響かも知れません。初めて聞く内容や確証のなかった理論についても明文化されています。

Google のガイドラインの記述に沿って、画像検索 SEO について思うところを自身の経験と照らしあわせて書き付けていきたいと思います。

alt を書きましょう!といったウェブマスターさんがうんざりする内容はないので安心してください。

2018年4月13日金曜日

Inkscape SVG を Adobe Illustrator ファイルに変換

adobe orange hair

Inkscape で作成された SVG ファイルを、.ai ファイルに保存して、最終的にプレーン SVG を出力する方法です。

Inkscape SVG を Illustrator で編集して、.svg で出力しようとすると、エラーが表示されたり大きくずれたりします。これは、知らないとまったく理由がわからず対処できません。

この作業を完了できませんでした。不明なエラーが発生しました。

Wikimedia Commons から頂いてきた、Inkscape Logo.svg を例にして解説します。

Inkscape Logo.svg をテキストエディタで開くとすぐに次の構文が見えます。

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

これは、ネームスペースといって「Inkscape や前身の sodipodi 特有の命令を使います」 という宣言です。

本文にも SVG には見慣れない記述が見つかります。

sodipodi:version="0.32"

inkscape:version="0.48.4 r9939"

これが、Inkscape SVG を Illustrator で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。