「これいい!」と思ったものは真似する、@jinnaitakumiです!

いままでShareHtmlはデフォの状態で使っていんですが、大ちゃんこと@delaymaniaさんのブログや、@OZPAさんの記事で、アイキャッチをサムネイルにする方法があったので、それを導入しました。

というか、そのカスタマイズ記事をEvernoteにクリップしてからかなり時間が経ってしまったw

相変わらず乗り遅れる男、@jinnaitakumiです!w

ShareHtmlのカスタマイズ

参考にした記事

@delaymaniaさんの記事を中心に@OZPAさんの記事、@3_waさんの記事を参考にカスタマイズしました。

以下、リンクなり。

ShareHtmlの作成方法

ShareHtmlは「ShareHtmlメーカー」で作ることができます。

▼作成から使い方までの解説記事はこちら!

ShareHtmlを使う方法! 登録からリンクの作成まで | jinnaitakumi.com

変更したところ

ShareHtmlでリンクを作る時にメモを入れられますよね。
そのときにアイキャッチ画像のURLを入れて、サムネイルがアイキャッチにできたらいいね!と。

なので、サムネイルのURLが入るところにその「メモ」が入るようにしました。
あとは「メモ」のところに画像のURLを貼り付けるだけ。

あと、ついでにソースコードをかなりシンプルにしました。

▼ソースはこんなふうにした

<a href="${posturl}" target="_blank">
<img border="0" src="${memo}" alt="" width="250" height="" /></a>
<br><a href="${posturl}" target="_blank">${posttitle}</a>${postselect}</br>

(コピー・ペーストする場合は改行を削除してね!)

すげえシンプルになっちったw

変更点をまとめると

  • よく分からない余計なタグを削除
  • はてブ数を表示するところも削除
  • imgのURLの部分に${memo}を設置
  • imgタグのheightを指定しない

▼こんな感じにリンクを作れます。

これはめっちゃいいね! ディスプレイ用の台にU-BOARDを買ったけど、オサレで素敵! | jinnaitakumi.com

もしかすると枠で囲うとかしたほうがいいかも。

使い方

  1. リンクを作成したい記事を開く
  2. サムネイルにしたい画像のURLをコピーする
  3. ShareHtmlを開く
  4. 画像のURLを貼り付ける
  5. 生成されたソースを頂いて、記事に貼る

▼まずはリンクを作りたい記事を開きます
スクリーンショット 2012 12 09 16 04 40

▼リンクのサムネイルに使いたい画像のURLをコピーします(右クリックでメニューを開いて「画像 URLをコピー」)
スクリーンショット 2012 12 09 16 05 18

▼ブックマークバーのShareHtmlを開きます(私の場合は名前を「サムネイル大Html」に変更してあります)
スクリーンショット 2012 12 09 16 06 39

▼「Input memo」でコピーした画像のURLを貼り付けます
スクリーンショット 2012 12 09 16 08 12

貼り付けはショートカットキーを覚えておくと便利!

  • Windows:Ctrl + V
  • Mac:Command + V

▼生成されたソースをコピーする
スクリーンショット 2012 12 09 16 08 17

コピーもショートカットキーを覚えておくと便利!

  • Windows:Ctrl + C
  • Mac:Command + C

あとは記事にソースを張り付ければOKです。


これはめっちゃいいね! ディスプレイ用の台にU-BOARDを買ったけど、オサレで素敵! | jinnaitakumi.com

オサレでいいね!

まとめ

ということで、今回のポイントをまとめると

  • ShareHtmlのサムネイル画像をアイキャッチにする!
  • imgタグのURL部分にそのまま画像のURLを流し込めるようにカスタマイズした
  • オサレでアイキャッチを使った分かりやすいリンクが作れる!

アイキャッチはもともと記事の内容がイメージしやすいように作っているわけですから、これが使えるのがイチバンいいわけです。

しかも、リンクの生成がデフォの時より速くなりました!
サムネイルをShareHtmlの方で調達する必要がなくなったおかげですかね。

これは嬉しい予想外でした(^^)

これで俄然、リンクが恰好良く、そして分かりやすくなりましたよ!

▼AppHtmlをカスタマイズしたときの記事はこちら!


▼MusicHtmlを導入してカスタマイズしたときの記事はこちら!


参考記事