投稿記事に関係ある WEB ページへのリンク、特に内部リンクは、テキストリンクからリッチリンクに進化していました。

    当サイトもブログカード始め、色々と検索して、検討をして来ましたが、共通する些細な問題点がいくつかあり、あれやこれや使って見ましたが、最終的にこれで統一しょうと思うものはまだありません。

    些細な問題点とは、例えば、

● 自分のサイトにOGP設定をする事
● 外部ソースで画像取得すると表示速度が遅くなりがち
● ブログカード自体が外部サービスで仕様変更などの対応が困る
● 外部依存しないリンクカードも使う側のCSS設定が面倒（１回きりだけど）
● 外部依存しないとは言え画像取得は結局外部依存とか
● iframe は極力使いたくないとか

    そんなの気にする事ではないと言う考えなら、そのまま外部依存のブログカードやリンクカードを使えばいいと思うのですが、でも、過去に外部サービスで色々と懲りましたので、現状すっきりしません。

    と言うか、画像の直リンクはしないのがネチケットですが、画像の取得は url を取得して、直リンクしてるじゃないですか？ブログカードが流行すると、それはいいの？と思ったりもします。

思う処があって HTML でチャレンジ

    安心できるものを使いたいと切に思いましたので、少しだけかじった HTML を使って、自分のオリジナルカード式リンクは作れないかと、ずっと考えて来ました。

    ネットでも「自作ブログカード」をずっと検索して来ました。例えば筆者が「お～」と思って、記事にした「ブログカードジェネレーター」や「 ShareHtml をもっと綺麗にしたメーカー」など、WEB ページの画像を取得するサービス付きで紹介していました。

    その画像取得サービスが外部のものでした。

    ずっとネックであった画像は、確かに情報の一部ですが、取得される画像は所謂アイキャッチで、ブログ記事の最初にある画像を取得しますが、別にアイキャッチの画像は情報コンテンツに直結していないのが殆どです。

    Javascript を使えば何とか画像を取得できるでしょうが、本職ではないので、勉強しながらでは相当面倒ですし、見栄えだけなら、星の数ほどある既存のフリー素材のデザインプレート等で良く無い？

    技術が進化すると、物事を難しく考えがちですが、見栄えがそう変わらないなら、シンプルがベストじゃないですか。

    IT 関係者は、この考え方を「ダサイ」と思うでしょうか。サムネイルも所詮一時の流行ですし、広告と間違わないように、安心してクリックして貰えるなら、寧ろ画像を取得せずに、これまでのテキストリンクをカード式にデザインするだけの方が、読者も安心するのではないでしょうか。

    Google ads もブログカード形式の広告が増えましたよね。

命名「リンクシール」w

    同じカード式リンクでも、サムネを取得しないし、オリジナルデザインを使うから、ブログカードとは一線を画したイメージです。

    そうですね～、子供が喜ぶシール的な？大人でも、親しい友人にあげる手紙の封やメモの端っこに、良く貼ったりしますよね、そんな感じでいいと思うのです。

    サムネイルをバッサリ切り捨てる事で、あれこれ思い悩む問題が一切気にならなくなり、気分爽快です。

    ここ数日、ずっとコードの変更とテスト表示をやっていましたので、訪れた方は、たびたび変更する訳の分からないリンクに戸惑った人もいるでしょうか。

    まだ当サイトの記事数が50そこそこで、それほどのアクセスはないものと思っていましたので、訪れた方が居たのなら、誠にご迷惑をおかけしました、お詫び申し上げます。

    何しろ数十回もテストを繰り返していましたから。

    最初は<div>タグをメインに組みましたが、汎用タグ故に、それぞれのテンプレートの CSS による影響を結構受けました。最終的には<table>タグで組み上げました。

「リンクシール」を作りながら考えた事

●テンプレートの CSS を触らなくてもいい事

    ブログを使っているだけと言う初心者には、CSS はハードルが高いと思います。筆者も10年前に味わいました。必要があって覚えたのならいいのですが、勉強するきっかけも無く、ただブログで発信しているだけでも、リッチリンクを使いたいですよね。

    本来ネットの対象ユーザーは大多数が IT 関係者以外の別業種の人の筈です。

    CSS を変えて下さいと言われても、世の中半数以上の人は、 CSS はどこ？どう変えるの？となるかも知れませんので、出来る限り既存テンプレートの CSS に影響されない様、要素に直接スタイルを指定します。

    この場合のデメリットは変種画面のコードがだらだらしているように見える事でしょう。コードが直接ブラウザに表示される訳ではないし、CSS だの Javascript だの DOM だの、それよりはずっとマシです。

● 誰でもコピペで使える事

    既存の技術をうまく利用し、あまり難しくないコードで、CSS 要素の設定もあるから少々長くはなりますが、拡張機能の「Create Link」に format を登録するだけで、たった2クリックでリンクシールを貼る事が出来ます。楽々です。

● カスタマイズが簡単

    公開しているコピペ用のコードを、ある程度 HTML をかじった方なら、簡単に理解が出来て、如何様にもカスタマイズができます。

    当ブログは Google 様の Blogger を使っておりますので、背景の画像はそのままお使いになっても、契約サーバーと違って、負担を心配する必要がありません。オリジナル画像に変えれるなら、なおさら安心です。

● 完全に外部依存しません

    あまり想像できない事ですが、例え Blogger のサービスが終了しても、全てコード記述ですので、フォームとリンク自体は消滅しません。背景画像がなくなっても、別画像でいくらでも代用できます。

    オリジナル画像なら、ブラウザの表示速度も影響なしです。

●スマホ表示も考えました

     流石にレスポンシブデザインまでは対応すると、CSS を弄る事になりますので、それは筆者の意図するところではないです。なので、最初からスマホに合わせて、幅 460px にしてあります。

    大抵のスマホで表示できると思います。PC での表示も昔の中型バーナーのような大きさで、いかにも「リンクシール」のイメージです。

● 削除のし易さも考えました

    「リンクシール」を<table>タグで組むのは、貼る時だけでなく、削除のし易さをも考えての事です。

    <div>タグを使うと、削除する時はリンク文字から削除して行き、囲み要素は編集画面に残ってしまい、HTML 編集画面で確認しながら削除するのが面倒でした。世の中の情報は常に変化しています、削除したい時は、一発で消したいですよね。

    以上、●が付く太文字は、そのまま「リンクシール」の特徴になりますね。テストした初リンクシールはこれです。リンクシールの個性が丸出しですw。

Blogger でも使えるはてなブログカード
ブログカードは、見た目がスタイリッシュで、営業マンが取引先でさっと名刺を差し出す、そんな WEB ページの名刺のような、かっこいいイメージがあります。リンク先の記事概要もなんとなく理解できるし、タッチ式 PC やモバイルでも、リンクをクリックし易いです。

「Cottpic」の外部サービスに依存しないブログカードジェネレータ
先日、「はてなのブログカード」を Blogger で使える事がわかり、大喜びしましたが、いくつか杞憂もありましたので、ブログの全記事に使う事を数日間躊躇していました。杞憂とは何か、それは当時の記事の後半に書いてありまっすので、気になる方は、当時の記事をどうぞ一読願います。

    かなり長文になってしまいました。お疲れ目でした。使い方は下記記事にしましたので、目の休養を取ってから、ご覧下さい。

【リンクシール】特徴と使い方を説明します。 | 学んで実践するサイト運営とSEO対策
当ブログで発案、提唱したリッチリンクタイプの、「リンクシール」について、特徴紹介と使い方を説明して行きたいと思います。     リンクシールの誕生については、下記記事をご覧下さい。