BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» JUGEMブログカスタマイズ Amazonへのリンクを設定する方法

このエントリーをはてなブックマークに追加

JUGEMブログカスタマイズ Amazonへのリンクを設定する方法

   投稿日: 2017/06/29    投稿者:webコラム

cfca4143599646ac2c70a05ecf1b38fa_s.jpg


こんちには! ライターのモモタロウです。


今回は、JUGEMブログカスタマイズ Amazonへのリンクを設定する方法をお伝えします。


以下の画像で矢印の部分に、Amazon商品へのリンクを設定します。

201706011-1.jpg


Amazonへのリンクを設定するには?


まず、JUGEMブログにログインします。

その後、メニューバーにて、「デザイン」→「HTML・CSS編集」をクリックします。

20170611-2.jpg


「HTML編集フォーム」で、

<!-- BEGIN amazon --> 〜 <!-- END amazon --> を見つけます。

20170611-3.jpg


上の画像の下線を引いたブロック内で、以下のタグを入力し、HTMLを書き込みます。

入力するタグです。↓ 

{amazon_ProductName}

タグの下にHTMLを書き込みます。 
     ↓
<div class="amazon">
 <a href="商品へのリンク" target="_blank">
 <img border="0" src="画像のURL" alt="商品名" class="amazon_pict" />
 </a>
 <div class="amazon_text">
 <a href="商品へのリンク" target="_blank">
 <strong>商品名</strong>
 </a>
 <span class="amazon_monocolle">
 <a href="JUGEMレビューへのリンク" title="商品名" target="_blank">
 (JUGEMレビュー »)
 </a>
 </span>
作者
コメント
</div>
 </div>

この時に、
<a href="商品へのリンク" target="_blank"> には、

商品へのリンクにリンクしたいAmazon商品のURLを入力します。



<img border="0" src="画像のURL" alt="商品名" class="amazon_pict" />

画像のURLには、Amazon商品の画像などのリンク先URLを入力、"商品名"には
商品名を入力します。

今回は、ジブリ映画の「千と千尋の神隠し」としました。


 <strong>商品名</strong> 
上記の商品名には、Amazonの商品名を入力します。


 <a href="JUGEMレビューへのリンク" title="商品名" target="_blank">

JUGEMレビューがあればそのリンク先を、
JUGEMレビューへのリンクに入力します。

20170611-4.jpg

上の画像で下線を引いたところが、変更した部分です。


編集を保存してブログを確認すると・・・

201706011-6.jpg

201706011-7.jpg

まとめ


如何でしたか?

JUGEMブログはさまざまなカスタマイズが可能です。

是非、試してみて下さいね。




カテゴリ:

TOPへ