SEO対策と重複コンテンツ回避に役立ちます

シリウスで画像にリンクを貼る方法

シリウスで画像にリンクを貼る方法を確実にすることで
重複コンテンツやターゲットキーワードのサイト表示がしやすくなります。
サイトでの画像貼り付けのメリットと方法を紹介します。
シリウスで画像にリンクを貼る方法

 

シリウスで画像にリンクを貼る方法

 

川上です。

 

シリウスで画像にリンクを貼る方法を工夫することでSEOと
重複コンテンツの回避に有利になります。

 

ポイントは文字を画像にすることで
サイト訪問者に的確な案内をして検索エンジンには見せないことです。

 

またサイトの見やすさを演出します。

 

かっこよく表現すると
SEO対策とサイト訪問者の見易さの両立です。

 

内部ページもそうですし、外部ページにも使えます。
外部ページはアフィリエイトリンクだったりします。

 

今回は画像つきリンクの使い方と作り方を紹介します。

 

リンクのHTML構造とバナー製作のおすすめソフト
一番最後に画像つきリンクのソースと実例をあげてみたいと思います。

 

ちょっと長いですが
あなたのサイトの見栄えよさの参考になればと思います。


実際の例

シリウスで画像にリンクを貼る方法
シリウスで画像にリンクを貼る方法
一般的に画像つきリンクを使うのは外部サイトであろうと
サイト内の特定のページに誘導することです。

 

次の大事な目的は何回も使う単語を画像にして
検索エンジンに読ませないようにすることです。

 

具体的には重複コンテンツを少なくすることです。
では実際の例を見てみましょう。

 

当サイトのサイドバーが今回のリンクそのものです。

 

下の画像にはリンクは入っていませんが
サイドバーの画像にはリンクが入っています。
シリウスで画像にリンクを貼る方法

 

シリウスで画像にリンクを貼る方法

 

おすすめ教材とレビューのリンクの組み合わせで並んでいますが
画像の文字を直接何度も入れたくないので画像にしています。

 

リンクはないですけどこれも画像にしています。

シリウスで画像にリンクを貼る方法 シリウスで画像にリンクを貼る方法

 

サイト読まれている方へのガイドです。

 

この手の文章はサイト訪問者への次に読んでもらうガイドになりますが

 

検索エンジンの評価に入ってほしくない文章、単語を
画像にすることがポイントです。

 

実際の例を見たら次実践しましょう。


画像リンクの貼り方

div id="hoge">

シリウスで画像にリンクを貼る方法
シリウスで画像にリンクを貼る方法
最初に画像を本文中に貼り付けます。

 

一番手っ取り早いのはパソコンのフォルダーから
本文中にドラックアンドドロップするだけで画像を登録することです。
シリウスで画像にリンクを貼る方法

 

次にシリウスの操作画面でリンクをはる方法を紹介します。

 

画像の入口は特に難しいことはなくて
シリウスのメニューバーの真ん中に青い四角いボタンを押します。
ボタンの部分にマウスを近づけると「画像」と案内が出ます。
画像設定

 

下記が画像選択画面ですが新規画像を増やしたりします。

 

画像選択のほかに実施するのは
Alt属性や画像の表示サイズ、文字コンテンツの回り込みの設定をします。
シリウスで画像にリンクを貼る方法

 

次にリンクを作ってみます。


シリウスでページのリンクをはる

シリウスで画像にリンクを貼る方法
シリウスで画像にリンクを貼る方法
シリウスでリンクをはれる場所はたくさんあります。

 

まずは右クリックとシリウス本体の操作画面です。
リンクをイメージさせるクサリのボタンがリンク設定の入り口です。
リンク設定の入り口

 

コチラが右クリックのメニューです。
右クリックのメニュー

 

そのほかサイト全体設定の中にあるモジュールやフリースペース設定にもあります。
シリウスで画像にリンクを貼る方法

 

リンク設定の細かい画面がコチラです。
リンク先とリンクを埋め込む文字を設定します。

 

外部サイトにリンクを張る時はターゲットのメニューから「_blank」を選択して
別ウィンドウで開く設定にします。
シリウスで画像にリンクを貼る方法
nofollowのチェックは
メルマガ用アフィリエイトリンクを使用するときに使います。

 

基本アフィリエイトリンクはnofollowにして送ったほうが
検索エンジン対策になります。

 

シリウスのリンク設定画面で画像を選択することができますが
画像に対してリンクが設定されてしまいます。

 

手っ取り早く画像にリンクを張るには
本文の<img src="画像の場所" alt="" />の部分を選択して右クリックが簡単です。
シリウスで画像にリンクを貼る方法

 

<a href="画像の場所" />のコードがあるときはその画像へのリンクを消します。

 


リンクの構造について

シリウスで画像にリンクを貼る方法
シリウスで画像にリンクを貼る方法
次にリンクの構造について記載します。実際の例は下記の画像になります。
基本的には画像の場所、リンク設定、テキストになります。
シリウスで画像にリンクを貼る方法

 

アフィリエイトの外部サイトへのリンク 補足

 

  • rel="nofollow"はメルマガ用のアフィリリンクを

    使って外部サイトにリンクを張るときに使います。

シリウスで画像にリンクを貼る方法

 

  • target="_blank"はアフィリエイトリンクで外部サイトに
  • 接続するときに一般的に使います。
    サイト内部にリンクを貼る場合は使いません。

 

貴方のサイトの画像のリンク 補足

  • <% pageDepth %>、<% pageTitle %>はシリウスの独自コマンドです。

 

  • <% pageDepth %>は画像の格納している場所を示し、

    次に表示する画像を指定します。

 

  • <% pageTitle %>はalt属性で画像の説明をする際に編集しているページの

    タイトルを自動で挿入する設定です。

 

  • 元画像が大きいときはstyle="width:550px;"みたいに

    サイトの大きさにあわせて表示することもできます。

 

  • 参考までにシリウスの1カラムのテンプレートは800px

    2カラムのテンプレートは550pxぐらいが最大の幅になります。

 

アンカーテキストの補足

 

  • アンカーテキストはページのターゲットキーワードを含んだ文字にすると

    SEO対策上好ましいです。

     

    画像の下に文字を配置するときは文字の最初の所を改行します。
    (モジュールやメニューのカラムは改行を有効にする必要があります)

 

ちょっと長くなりましたが画像のリンクの詳細です。
慣れてくるとさくさくできるようになります。

 

まずはシリウス上で作ってプレビュー機能で
確認しながら作りましょう。


画像は作ってしまおう

シリウスで画像にリンクを貼る方法
画像を作る
画像と文字を組み合わせたバナーは自分で作るしかありません。

 

サイトを作っていると画像はいたるところで使用します。
効率よくちゃきちゃき作る必要があります。

 

字ばっかのサイトは見るのに疲れてしまいますし
見栄えもよくありません。

 

私は画像の作成はメインでAdobe Illustrator を利用しています。

 

文字と画像のレイアウトが簡単なのと
WEB用にデータを変換ができるからです。

 

あと画像を大きくしても画像の劣化が少ないのが魅力です。
使いやすさと画像の品質はプロが使うツールとして納得できます。

 

Adobe Illustrator のデメリットは購入価格が高いことです。

 

そして、背景が透明な透過画像を
自分で用意しなければならにということです。

 

大昔は買取で10万円近くしましたが
今は1年の利用で26000円程度します。

 

シリウスで画像にリンクを貼る方法
Adobe Illustrator CC 12か月版 [26,160円]

 

使いやすさと写真の品質はプロが使うソフトならでは。でも、価格は高いです。

 

コストパフォーマンスを考えたら高いです。

 

バナーはアイキャッチで大事なので自分で作ることは必須ですが
作成のために毎年26000円の投資ははっきり言って高いです。

 


ちょっと便利なツール

シリウスで画像にリンクを貼る方法
バナープラス
文字と画像を組み合わせたバナーを作るなら
Adobe Illustratorよりもにサクサクできてしまいます。

 

最初に画像の大きさ決めて絵をはるだけなんで効率が良すぎます。
このサイトのバナーもほとんどバナープラスで作っています。

 

大きな違いは月額料金の安さと切り抜き画像の豊富さです。

 

バナー作成に特化していますので
商業印刷のCMYKのカラーなどは対応していません。

 

でもバナーを作るなら最速です。

 

素材の背景が透過された画像があって
文字と画像を組み合わせる簡単さ

 

見栄えの良いバナー制作の時短を目指す
アフィリエイターにはとてもありがたい製品です。

 

さらにうれしいのはクリックされやすいバナーの作り方が
マニュアルでついてくることです。これは有料級の価値があります。

 

ちょっと便利なツール
バナープラスは年間ライセンスで14800円です。
当サイト経由の購入ですと再配布可能な
200本近い基本特典セットがプレゼントします。

 

バナープラスの特典付で購入する入口はこちら

 


背景の切り抜きは必須です

シリウスで画像にリンクを貼る方法
画像の背景を切り抜くには<br />フォトレタッチソフトが必要です

 

文字と画像を組み合わせるグラフィックソフトを使いこなすには
背景が切り抜かれた画像が必要です。

 

その素材を作るにはフォトレタッチソフト出ないとできません。

 

コスパよし買取型ツール
Corel PaintShop Pro一覧

 

買取型で価格が手軽なツールはCorel PaintShop Proが
最強のコストパフォーマンスです。

 

1万円きる価格でバナーも作れて
画像の背景を撮ったりできるのがうれしいところ。
コストパフォーマンスを考えたら最強だと思います。

 

デメリットは
背景の切り抜きだけでなく
文字と画像のが入ったバナーが作れるのですが
ちょっと時間がかかるところです。


画像の処理で一番めんどくさいこと

シリウスで画像にリンクを貼る方法
シリウスで画像にリンクを貼る方法
バナープラスやイラストレータを使うときでも
ネットから拾った画像の背景を切り抜くのには

 

PaintShop Proみたいなフォトレタッチソフトが必要になります。

 

ネットで配布している無料素材は
大体背景がついています。

 

必要な部分を切り抜きするのが手間がかかることだと思います。

 

背景を切り抜いた画像と文字を組み合わせバナーを作るなら
バナープラスかAdobe Illustratorが早いです。

 

月額料金の安さと切り抜き素材が多いのはバナープラスです。
画像を選んで文字を組み合わせるだけなんで
Adobe Illustratorより早くバナーが作れます。

 

背景を切り抜きできるソフトでも文字と画像を組み合わせた
バナーは作成できますが編集に時間がかかります。

 

あなたのご事情に合わせて選ぶといいです。


画像とリンクを組み合わせます

シリウスで画像にリンクを貼る方法
シリウスで画像にリンクを貼る方法
画像にリンクを貼るには3つのプロセスが必要です。

 

  • メルマガ用のアフィリエイトリンクを生成する
  • <a href="リンク先URL" target="_blank" rel="nofollow">
  • 画像を用意する

 

リンク先の指定と画像とリンクの〆で最終的に画像つきのリンクを完成させます。
下の例は下の青いボタン画像とリンクののHTMLソースです。

 

<a href="<% pageDepth %>当サイトでご購入いただいた方への特典.html" target="_blank" rel="nofollow"><img src="<% pageDepth %>img/tok00naiy.gif"  /></a>

 

 

初めての方は慣れるまで大変ですが画像と組み合わせると
見栄えがよくなりますので頑張ってたくさん作ってください。

 

 

以上、川上でした^^

 

シリウスで画像にリンクを貼る方法 シリウスで画像にリンクを貼る方法

 


ページの先頭へ