この記事の所要時間: 318

 

今日のテーマは

シリウスのヘッダー内のごく一部に
リンクを設置してみよう!

という内容をお送りします。

 

結構これやってみたいという人おおいんじゃないかな?

特にネットショップを作成したいという人にも役立つ内容だと
思います。

 

やりたいこと

下のようなヘッダーを作成し、
それをシリウスに組み込み、「詳細はこちら」からという部分を
クリックするとリンク先に飛ぶようなサイトを作りたいと思います。

header

 

まず、
お客さんがあなたのサイトにきたときに
一番最初に見るのがヘッダー
です。

このヘッダーで興味を持つか持たないかで
次に読み進めてもらえるかどうかが決まってきます。

 

ただ、中には気の短い人もいて、
タイトルを見た瞬間に「詳細はこちらから」という
ボタンがあったら反射的に押す人も出てくるでしょう。

 

こういう人は、出来る限り早い段階で
クリックをしてもらわないと離脱してしまうわけです。

こうした考え方はPPC広告の出稿サイトの考え方に
似ていますね。

 

ヘッダーをクリックできるようにする

通常シリウスのヘッダーは
文字リンクでサイトタイトルが表示されるように
なっていますが、これは設定で消せます。

【ヘッダーの文字リンクの削除方法】

  1. サイトオプションをクリック
  2. サイトデザインをクリック
  3. 文字サイズ・文字の位置タブをクリック
  4. 両方とも、非表示(HTMLから削除・推奨)を選択

image

 

これでヘッダーは画像のみが表示させるように出来ました。

 

テンプレートを編集し、ヘッダー画像に細工ができるようにしましょう

では、テンプレートを編集していきます。

HTMLテンプレート編集画面の起動
  1. テンプレート▼をクリック
  2. HTMLテンプレート編集(Ctrl+Q)をクリック

image

 

テンプレートのヘッダー領域を編集

赤の領域がヘッダーの文字や画像に関する設定の領域です。
この赤枠内の文字を以下のように変更します。

siriustemplete

 

▼このソースと入れ替えます。

<div style="text-align:center">
<img src="<% pageDepth %>img/header.jpg" alt="<% pageTitle %>" />
</div>

 

ちなみに、<img src=~~~~~ />の間に<a>タグをかませてサイトタイトルを
指定するとヘッダー画像をクリックするとトップページに戻るように設定できます。

<div style="text-align:center">
<a href="<% pageDepth %>">
<img src="<% pageDepth %>img/header.jpg" alt="<% pageTitle %>" />
</a>
</div>

 

なお、
今回の作業をもし全ページに施したければ
トップページ、カテゴリーページ、エントリーページにも
同じようにヘッダー領域を編集しなければいけません。

 

さて、これでシリウス内のヘッダー画像のタグが見えたので、
細工をすることができるようになりました。

あともう少しですよ。

 

クリッカブル・マップの設定

クリッカブル・マップというhtmlタグがあります。

このタグは画像内のある領域にリンクを貼ることができる
タグということです。

 

ポイントは2点

  1. <img>タグ内に usemap="#Map" という命令文を入れておくこと
    ”#Map”は<map name=”#Map”>のname属性と同じならなんでも構わない。
  2. <map></map>というタグ内に<area>タグを入れ、どんな図形でどういう領域で、どこへ飛ぶかを設定する。
shapeに指定できるのは3つ

四角形・・・shape=”rect”

円形・・・shape=”curcle”

多角形・・・shape=”poly”

 

このへんの詳細は興味ある人は調べてみましょう。

 

今回は下のようなタグになりました。

 

<map name="Map">
<area shape="rect" coords="684,102,881,178" href="リンク先URL" alt="">
</map>

 

coords=”684,102,881,178”は「詳細はこちらからの図形の
X軸とY軸の座標点になります。最初の2つが左上の座標点(X,Y)、
後半2つが右下の座標点(X,Y)になります。

 

座標点の取得は、使うヘッダ画像を「ペイント」で開いて座標点を調べる
簡単です。

image

 

 

HTMLテンプレートの編集後のタグ

image

 

先程も書きましたが、
トップページ、カテゴリーページ、エントリーページの全ての
ヘッダーのところに赤枠で書かれているタグを貼り付けないと
全ページでは再現できなくなってしまいます。

 

 

いかがでしたか?

ちょっとした工夫でヘッダー領域が編集できるようになりしたね。

まだ実戦でやってませんが、実際の店舗サイトを作成して、
iPhoneのヘッダー内にクリッカブル・マップで電話用のリンクを作成して
電話をかけてもらうなんてこともできると思います。

 

ただし、
「レスポンシブルデザイン」のテンプレートでクリッカブル・マップを
実践すると間違いなく座標がずれるのでこれはJqueryをつかうと
なんとかなると書いていたサイトがありました。
興味があればググってください。

 

今回作成したシリウスの実際のサイトを体験するにはこちらから
↓↓↓ ↓↓↓
サンプルサイトはこちらから