Seesaaブログ マカロン両サイドバーテンプレート

これまでSeesaaブログのレスポンシブデザインカスタマイズについていろいろと書いているのですが、左サイドバーと両サイドバーは左サイドバーの扱いが面倒くさいから触れていませんでした。

色々と勉強していくうちに左サイドバーの扱いは別段面倒では無いことをつい最近知りました。

このブログでもスーパー超シンプルテンプレートでも条件によってjQueryで広告を移動させてますけど、それを使えば良いだけだったのであります。

Seesaaブログの左サイドバーと両サイドバーを jQuery で移動してレスポンシブにカスタマイズしてみます。

Sponsored Link

ちょうど1年前のこと。このブログは両サイドバーでして、左サイドバーのあるブログをレスポンシブにするなら、左サイドバーを PC 版とスマホ版の2つ用意しておいて、メディアクエリで PC版を display: none、スマホ版を display:block で表示・非表示を切り替える。というやり方をしてますと投稿しました。» レスポンシブとdisplay noneとnofollowとペナルティ

あのときはそういうやり方しか知らなくてそうしてましたが、まあ稚拙だったこと。jQuery で左サイドバーを移動すればいとも簡単にレスポンシブでモバイル対応になるということを知るのに1年も掛かりましたが、このやり方であれば、nofollow だ display none だペナルティだと悩まずに済みますし、超カンタンです。

jQueryで要素を移動する

まずjQueryを使って要素を移動する基本から。

$('移動元の要素').insertBefore('移動先の要素');

今回は insertBefore と insertAfter を使います。insertBefore, insertAfter の他にも単に before, after, append とか色々あるので調べてみてください。

レスポンシブのレイアウトを決める

レスポンシブデザインで左サイドバーを移動する前提となるレイアウトを決めます。

左サイドバーは

  • 左サイドバーテンプレートではコンテンツ(記事のブロック)の下
  • 両サイドバーではコンテンツ、左サイドバー、そして右サイドバーと並べるとして、右サイドバーの上

ということにします。

お気付きかもしれませんが、これ実はどちらもコンテンツの下ということです。今回はinsertBeforeとinsertAfterがありますよというサンプルで敢えて両方使います。

それから両サイドバーの場合、左右どちらが先に出現したほうが良いかは好みとサイドバーの内容に依るので状況に応じて決めたほうが良いと思います。

移動元と移動先の要素を特定する

具体的な移動先、移動元の要素は左サイドバー(id="links-left")が #links-left、移動先のコンテンツ(id="content")が #content、右サイドバー(id="links")が #links です。

左サイドバーテンプレートの場合
コンテンツブロックの下に移動する。

$('#links-left').insertAfter('#content');


両サイドバーテンプレートの場合
右サイドバーの上に移動する。

$('#links-left').insertBefore('#links');

となります。

jQueryで表示幅を判断してから移動させる

上記で移動しますが、このままでは何の条件もなく移動することになってしまいます。レスポンシブデザインなので表示幅によって移動するしないを決めなくてはいけません。

仮にブレイクポイントを768pxとして表示幅が768px以下になったら実行するようにしてみます。

左サイドバーの場合

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
  $(window).one("load resize", init);
    function init(){
      var _width = $(window).width();
      if(_width <= 768){
        $('#links-left').insertAfter('#content');

      }else{
      }
    }
});
</script>

両サイドバーの場合

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
  $(window).one("load resize", init);
    function init(){
      var _width = $(window).width();
      if(_width <= 768){
        $('#links-left').insertBefore('#links');

      }else{
      }
    }
});
</script>

左サイドバーと両サイドバーでは.insertBeforeと.insertAfter に違いがあるので(太字部分)要注意。青色の $(window).one("load resize", init); は読み込み時とリサイズ時に1回だけ実行ということで、毎回実行するなら .one を .on に変更します。

このトリガーに関しては、移動させると JavaScript のアドセンス広告が表示されたりされなかったりと、スーパー超シンプルテンプレートのアドセンス広告の移動で散々悩みました。

試行錯誤の末、ボクは .one にしています。

アドセンス広告コードだけでなく、ASP広告でスクリプトを使っていたり、サイドバーの要素を追尾にするコードがあったりすると上手く動作しないのかもしれません。

レスポンシブにしたときのスタイルシート

ここでは具体的なスタイルは挙げませんけど、links と links-left は基本的に同じ構造です。カンタンにレスポンシブにする方法をご紹介した記事などをご覧になって、既にメディアクエリーを書いたことがあるということであれば、右サイドバー #links のところに左サイドバー #links-left を並記すれば良いのかなと。

例えば下記のようなスタイルを

#links{width:100%;margin:0;padding:0 5%}

こんなふうに。

#links,#links-left{width:100%;margin:0;padding:0 5%}

レスポンシブで縦に並べば右も左もないので、CSS の #links を検索してメディアクエリでは左右同じスタイルにします。

おわりに

ボクはブログのカスタマイズを初めた頃は両サイドバーが大好きで、特にサイドバーを2つとも右に寄せていました。Seesaa も FC2 も livedoor も 269g もみぶろぐも Google Blogger も何から何までほぼ全部。先述の通りこのブログもかつては両サイドバー右2列パターン。

歳を取ってくると両サイドバーって文字がチラチラしてすごく見辛い。運営する上では2つもサイドバーを埋めなきゃいけないので無駄なブログパーツを追加して、広告バナーを貼って見てくれを良くしてと。

最近は無駄なブログパーツやランキングバナーや広告が表示速度を落として閲覧者の離脱につながっている気がして年寄らしくシンプルなテンプレートに嗜好が変わってます。特にレスポンシブにするぞというときはモバイルフレンドリーがとても重要な要素になると思われますので軽くするに越したことはないですね。

両サイドバーをレスポンシブにする方法もありだし、サイドバーは1つにできないか検討するのもありだし。あくまでも個人的な意見ですけど。

Sponsored Link

この記事へのコメント

2件
とても参考になりました。
活用させていただきたいと思います。
ありがとうございます。
at
YMSさん
お役に立てたのであれば幸いです。
echo at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link