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

: 2016/03/08 : 7 ブログ

新しいサイトデザイン
 

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

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

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

 

スポンサーリンク

 

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


 

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

 

新スマホデザイン
 

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

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

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

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

 

新スマホデザイン

 

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

 

新しいサイトデザイン

 

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

 

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

 

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

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

 

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

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


 

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

 

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

 

自動スライダーは「bxSlider」

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

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

 

簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。 | wordpress&Me簡単に設置出来る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で調節するって手もあるので、そちらが確実に早いです(笑)。

 

固定ヘッダーと新着記事

固定ヘッダーは、固定したい部分をシンプルに以下のコードで囲えばOK。これに関しては「固定ヘッダー」と検索をかければたくさんあるので、そちらが参考になります。

#header {
	position: fixed;
}

 

あとは、見出しなどのページ内リンクをクリックしたときに、ナビゲーションバーに隠れないように調整するぐらいです。

 

Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIGFixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG

最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に…


 

新着記事に関しては、Wordpressテーマ「Stinger」に、元々あった新着呼び出しコードを引用しています。

 

 

まとめと注意点


 

デザインの変更ってけっこうワクワクしますよね。このブログは定期的にカスタマイズして、自分でも管理できないほどいじってしまいました。

なので、紹介したコードを利用しても、全然動かないことがほとんどかもしれません。あくまで、「こんなツールを利用してこんな風になったよ!」てことを理解していただければと思います。

最後投げやりw

もちろん、カスタマイズは自己責任でお願いします。

 

 

管理人
ひとこと

しばらくはコードみたくない!(笑)

 

合わせてこちらもどうぞ:

 


OKINOTEからお知らせ

  

沖縄の役立つリンクまとめ始めました。


沖縄ファミリーマート初寄稿記事 !沖縄の道の駅を取材しました。
地元ンチュがおすすめ!許田、糸満、ぎのざ・・7つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)

  

[随時更新]Amazonのほしい物リストを公開中!

スポンサーリンク

ad


シェア感謝です! \(^o^)/

本日の「ブログ」カテゴリ人気記事!

まだデータがありません。

この記事似てるかも?
2014年買ってよかったものまとめ BOSEスピーカー

【2014年】買ってよかったものまとめ

  2014年はブログを始めた年でもあったのですが、なんだかんだであっという間に過ぎました。当ブログでも紹介した商品もありますが、2014年買ってよかったものを7つ紹介したいと…

記事を読む

ブログエディタ『MarsEdit』の導入&初期設定方法.jpeg

30日の無料期間あり!ブログエディタ『MarsEdit』の導入&初期設定方法

  多くのブロガーが愛用している記事作成ツール「MarsEdit (マーズ・エディット)」。ブロガー必読のこちらの本にも利用のすすめが書かれていました。   必ず…

記事を読む

2014-0309 copy

月間160万PVのプロプロガー”立花岳志”氏の7つ道具

  立花岳志さんといえば、「No Second Life」というサイトの管理人で月間160万PVを突破するプロプロガーです。 アップル系ガジェットやネット関連、書評、ライフハック…

記事を読む

Google AdSense アドセンス お知らせ

Google Adsenseが広告表示回数100万回の目標達成を祝ってくれたよ

  おや?アドセンスの様子が…   先日、いつものようにGoogle Adscense (グーグル・アドセンス)で本日の見積もり収益額を見ようと開いたらこんなポップが表示…

記事を読む

2014-0307.4

ブロガーに朗報!ゲッティイメージズが提供する高品質画像が非商用で埋込み可能に

    写真・動画の著作権使用権利などのサービスを行っているGetty Images(ゲッティイメージズ)。 3月6日に非商用目的に限り、写真の埋め込みツール…

記事を読む

ソースコードを表示 Highlight.js

Stingerにソースコードを表示する『Highlight.js』を実装しました

  カスタマイズで必至のソースコード表示   ブログがある程度落ち着いてきたらレイアウトやデザインを変更するカスタマイズに挑戦したくなりますよね。このブログもたく…

記事を読む

タイトルと内容のバランス

記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!

そのタイトル、自己満じゃありませんか?   ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…

記事を読む

沖縄タイムスプラスロゴ

【報告】沖縄の2大地方紙『沖縄タイムス』のWebサイトに寄稿を始めました。

この度、OKINOTEは沖縄タイムスのWebサイト「沖縄タイムス+プラス」で記事を書くことになりました。今回は、さっそく寄稿した記事含め、担当するページや寄稿に至ったまでの経緯を紹介したいと思います。…

記事を読む

OKINOTE ロリポップ Xサーバー Wordpress

ロリポップからエックスサーバーに移転した理由

    サーバーを移転しました。   ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …

記事を読む

100 Day

ブログ連続更新100日突破して思うこと。生い立ちから振り返ってみる。

    OKINOTEを始めてから早100日。   毎日更新を目標にして気づけば100日目になりました。   100日連続更…

記事を読む

ad

糸満の電照菊
秋夜彩る電照菊。南部有数の糸満市小波蔵はドライブコースに最適

  涼しくなってきたこの時期。いかとお過ごしで…

「美らイチゴ糸満農園」
予約不要でいちご狩り。南部に「美らイチゴ糸満農園」がオープン!

2017年2月15日に開園した新いちご狩りスポットに行ってきました。予…

ルネッサンスリゾートオキナワのイルミネーション
プールに浮かぶ青イルカ。ホテル『ルネッサンスリゾート』のイルミネーション

大きく光る「R」のロゴ。ホテルのビーチエリアに約8万球の明かりが灯りま…

中国式庭園・福州園のライトアップ
日本百名月に認定。那覇市『福州園』の夜間特別ライトアップ

異国情緒あふれる那覇市『福州園』。ライトアップイベントは、2016年度…

2017-0327.4.jpg
海も見渡せる沖縄最北端の花カーニバル『東村つつじ祭り』に行ってきた。

那覇から片道2時間半。沖縄最北端の花カーニバル『東村つつじ祭り』に行っ…

ケータリングサービスinOIST
上間弁当てんぷらの新サービスがお洒落すぎて紹介せずにはいられない

弁当や惣菜でおなじみの「上間弁当てんぷら」が新ケータリングサービス"C…

名護城公園ビジターセンターSubaco(すばこ)
こんなところに!沖縄建築賞受賞の穴場カフェ『名護城公園ビジターセンター』

2015年7月にオープンした新施設「名護城公園ビジターセンター Sub…

  • LINE スタンプ記事一覧へ ニューヨークの記事一覧へ 沖縄関連の記事へ starbucksの記事へ EOS70Dの記事へ