ブログ記事やブログのサイドバーで
リンクをする場合に使える
リンク先のキャプチャーサムネ画像つきリンクデザインの
紹介をします。
作成-------------------------------
- 画像を作る（10秒）
- ブログに張り付ける
- カスタマイズ完成！（完成まで約3分）
----------------------------------
1. 画像を作る
小さなキャプチャー画像のサムネイルを以下サイトで
一瞬で無料で作れます！！
作り方は
キャプチャーしたいブログやサイトのURLを入力して
好みのサムネイルのサイズを選んで「作成する」をクリックするだけ！
ちなみにサンプルは
フリーを選択して
横サイズ 160pixel
縦サイズ 120pixel
にしています。
こんなサムネイルができたと思います。
影や枠もお好みで選んでつけてください。
そして、【貼り付け用タグ】をコピーしましょう！
２. ブログに張り付ける
早速先程の【貼り付け用タグ】をブログに貼り付けます。
記事の表示したい箇所にHTML表示で
以下ソースを書いて下さい。
<div style="padding: 10px; border-radius: 10px; border: 1px dashed rgb(192, 192, 192); border-image: none; width: 400px; hight: auto;display: table;">
<p style="float: left;">
<!-- 貼り付け用タグ ここから↓ -->
<a href="http://ameblo.jp/customize-d" alt="本気でアメブロカスタマイズっ">
<img width="160" height="120" src="http://stat.ameba.jp/user_images/20160806/21/customize-d/cf/21/j/o0160012013716656576.jpg" /></a>
<!-- 貼り付け用タグ ここまで↑ -->
</p>
<p style="font-size: 90%; vertical-align: middle; display: table-cell;"><a href="リンクするブログのURL" target="_blank">ブログタイトル</a></p>
<div class="clear"></div>
</div>
貼り付け用タグここから↓ここまで↑のところを
先程HeartRails Captureでコピーした貼り付け用タグに変えて、
”リンクするブログのURL”と”ブログタイトル”を変更したら
カスタマイズ完成です。
いぁ～便利ですねー。
目からウロコなサービスです！！( д) ﾟ ﾟ
では、早速昨日登場した友達Hちゃんのブログを紹介してみましょう！
（ピンクの点線のデザインにしています。）
すごく癒される可愛いパステルアート
と素敵な個性筆教室
をやっているひろみちゃんのブログです♪
ひろみちゃん自身も明るくて癒しオーラ満載の人です（＾ｖ＾）
