BFuture

こんばんわ、もんじです。

本日は、ブログ（サイト）に必ず存在するリンクを
サムネイルを使って、ちょっとお洒落に変身させちゃう方法をご紹介します。



まずは論より証拠！

さっそく現物を見てみてください。

普通のリンクサンプル

BFuture へのリンク


サムネイル付きリンクサンプル

BFuture へのリンク


どうですか？ちょっといい感じじゃないですか？

あ！リンクに付いてる矢印のアイコンはまた別ですよ！
（※矢印アイコンはPCサイトのみ表示されます）

矢印アイコンの付け方を知りたい方は、こちらの過去記事へどうぞ。
リンクにアイコンをつける方法: BFuture


私は、このサムネイル付きリンクは、
どこかの記事を参考に紹介したい場合などに使っています。

こんな感じで。

参考記事：BFuture


実はこのサムネイル付きリンク。
めちゃ簡単に作れます。

ぶっちゃけ、目的のサイトを表示して１クリックで作れます(笑)

最終的には１クリックなんですが、
実は色んな手法を応用しています。

設定方法だけをご紹介してもいいんですが、
基本を抑えていった方が、今後応用が利くと思いますので、
１つずつご紹介しますね。

それでも、「やり方だけ教えればいいんじゃー！ぼけー！」って方は
バツーンと飛ばして読んじゃって下さい！

それでは、まずは・・・。

スポンサードリンク



ウェブページのサムネイル画像ですが、
これは 【HeartRails Capture】 という、ウェブサービスを使っています。

HeartRails Capture

この 【HeartRails Capture】 という、ウェブサービスは、
URL を指定するだけで、そのページのサムネイル画像を自動的に作成してくれます。

しかも、ユーザー登録などは一切必要ありません。

すぐ！即！で使用できます。


では、実際の使い方を、上のサンプルで使用したコードを元にご説明します。

まずは、上のサンプルのコードは以下です。


【src】 の部分が肝です。

この構成は以下のようになっています。

【HeartRails Capture のURL】 + 【サムネイルとして表示したいサイズ】 + 【サムネイル表示オプション】 + ? + 【サムネイルとして表示したいURL】

これだけです (ﾟ∀ﾟ)!!

このコードさえ書けば、あなたのブログにも好きなサイトのサムネイルが表示されます！

簡単でしょ？
後は普通にこの【img】タグを【a】タグで囲んでやればいいわけですね。

【サムネイル表示オプション】は、もんじは「shorten」を使用していますが、
他にも以下の指定が可能です。お好きなオプションを選択してください。

オプション	オプションの説明	サンプル
shadow	サムネイルに影をつけます
border	サムネイルに枠線をつけます
round	サムネイルの四隅を丸めます
shorten	サムネイルの比率を最適化してくれます

これらのオプションはもちろん組合わせて使用することが可能です。

以下はオプションの「shadow」、「round」、「shorten」を付けた場合の例です。




サムネイル画像の作り方は以上となります！

次に、クリック一発でリンクを作成するツールを紹介したいと思いましたが、
長くなってきたので、今回はここで終了とします。

次回にご期待下さい！


でわでわ (´∀｀*)ﾉｼ

※2014/12/06 追記
後編の記事をアップしましたので、こちらからどうぞ (σ´∀｀)σ
サムネイルでちょっとお洒落なリンク作成 (*´ω｀*) （後編）: BFuture