SIRIUS 検索窓の位置をカスタマイズ

SIRIUSの検索窓TOP

 

今回は、SEOに強いサイトを簡単に作成できる、次世代型サイト作成システムSIRIUSをカスタマイズしてみましょう。

SIRIUSのテンプレートにはデフォルトタイプがあり、デフォルトタイプのみ、テンプレートの横幅が設定できます。

シリウスでサイトを作成するとき、テンプレートの横幅を広げる事がよくあるんですが、デフォルトでは900pxと、ネットショップなんかを作成するときにはちょっとだけ狭く感じるので、よく横幅を広くしたりします。

横幅を広くするカスタマイズを行うと、「サイト内検索窓」がズレてしまい良い位置にきてくれません。

そこでCSSをいじって位置を変えてみました。

Sponsored Links

サイト内検索窓の位置を変更する方法

SIRIUSののデフォルトテンプレートは900pxで、「サイト内検索窓」を表示したときはこんな感じですね

デフォルトのテンプレート

 

 

 

 

 

テンプレートの横幅設定方法

メニューバーから、テンプレートテンプレートの横幅設定に進みます。

横幅の設定

 

 

 

今回は、横幅を1040pxに変更してみました。

テンプレート横幅設定のところを、あなたの思う幅にしたら「OK」をクリック。

テンプレートの横幅調整

 

 

 

横幅を変更したテンプレートを、プレビューで見てみます。

「検索窓」「ヘッダー画像」がズレちゃっていますね。

全体がズレる

 

 

 

ヘッダー画像の横幅修正

まずは、ヘッダー画像から手直しです。

画像ソフトGIMPを使用して900pxから1040pxに少し大きくしました。

画像は大きくするほど、荒く汚くなるので、注意しましょう。

拡大したヘッダー画像に変更して、プレビュー画面で見てみると、ヘッダー画像は綺麗にテンプレートの幅に合うようになりましたが、「検索窓」はズレたままですね。

検索窓がずれる

 

 

サイト内検索窓の位置修正

次は「サイト内検索窓」位置を修正してみます。

メニューバーから、編集スタイルシートをクリック。

スタイルシートを選択

 

 

 

スタイルシート編集から、「search」と入力してスタイルシート内を検索します。

検索すると、354行目に「#searchbox 」があり、その下の「width: 880px;」880の数字を先ほどテンプレート横幅設定で設定した幅の数字より-20引いた数字を入れてます。

searchで検索

 

 

 

プレビュー画面で確認してみましょう。ほどよい位置に来てくれましたね。

検索窓が移動

 

 

 

高さの調整が必要な場合は、「line-height: 30px;」の数字を変えて
みて下さい。(数字が大きくなるほど下に下がります。)

 

万が一、おかしくなったら、スタイルシート編集画面に「デフォルトに戻す」ボタンがあるので、そこでもとに戻して下さい。

HTML・CSSをさわる前に必ずバックアップしておきましょう。

 

以上、SIRIUSの検索窓の位置を変更するカスタマイズ方法でした。

お疲れ様でした。

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA