この記事の目次
シリウスのフリースペースは６か所
シリウスのフリースペースはテンプレート３カラムとしたときに６か所フリースペースが造れます。
基本的には下に示した図のような配置になります。
赤数字の１～６までがフリースペースの配置になります。
図１
１、メインカラム上段
２、メインカラム下段
３、メインメニュー（右サイドバー）上段
４、メインメニュー（右サイドバー）下段
５、サブメニュー（左サイドバー）上段
６、サブメニュー（左サイドバー）下段
フリースペースの使い方
まず３カラムでフリースペースにアドセンスコードやアフィリエイトコードを入れてみます。
まず、サイト全体の設定を開きます。
図２
才知全体の設定が開いたらフリースペースの設定のタブを開きます。
図３
フリースペースの設定では位置選択をプルダウンします。
前述の６つのフリースペースが出てきます。
３カラムの場合はそれぞれを選んで見出しを書き、内容にアドセンスコードや様々な告知やアフィリエイトを入力します。
図４
プルダウンのそれぞれの項目が図１の場所に対応しています。
カラム構成 ３カラム：２カラムサイドバー右：２カラムサイドバー左 どれが一番いい。
１カラムは販売ページなどに特化して使われることが多いのでここでは触れないでおきます。
カラム構成
おそらくくですがほとんどの方が、２カラムを使っておられるのではないかと思われます。
レイアウトとして一番見やすいですし、使いやすいですから。
ＳＥＯからみてサイトのカラム構成はどれが一番良いのでしょうか。
内容が一番でカラム構成などは記事の内容が良ければ何でもいい。
という意見もありますがそれも一理あります。
しかし同じ記事の良さならどの構成が一番良いかということになると少しでも条件の良い方を選ぶのが当然です。
一般にセッション時間やページ滞在時間を各構成で比べると次のことが言われています。
ページ滞在時間、セッション時間の長さ
３カラム＜２カラムサイド左＜２カラムサイド右
私も２カラム右にサイドバーを置いています。
このブログですから言わなくてもわかりますよね。
フリースペースは全部で６個２カラムなら２個余る。
フリースペースの設定をテンプレートのＨＴＭＬで見てみましょう。
ＨＴＭＬを編集するにはシリウスの編集タブから右の方のＨＴＭＬをクリックします。
まず３カラムを見てみます。
<%freeSpace〇%>がフリースペースを表します。
〇が１～６で図１のフリースペース１～６に対応しています。
下のＨＴＭＬはメインカラムの部分です。コンテンツを挟んで上下に＜%freeSpace１%＞と＜%freeSpace２%＞がコンテンツを挟むように上下にあります。フリースペースのメインカラム上段と下段がこれに当たります。
次にサイドメニューのコンテンツを挟んで＜%freeSpace３%＞と＜%freeSpace４%＞があります。
これがメインメニュー上段と下段に該当します。そしてサブメニューの上下に＜%freeSpace５%＞と＜%freeSpace６%＞がありこれがサブメニュー上段と下段に該当します。
次に２カラムを見てみましょう。
メインカラムの上段と下段はコンテンツの上下に＜%freeSpace１%＞と＜%freeSpace２%＞として記載されています。
２カラムになるとメインメニューの上下に＜%freeSpace３%＞と＜%freeSpace４%＞がありますが、後はＨＴＭＬのどこを見ても＜%freeSpace５%＞と＜%freeSpace６%＞は存在しません。
つまり、＜%freeSpace５%＞と＜%freeSpace６%＞のフリースペースは余っているということです。
サブメニューのフリースペースをメインメニューの上下に表示する
2カラムだとサブメニューのフリースペース＜%freeSpace５%＞と＜%freeSpace６%＞が使われなくなります。これをメインメニューの上下に入れてみます。イメージとしては下の画像のようになります。
テンプレートのHTMLに＜%freeSpace5%＞と＜%freeSpace6%＞を以下のように書き入れます。
サブメニューのフリースペースをメインカラムの上下に表示する
今度は、余ったフリースペースをメインカラムの上下に作ってみます。イメージは下のようなオンのです。
赤枠のところに＜%freeSpace5%＞と＜%freeSpace6%＞を書き入れてください。
ここではメインカラムに二つ増やす方法とメインメニューに二つ増やす方法を紹介しましたが、「メインメカラムに一つメインメニューに一つ」という具合に振り分けも可能です。位置も上下自由にできます。やり方は以上の説明でわかると思います。
ｈｔｍｌの書き換え。保存を忘れずに
ｈｔｍｌの書き換えはトップページ、カテゴリページ、エントリーページすべてで行ってください。
逆に言えばページの種類によってフリースペースの位置や数を変えることができるということです。
ｈｔｍｌの編集がすべて終わったら必ず保存してください。
ページの種類ごとに保存するかすべて編集した後ですべて保存しても結構です。
googleでは追尾型アドセンスをすべてのアカウントに許可した。
昨年よりgoogleでは今まで限られたアカウントにしか許されていなかった追尾型アドセンスをすべてのアカウントに許可しました。
追尾型アドセンスというのはこのページのサイドバー最下にあるアドセンスの事です。
サイドバーが切れてもアドセンスだけ残ってスクロールについてくるのが分かると思います。
追尾型アドセンスはかなりのクリック率のアップが見込まれますので是非導入したいものです。
追尾型アドセンスは結局フリースペース４をスクロールして消えないようにすることで可能になります。
これは、htmlに若干コードを追加しスタイルシートにも加筆します。
シリウスのフリースペースをスクロール追尾型にする方法
まず、シリウス編集タブのHTMLをクリックしてテンプレートのHTMLを開きます。
１、<head>の直下に下のコードを書き込みます。コピペで来ます。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(function() {
var navBox = $("#tuibi");
var navOst = navBox.offset().top;
$(window).scroll( function() {
if( $(window).scrollTop() > navOst ) {
navBox.addClass("tuibiBox");
}
else {
navBox.removeClass("tuibiBox");
}
});
});
</script>
<!-- ★サイドバーフリースペース４追尾ここまで★ -->
２．スクロール追尾させたいフリースペースをタグで囲む。
メインメニューの一番下のフリースペースを以下のようにタグで囲みます。
フリースペースの配置によって番号は変わってきます。
<% freeSpace4 %>
</div>
３、ＣＳＳにコードを加えます。
編集タブのtennpure-ｔｏＨＴＭＬの編集でHTMLの右側にあるCSSを開き一番下に以下のコードを書き込みます。コピペで結構です。
.tuibiBox {
position: fixed;
top: 0px;
}
/*フリースペース追尾*ここまで/
これで、サイドバーの一番下にあるアドセンスは記事が長くて普通は消えてしまう場合でも記事について最後まで表示されます。