サイト作成システム「SIRIUS」の検索窓の位置をカスタマイズ - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:http://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト作成システム「SIRIUS」の検索窓の位置をカスタマイズ

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

「SIRIUS」って何?って方はこちらをご覧ください。↓ ↓ ↓

【上位版】次世代型サイト作成システム「SIRIUS」

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

私はドロップシッピングのサイトを作成する時は、
シリウスで作成する事がよくあるのですが、

デフォルトでは900pxと、ネットショップにはちょっとだけ狭く感じるので、
よく横幅を広くしたりします。

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

そこでCSSをいじって位置を変えてみました。
今回は私のテストサイトでカスタマイズしてみました。

「SIRIUS」デフォルトの900pxでは、こんな感じ↓ ↓ ↓
151_R.jpg


きれいにまとまっています。

次に横幅を1040pxに変更してみました。

「SIRIUS」テンプレート横幅設定方法



①テンプレート横幅設定を選択
152_R.jpg


②テンプレート横幅設定のところをあなたの思う幅にしてみて下さい。
153_R.jpg


OKして、プレビューで見てみると↓ ↓ ↓
154_R.jpg


こんな感じでズレちゃっています。

まずは、ヘッダー画像から手直しです。
無料の画像ソフトを使用して900pxから1040pxに大きくしました。
画像は大きくすると荒くなって汚くなりますが、少し大きくするのには大丈夫でした。

ヘッダー画像を変更して、見てみると↓ ↓ ↓
155_R.jpg


サイト内検索窓がズレているのがよくわかりますね。

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

①編集からスタイルシートをクリック。
156_R.jpg


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


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

ほどよい位置に来てくれました。
158_R.jpg


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

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

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

このカスタマイズは、CSS(スタイルシート)に手を加えるので、カスタマイズされる方は、
自己責任でお願いします。
この記事を読んだ人はこんな記事も読んでます




Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/11-0f7d854f

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。