物販アフィリエイトでも情報商材アフィリエイトでもシリウスを活用する場面はたくさんあります。意外と忘れられているのが、シリウスならHTMLサイトだけじゃなくブログも作れます。特定の商品のレビューページ(HTMLサイト)を作るなら1カラムの標準サイズで問題無いですが、コンテンツを盛り込むブログやサイトの場合は、標準の横幅900ってちょっと狭いですよね。
この横幅もシリウスでは簡単に変えることができちゃいます。
シリウスの画面サイズ(横幅)を変更する方法
ここではシリウスのビジネステンプレートで変更する方法をご紹介します。
角丸テンプレートの場合、表示が崩れやすく、画像ファイルの編集が必要になることもあります。最新のレスポンシブテンプレートの場合は、CSSファイルの編集を行わないとサイズ変更が反映されません。レスポンシブテンプレートの幅変更は後述します。
(1)シリウスを起動したら、上メニューの「テンプレート」-「テンプレートの横幅設定」をクリック
(2)この設定画面でテンプレートの横幅やメインカラム、メインメニュー、サブメニューの横幅を調節することができます。
ブログやコンテンツ重視のサイトであれば横幅1000pxがオススメです。
レスポンシブテンプレートの幅を変更する方法
シリウス標準付属のレスポンシブテンプレート、追加レスポンシブテンプレートは以下の方法でサイト幅を好きなサイズに変更することができます。シリウスのサイドバーは標準ですと210pxなので狭いですよね。この部分をなんとかしたい方も多いと思います。
以下手順は私が運営しているサイトへ実際に適用している値になります。必ずしもこれが正解ではありませんが、問題なく表示できているので、ご紹介していきます。例では、各width値を900から1108へ変更しています。
(1)まずスタイルシート編集を開きます。
(2)レイアウト部のcontents内にあるwidthの値を変更してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* レイアウト ================================================== */ #wrapper { overflow: hidden; position: relative; text-align: center; } #contents { margin: 0 auto 60px auto; padding-top: 20px; position: relative; text-align: center; width: 1108px; } |
(3)次にトップ配下のwidthを変更します。
1 2 3 4 5 6 7 8 9 10 11 12 |
/* トップ ================================================== */ #top { margin: 0 auto; text-align: left; width: 1108px; } #top #logo, #top h1 { padding: 28px 0; width: 1108px; } |
(4)ヘッダー部のwidthを変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* ヘッダー ================================================== */ #headerbox .inner { text-align: center; } #header { height: 350px; margin: 0 auto; position: relative; text-align: left; width: 1108px; } |
(5)トップメニュー部のwidthを変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* トップメニュー ================================================== */ *:first-child+html body { padding-left: 1px; } #nav { border-bottom: 4px solid #7d8fab; background-color: #5e6e83; } #topmenubox { margin: 0 auto; text-align: center; width: 1108px; } #topmenubox #topmenubtn { display: none; } #topmenu ul,#topmenu li{ list-style-image: none; list-style-type: none; background-image: none; } #topmenu ul { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif; font-weight: 700; overflow: hidden; width: 1108px; padding: 10px 0; } |
(6)フッター部のwidthを変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* ================================================== フッター ================================================== */ #footer { background-color: #341805; background-image: url(img/border_bg.gif); background-position: center top; background-repeat: repeat-x; color: #ffffff; font-size: 12px; line-height: 1.8; overflow: hidden; padding-top: 3px; text-align: center; } #footer .inner { margin: 0 auto; overflow: hidden; padding: 25px 0; position: relative; text-align: center; word-wrap: break-word; width: 1108px; } |
1 2 3 4 5 6 |
#footer #footsub { text-align: center; max-width: 1108px; height: auto; margin: 10px auto 0; } |
(7)最後にサイドメニューの幅を調整します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
================================================== サイドメニュー ================================================== */ /* メニュー ================================================== */ #menu img{ max-width:100%; height:auto; } #menu { float: left; overflow: hidden; width: 310px; } |
以上でシリウスの画面サイズを変更することができます。細かい微調整はCSS内でpadding値やmargin値等を変更しながら調整してください。
シリウスでブログを作るには
シリウスは商品のレビューサイトやコンテンツサイト以外にブログも作れます。実際にWordPressではなく、シリウスでブログを作っているアフィリエイターもたくさんいます。
シリウスでブログをつくるには、これも簡単で、「サイト全体の設定」で「サイトタイプ」で「ブログ」にチェックを付けるだけ。
これだけでシリウスの構成がブログモードに切り替わります。
具体的にどこが変わるのかですが、
■標準
トップページの記事1~5が表示される
■ブログ
トップページの記事1
各エントリーページの記事1が表示される
という違いがあります。
なんかわかりにくいですが、
- 一度作って放置気味にするサイト ⇒ 標準
- 更新型のブログ(サイト) ⇒ ブログ
という使い分けをする認識でOKです。
最後に
シリウスって直感的にブログやサイトを作ることができるので、付属しているマニュアルをしっかり読む人って案外少ないんですよね。マニュアルはページ数がやたら多いので読むのが面倒と思う人が多いと思います。
「直感的に操作できる」ことがシリウスの利点でもあるんですが、思ってる以上に色々できます。
「え!シリウスってこんなこともできるの!?」
ってものがまだまだあったりします。せっかくの超高性能ツールなのでとことん使い倒して活かしていきたいところですね。jqueryを駆使すれば大体のことは実現できます。シリウスは多くの人が紹介するだけあって色んなことができる神ツールです。
実際にレビューサイトを作ろう!ってときに自力でHTMLを書いていくと何日かかるかわかりません。
私なら完成しません。
それがわずか数時間で形になるんだから、どれだけ作業効率を格段にアップさせることができるかがわかりますね。
- HTMLが書けない
- 気合入れたレビューサイトが作りたい
- SEOに強く反応の高いブログ(サイト)を作りたい
なら、鉄板ツールです。ガシガシ使い込んで活用していっちゃいましょう。
この記事へのコメントはありません。