SIRIUS(シリウス)でグローバルメニューの下(上)に画像を挿入する

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

グローバルメニューの下(上)に画像を挿入する

サンプル画像

 

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

アフィリエイトサイトに於いて
トップページの第一印象ってとっても重要ですよね。

 

それは『サイトの内容が瞬時にわかるサイトタイトルの付け方』だったり
『大きめの画像によるインパクト効果』を狙うものでもあったりします。

 

例えばこちら↓はデフォルトテンプレートで作成したテストサイトですが、
ヘッダー部の背景に画像が敷かれているだけのものです。

 

テストサイトキャプチャイメージ画像

 

上の例ではサイトの説明文(「テストサイト」という大文字)に関してはテキスト表示になっていますが、これはシリウスの画像作成ツールを使ってロゴ入りヘッダー画像に変換することもできます。
(テキストは非表示の設定に変更します)

 

ではたとえば上の例でいえば
「トップページ、メニュー1…」と書かれたグローバルメニューの下(あるいは上)
さらにもう1枚横幅いっぱいの画像を設置して、
サイトデザインに厚みを持たせたい・インパクトを与えたいと思ったときは
どうすればいいでしょうか。

 

残念ながらそういったカスタマイズ項目は
シリウスには搭載されてません。(-_-;)

 

この場合、システムのテンプレートをカスタマイズしていくことになるんですけど、
この作業……思っているほど簡単ぢゃぁないのですよ。

 

HTMLをご存知の方ならある程度は推測がつくと思いますが、
単純に考えればグローバルメニューを表示させているHTMLコードの下に
画像取得コードを加筆すればいいようなもんですよね。

 

実際にやってみました。

挿入するトップバナー画像はこちら↓。

 

バナーイメージ画像

 

そして上記画像の HTMLコードをシリウスのテンプレート内に貼って表示させたのがこちら↓です。

 

サイトイメージ画像

 

むむっ?バナー画像の上部が少し隠れてしまってますね。

それに挿入した画像の下には見覚えのない空白が。。。

 

これはグローバルメニューが固定位置に表示される、つまり
どんなことがあってもあたしゃこの位置から絶対動かないよ!
という設計になっているからなんです。

 

したがって手順としては

  1. グローバルメニューの固定化→流動化
  2. グローバルメニューの表示位置の変更
  3. 画像コードの挿入

という順にカスタマイズする必要があるわけです。

 

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

購入ページへ


てっぺん