ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!
: 2016/03/08 :
約 7 分
ブログ
ハイサイ!ショウ(@OKI_NOTE)です。
久々にブログデザインのカスタマイズをしました! 構想から完成までかけた時間は約1ヶ月(時間あるなら更新しろ←)。ちょっとしたスキマ時間にコツコツやっていたので、なかなかかかりました…。それでも満足いくデザインになったので良しとします。
今回はデザインを変更した部分と、参考にしたサイトを紹介したいと思います。ちなみに僕が利用しているテーマは「Stinger3」です。ちょっと専門的な話になりますが、気になる方は要チェケ!
スポンサーリンク
見やすくシンプルなデザインに
まずはスマホサイトから。スマホデザインにはけっこう力を入れました。
記事を見ている最中でもスルスルついてくる固定ヘッダ−。
その下にはおすすめの記事を紹介する自動スライダー。新着記事の紹介はもともとありましたが、サムネイルを小さくしてテキストが目立つようにしました。
固定ヘッダーの「MENU」をクリックすれば、横からスライドしてメニューが現れるドロワーメニューを採用しています。
メニュー内の記事カテゴリーには、現在の記事数をカッコで表示しています。メニュー表示中は、再度「MENU」を押せば閉じますが、左の本文をクリックしても元に戻るようにしました。
そしてパソコンのデザイン。ヘッダーにおすすめの記事を紹介する自動スライダーのみを設置して、これ以上ゴチャゴチャしないようにしました。横が長いので、スマホよりも多めに、記事が目に入るようになっています。
参考にしたサイトとツール
今回デザインを変更するにあたって使用したツール元を紹介します。製作者の皆様にはほんとに感謝! こんな素晴らしいツールを、貼り付けてちょっといじるだけで利用できるなんて便利になったものです。。
ドロワーメニューは「SlideIn_Menu」
メニューボタンをクリックすると横からスライドしてくるツールは、こちらを利用しています。
ドロワーメニューに関しては、たくさんのjQueryプラグインを検討しました。「PageSlide」「mmenu」「Slidebars」。どれも使用してみたのですが、うまく動作しなかったので、headerに直接コードをかける「SlideIn_Menu」を採用することに。
記事先のjQueryコードを貼り付ければ問題なく動作しました。あとはleftからスライドするのをrightに変更したぐらいかな?
自動スライダーは「bxSlider」
自動スライダーに憧れたのは、巷で話題のWordpressテーマ「ハミングバード」の影響です(笑)。
洗練されたデザインにやられました…。見たことある人はすぐにわかるかと思います。同じような動きを求めて利用したのは、ハミングバードでも利用しているであろうJQueryプラグイン「bxSlider」です。
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で調節するって手もあるので、そちらが確実に早いです(笑)。
固定ヘッダーと新着記事
固定ヘッダーは、固定したい部分をシンプルに以下のコードで囲えばOK。これに関しては「固定ヘッダー」と検索をかければたくさんあるので、そちらが参考になります。
#header { position: fixed; }
あとは、見出しなどのページ内リンクをクリックしたときに、ナビゲーションバーに隠れないように調整するぐらいです。
新着記事に関しては、Wordpressテーマ「Stinger」に、元々あった新着呼び出しコードを引用しています。
まとめと注意点
デザインの変更ってけっこうワクワクしますよね。このブログは定期的にカスタマイズして、自分でも管理できないほどいじってしまいました。
なので、紹介したコードを利用しても、全然動かないことがほとんどかもしれません。あくまで、「こんなツールを利用してこんな風になったよ!」てことを理解していただければと思います。
最後投げやりw
もちろん、カスタマイズは自己責任でお願いします。

しばらくはコードみたくない!(笑)
合わせてこちらもどうぞ:
OKINOTEからお知らせ
沖縄の役立つリンクまとめ始めました。
沖縄ファミリーマート初寄稿記事 !沖縄の道の駅を取材しました。
地元ンチュがおすすめ!許田、糸満、ぎのざ・・7つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)
スポンサーリンク
ad
シェア感謝です! \(^o^)/
-
-
Stingerにソースコードを表示する『Highlight.js』を実装しました
カスタマイズで必至のソースコード表示 ブログがある程度落ち着いてきたらレイアウトやデザインを変更するカスタマイズに挑戦したくなりますよね。このブログもたく…
-
-
OKINOTE ロゴ デザインしました。
サイトのイメージをロゴに表現してみました。 『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…
-
-
5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!
ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。 AppStoreHelperは、AppleのApp Store 、…
-
-
音声で客観的に分析!読み上げアプリを使って自分のブログ記事を聴いてみたよ
※ワケあっていつもと雰囲気を変えています。 ウェウェウェーイ!諸行無常、盛者必衰の理をあらわすショウ(@OKI_NOTE)です。 前回、記事タイトル…
-
-
ブログ連続更新100日突破して思うこと。生い立ちから振り返ってみる。
OKINOTEを始めてから早100日。 毎日更新を目標にして気づけば100日目になりました。 100日連続更…
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
【2014年】買ってよかったものまとめ
2014年はブログを始めた年でもあったのですが、なんだかんだであっという間に過ぎました。当ブログでも紹介した商品もありますが、2014年買ってよかったものを7つ紹介したいと…
-
-
オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法
MarsEditはオフライン時スタイルが適用されない? ハイサイ!ショウ(@OKI_NOTE)です。 最近MarsEditでブロ…
-
-
30日の無料期間あり!ブログエディタ『MarsEdit』の導入&初期設定方法
多くのブロガーが愛用している記事作成ツール「MarsEdit (マーズ・エディット)」。ブロガー必読のこちらの本にも利用のすすめが書かれていました。 必ず…
-
-
写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり
するぷろを1週間して使用してみて思ったこと ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…