ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加！

2015/12/23 : 2016/03/08 : 約 7 分ブログ

新しいサイトデザイン

ハイサイ！ショウ(@OKI_NOTE)です。

久々にブログデザインのカスタマイズをしました！　構想から完成までかけた時間は約1ヶ月(時間あるなら更新しろ←)。ちょっとしたスキマ時間にコツコツやっていたので、なかなかかかりました…。それでも満足いくデザインになったので良しとします。

今回はデザインを変更した部分と、参考にしたサイトを紹介したいと思います。ちなみに僕が利用しているテーマは「Stinger3」です。ちょっと専門的な話になりますが、気になる方は要チェケ！

1 見やすくシンプルなデザインに
2 参考にしたサイトとツール
3 まとめと注意点

見やすくシンプルなデザインに

まずはスマホサイトから。スマホデザインにはけっこう力を入れました。

新スマホデザイン  

記事を見ている最中でもスルスルついてくる固定ヘッダ−。

その下にはおすすめの記事を紹介する自動スライダー。新着記事の紹介はもともとありましたが、サムネイルを小さくしてテキストが目立つようにしました。

固定ヘッダーの「MENU」をクリックすれば、横からスライドしてメニューが現れるドロワーメニューを採用しています。

メニュー内の記事カテゴリーには、現在の記事数をカッコで表示しています。メニュー表示中は、再度「MENU」を押せば閉じますが、左の本文をクリックしても元に戻るようにしました。
 

新スマホデザイン
 

そしてパソコンのデザイン。ヘッダーにおすすめの記事を紹介する自動スライダーのみを設置して、これ以上ゴチャゴチャしないようにしました。横が長いので、スマホよりも多めに、記事が目に入るようになっています。
 

新しいサイトデザイン

参考にしたサイトとツール

今回デザインを変更するにあたって使用したツール元を紹介します。製作者の皆様にはほんとに感謝！　こんな素晴らしいツールを、貼り付けてちょっといじるだけで利用できるなんて便利になったものです。。
 

ドロワーメニューは「SlideIn_Menu」

メニューボタンをクリックすると横からスライドしてくるツールは、こちらを利用しています。
 

[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る｜ memocarilog

スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックすると…

ドロワーメニューに関しては、たくさんのjQueryプラグインを検討しました。「PageSlide」「mmenu」「Slidebars」。どれも使用してみたのですが、うまく動作しなかったので、headerに直接コードをかける「SlideIn_Menu」を採用することに。
 

記事先のjQueryコードを貼り付ければ問題なく動作しました。あとはleftからスライドするのをrightに変更したぐらいかな？
 

自動スライダーは「bxSlider」

自動スライダーに憧れたのは、巷で話題のWordpressテーマ「ハミングバード」の影響です(笑)。

洗練されたデザインにやられました…。見たことある人はすぐにわかるかと思います。同じような動きを求めて利用したのは、ハミングバードでも利用しているであろうJQueryプラグイン「bxSlider」です。
 

簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。 | wordpress＆Me

bxSliderは、レスポンシブWEBデザインにも対応した、jQueryのコンテンツスライダーです。

カスタマイズ事例も豊富にあるので、いろいろと探してみるとすぐ見つかります。ちなみに、リンク先のbxSlider呼び出しコードでは、関数の関係上うまく動作しなかったので、以下のコードを利用しています。
 

<script type="text/javascript">
jQuery(document).ready(function($){
$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pause: 5000,
    minSlides: 3,
    maxSlides:3,
    slideWidth:175,
    moveSlides: 2,
    nextText: '>',
    prevText: '<',
    slideMargin: 10,
    captions: true,
    randomStart:true
  });
});
});
</script>

スライダーに表示する記事を選ぶ場合、ハミングバードだったら管理画面の投稿からタグを付けるだけ。さすがに自分で組み込むには高度すぎるので、なんとか呼び出し関数を引っ張ってきて、cssを調整して表示するようにしました。
 

アイキャッチ画像を取得する「get the post thumbnail」関数をカスタマイズして利用しています。詳しくは省きますが、こんな感じで組み込んでいます。
 

<?php 
$thumbnails = get_posts( array( 'include'=>array( 10517, 9976, 11235,10703,9504,9060,8469,8268) ) );
foreach ( $thumbnails as $thumbnail ) {
  if ( has_post_thumbnail( $thumbnail->ID ) ) {
    // ここにサムネイルやら記事タイトルを呼び出す処理
}}?>

array内の意味深な数字は、記事IDになっています。なので、スライダーに表示したい記事IDを書くだけで表示できるようにしました。ここまでが大変だった。。
 

関数なんていちいち探して検証するのが面倒だよって方は、直接画像とタイトルを貼ってcssで調節するって手もあるので、そちらが確実に早いです(笑)。
 