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

: 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^)/

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
iPhoneアプリ「するぷろ」

写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり

  するぷろを1週間して使用してみて思ったこと   ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…

記事を読む

2014年買ってよかったものまとめ BOSEスピーカー

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

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

記事を読む

100 Day

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

okinote_10k

OKINOTE ロゴ デザインしました。

サイトのイメージをロゴに表現してみました。   『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…

記事を読む

2014-0307.4

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

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

記事を読む

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

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

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

記事を読む

広告 OKINOTE サムネイル

LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。

    今月で半年を迎えるこのブログ。   おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。   …

記事を読む

ad

かりゆしミリオンファンタジー
【画像】140万球のイルミネーションが無料!恩納村の「かりゆしビーチリゾート・オーシャンスパ」

沖縄の3大イルミネーションの1つ、かりゆしビーチリゾートの「ミリオンフ…

ブルーシール
【画像】ずっと見ていたい。ブルーシール牧港本店のイルミネーション

11月1日に点灯式が開催されイルミネーションで彩られるブルーシール牧港…

沖縄観光先読みカレンダーPRO
海外観光客の動きがわかる?「沖縄観光先読みカレンダーPRO」2017年版

外国人観光客の動向を先読みする目的で千部限定1部500円で販売している…

桑っちーグランプリ&スイーツフェア
浦添特産といえば島桑。地元が集う『第5回桑っちーグランプリ&スイーツフェア』

浦添市で毎年開催している島桑イベント。そもそもなぜ桑なのかというと、浦…

沖縄大百科事典
「ン」で始まる言葉も⁉︎ 沖縄を詳細に記した最初で最後の『沖縄大百科事典』とは?

沖縄タイムス社が創刊35周年を記念し1983年に発行した百科事典。上中…

那覇大綱挽
世界最大級の全長200㍍! 第46回『那覇大綱挽まつり』2016の熱気を感じてきた!

今年で46回目となる「那覇大綱挽(ひき)まつり」。全長200メートル、…

meetuplogo2_resize
沖縄ブロガーミートアップvol.2開催します!

10月16日に沖縄ブロガーミートアップvol.2を開催することになりま…

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