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

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

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
Stinger5

Stinger3から乗り換えずにStinger5のメリットを取り入れよう

レスポンシブデザインの魅力   ブログデザインの骨格でもあるテーマ。このブログは開設当初からStinger3を使用していますが、Stinger5がリリースされたことで乗り換えようか迷…

記事を読む

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

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

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

記事を読む

HTML支援ツールDASH.

ブログ初心者の執筆効率化に最適!ユーザー辞書よりDASHを導入しよう!

  ハイサイ!ショウ(@OKI_NOTE)です。 ブログ効率化を図るために、以下の記事を読んで導入したMacアプリ「DASH」が便利すぎて感動しました!(いまさら) &nb…

記事を読む

iPhoneアプリ「するぷろ」

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

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

記事を読む

Mac ソフトツール appstorehelper

5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!

    ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。   AppStoreHelperは、AppleのApp Store 、…

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

computer

ブログはじめました。

  きっかけはひとつの記事。   ーインターネット文化における「1%ルール」とは? / GIGAZINE photo credit: ingrid eu…

記事を読む

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

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

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

記事を読む

ブログ SEO アクセス

SEO的な観点から過去記事の修正はNG?

    このブログの運営を始めて半年以上経過し記事も250以上になりました。   検索流入が9割を占める当ブログ。   月間1…

記事を読む

ad

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

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

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

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

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

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

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

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

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

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

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

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

2016年買ってよかったものまとめ
カメラ機材とおつまみ。2016年買ってよかったものまとめ

振り返りの季節。2016年は、物はそんなに買っていないものの、一眼レフ…

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