ShareHtmlでサムネイルにアイキャッチが使えるようにカスタマイズしました！
2012/12/09「これいい！」と思ったものは真似する、@jinnaitakumiです！
いままでShareHtmlはデフォの状態で使っていんですが、大ちゃんこと@delaymaniaさんのブログや、@OZPAさんの記事で、アイキャッチをサムネイルにする方法があったので、それを導入しました。
というか、そのカスタマイズ記事をEvernoteにクリップしてからかなり時間が経ってしまったｗ
相変わらず乗り遅れる男、@jinnaitakumiです！ｗ
参考にした記事
@delaymaniaさんの記事を中心に@OZPAさんの記事、@3_waさんの記事を参考にカスタマイズしました。
以下、リンクなり。
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>
（コピー・ペーストする場合は改行を削除してね！）
すげえシンプルになっちったｗ
変更点をまとめると
- よく分からない余計なタグを削除
- はてブ数を表示するところも削除
- imgのURLの部分に${memo}を設置
- imgタグのheightを指定しない
▼こんな感じにリンクを作れます。
これはめっちゃいいね！ ディスプレイ用の台にU-BOARDを買ったけど、オサレで素敵！ | jinnaitakumi.com
もしかすると枠で囲うとかしたほうがいいかも。
使い方
- リンクを作成したい記事を開く
- サムネイルにしたい画像のURLをコピーする
- ShareHtmlを開く
- 画像のURLを貼り付ける
- 生成されたソースを頂いて、記事に貼る
▼まずはリンクを作りたい記事を開きます
▼リンクのサムネイルに使いたい画像のURLをコピーします（右クリックでメニューを開いて「画像 URLをコピー」）
▼ブックマークバーのShareHtmlを開きます（私の場合は名前を「サムネイル大Html」に変更してあります）
▼「Input memo」でコピーした画像のURLを貼り付けます
貼り付けはショートカットキーを覚えておくと便利！
- Windows：Ctrl + V
- Mac：Command + V
▼生成されたソースをコピーする
コピーもショートカットキーを覚えておくと便利！
- Windows：Ctrl + C
- Mac：Command + C
あとは記事にソースを張り付ければOKです。
これはめっちゃいいね！ ディスプレイ用の台にU-BOARDを買ったけど、オサレで素敵！ | jinnaitakumi.com
オサレでいいね！
まとめ
ということで、今回のポイントをまとめると
- ShareHtmlのサムネイル画像をアイキャッチにする！
- imgタグのURL部分にそのまま画像のURLを流し込めるようにカスタマイズした
- オサレでアイキャッチを使った分かりやすいリンクが作れる！
アイキャッチはもともと記事の内容がイメージしやすいように作っているわけですから、これが使えるのがイチバンいいわけです。
しかも、リンクの生成がデフォの時より速くなりました！
サムネイルをShareHtmlの方で調達する必要がなくなったおかげですかね。
これは嬉しい予想外でした(^^)
これで俄然、リンクが恰好良く、そして分かりやすくなりましたよ！
▼AppHtmlをカスタマイズしたときの記事はこちら！
▼MusicHtmlを導入してカスタマイズしたときの記事はこちら！
