SIRIUS(シリウス)のヘッダー画像にトップへ戻るリンクを貼る方法の意外な落とし穴

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

ヘッダー画像にトップへ戻るリンクを貼る方法の意外な落とし穴

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

インターネットが始まった頃はともかく、例えばテキストに青い下線が付いていたら
今なら「あ、これはリンクの付いたテキストだな」と自然に認識できますよね。

 

それと全く同じというわけではないですけど、
『ウェブサイトやブログのタイトルテキスト(もしくはタイトル画像)をクリックすればトップページに戻ってくれるハズ』というのもなんとなくわかる時代じゃないですか。

 

しかしながらシリウスで作るサイトには、
残念ながらその機能が標準では搭載されてません。

 

もちろんカスタマイズすればできないこともないんですが、
そのやり方をネットで調べるとほぼ一様に次のような回答が返ってきます。

 


「テンプレート」→「HTMLテンプレート編集」を開き、

 

<div id="header">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>

 

というところを、

 

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

 

に変えるだけ。

 

これをトップページだけでなくカテゴリーページやエントリーページも書き換えればOKです。

 

これらの回答の元ネタはおそらくシリウスの開発サイトに載ってるFAQかと思われますが、
実はこの回答にはちょっとした落とし穴があるんです。

 

そこに気づかないと、
シリウス標準の”便利なある機能”が使えなくなってしまうんです。

 

そもそも”トップページへ戻る”リンクを付けるためのカスタマイズなのに「トップページ」のHTMLを書き換えること自体がちょっと変でもあるんですが、、、それは忘れましょう。

 

落とし穴?その1

その使えなくなる機能の話の前に、もう一つのデメリットをお教えします。

 

SIRIUS(シリウス)のヘッダー画像というのは、正確には”背景”画像になります。

 

決められた領域内の一番下に敷かれている画像というイメージですね。

 

この”背景”画像にリンクを付けることはできません。

ドラッグして画像をデスクトップなどに保存することもできません。

 

これに対し、シリウスの画像アイコンをクリックして挿入するのが
一般的な”挿入”画像です。

 

”挿入”画像にはもちろんリンクが付けられます。

 

つまり先ほどのカスタマイズの意味は、
『背景画像として機能しているヘッダー画像を挿入画像に切り替え、そこにトップへ戻るリンクを付与して表示させる』というものなんです。

 

挿入画像であれば確かに”トップへ戻る”リンク機能はつけられますが、
別のテキストや別の画像を(挿入画像に変換した)ヘッダー画像上に置くことは
(通常の方法では)不可能になります。

 

もしもヘッダー画像だけの表示でいいというのであれば
特に問題はありませんけどネ。

 

落とし穴?その2

さて使えなくなる機能というのが何かというと。。。

 

それはこちら↓の赤枠で囲った「ヘッダー画像」という、
地味ではありますがとても役に立つ機能のことです。

(サイドメニューの記事名を右クリック→「詳細設定」で開きます)

 

キャプチャ画像

 

使い方としては、
『そのページが開いた時には別のヘッダー画像を表示させる』というものです。

 

例えば当サイトの通常のヘッダー画像はこちら↓ですが、

 

キャプチャ画像

 

この便利な機能を使うことで、
当サイトからのSIRIUSご購入者のみが閲覧可能なページに入ると
こちら↓のヘッダー画像が自動的に表示されるようになっています。

 

キャプチャ画像

 

こういった会員制ページでの切り替え以外にも、
例えば商品詳細ページでは”商品詳細”とわかるようなテキストの入ったヘッダー画像に自動的に切り替えたり、購入ページに入ると”購入完了まであと 3ステップ!”といったような背景画像に自動で切り替わるなどの工夫が可能になります。

 

もちろん「そんな機能なんて必要ないさ!」ということであれば
これ以降の話は読む必要はないですよ。

 

落とし穴?を解消するやり方

一番最初の方法ではなくこれからご紹介する方法を使えば、

  • ヘッダー画像を背景画像としてそのまま利用可能
  • その結果、『ヘッダー画像切り替え』機能も使える
  • 背景画像上に”トップへ戻る”リンク付きのサイトタイトル画像も置ける

上記 3つの機能が全部有効となります。

 

もちろん当サイトのヘッダー部分はそのようなカスタマイズを施してあります。

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


てっぺん