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

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によってシステム内部に様々な改良が加えられました。

これにより当サイトでご紹介している独自の機能拡張の一部が【新】SIRIUSテンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものも出てきてます。

よって今後このサイトの更新はストップすることにしました。(サイトはしばらくは残しておきます)

これに伴い、【新】SIRIUSテンプレートに対応した『SIRIUSでホームページ作成』サイトを新規公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきたTipsが最初から組み込まれたカスタムテンプレートであり、当サイトではご紹介してない新機能も追加搭載してます。

※当サイトの更新ストップにより、一部の記事は自動的に新サイトの同記事に自動転送されます。

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

サンプル画像

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

実際にやってみました。

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

 

バナーイメージ画像

 

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

 

サイトイメージ画像

 

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

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

 

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

 

したがって手順としては

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

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

 

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


てっぺん