今回は、SEOに強いサイトを簡単に作成できる、次世代型サイト作成システムSIRIUSをカスタマイズしてみましょう。
SIRIUSのテンプレートにはデフォルトタイプがあり、デフォルトタイプのみ、テンプレートの横幅が設定できます。
シリウスでサイトを作成するとき、テンプレートの横幅を広げる事がよくあるんですが、デフォルトでは900pxと、ネットショップなんかを作成するときにはちょっとだけ狭く感じるので、よく横幅を広くしたりします。
横幅を広くするカスタマイズを行うと、「サイト内検索窓」がズレてしまい良い位置にきてくれません。
そこでCSSをいじって位置を変えてみました。
サイト内検索窓の位置を変更する方法
SIRIUSののデフォルトテンプレートは900pxで、「サイト内検索窓」を表示したときはこんな感じですね
テンプレートの横幅設定方法
メニューバーから、テンプレートテンプレートの横幅設定に進みます。
今回は、横幅を1040pxに変更してみました。
テンプレート横幅設定のところを、あなたの思う幅にしたら「OK」をクリック。
横幅を変更したテンプレートを、プレビューで見てみます。
「検索窓」「ヘッダー画像」がズレちゃっていますね。
ヘッダー画像の横幅修正
まずは、ヘッダー画像から手直しです。
画像ソフトGIMPを使用して900pxから1040pxに少し大きくしました。
拡大したヘッダー画像に変更して、プレビュー画面で見てみると、ヘッダー画像は綺麗にテンプレートの幅に合うようになりましたが、「検索窓」はズレたままですね。
サイト内検索窓の位置修正
次は「サイト内検索窓」位置を修正してみます。
メニューバーから、編集スタイルシートをクリック。
スタイルシート編集から、「search」と入力してスタイルシート内を検索します。
検索すると、354行目に「#searchbox 」があり、その下の「width: 880px;」880の数字を先ほどテンプレート横幅設定で設定した幅の数字より-20引いた数字を入れてます。
プレビュー画面で確認してみましょう。ほどよい位置に来てくれましたね。
高さの調整が必要な場合は、「line-height: 30px;」の数字を変えて
みて下さい。（数字が大きくなるほど下に下がります。）
万が一、おかしくなったら、スタイルシート編集画面に「デフォルトに戻す」ボタンがあるので、そこでもとに戻して下さい。
以上、SIRIUSの検索窓の位置を変更するカスタマイズ方法でした。
お疲れ様でした。
