loglog

『おもしろい!』が発見できる個人ブログを。

はてなブログのカスタマイズが記事を書くの忘れるほど楽しい

広告

どうもogasawaraです。

歩みは亀の如くですが、このブログ「loglog」も少しずつ前進しています。

グローバルメニューを作ったり、レスポンシブにしたり、パンくずリスト表示させたり。それに、便利なプラグインを拝借したりと色々やったはいいものの忘れてしまいそうなのでメモとして残しておきます。

ブログをカスタマイズしていると記事を書くのも忘れるほど熱中してしまいます。その楽しさを少しでも伝えることが出来たらなと思っています。

f:id:studio_one:20150917111233p:plain

グローバルメニューを作って設置した

こちらの記事を参考にさせて頂きました。

www.yukihy.com

多少HTMLやCSS3の知識が必要ですが、とても分かりやすく解説されていて簡単にグローバルメニューを設置出来ます。

 

「CSS Menu Maker」というサービスも役にたちます。気に入ったデザインをDLしてコードを少し書き換えればOKです。

あとは、ダッシュボードにあるデザインからヘッダタイトル下にHtmlを貼り付けて、デザインCSSにDLしてきたCSSコードを貼り付けましょう。

CSS MenuMaker | HTML, CSS, & jQuery Menus

 

レスポンシブにしてみた

これだけではレスポンシブ化はしないので、次にはてなブログがきちんとレスポンシブする様に設定します。

ダッシュボードにあるデザインからこの画面までいってスマホのアイコンをクリックします。そして詳細設定をクリックするとレスポンシブの設定が出てくるのでチェックボックスにチェックを入れて保存です。

f:id:studio_one:20150912112601p:plain

※ご利用中のテーマがレスポンシブに対応している必要があります。僕はこちらのテーマを使わせて頂いています。シンプルで凄く使いやすいテーマです。

Simple Gray - テーマ ストア - はてなブログ

 

実機でいちいちテストするのはめんどう

簡易的な確認だったら実機を使わなくともChromeとかFirefoxの様なブラウザのデベロッパーツールでスマホでの表示を確認することができます。

使い方はChromeの場合は、ブラウザにカーソルを合わせて右クリック、一番下にある要素の検証からソースコードが表示されているところにスマホのアイコンがあると思うのでそこを押すとエミュレーション出来ます。Firefoxも同じく右クリックで一番下にある要素の調査です。

 

問題なく設定が出来ていると画面の表示幅によってグローバルメニューがトグルに切り変わる筈です。

 

あるえ?レスポンシブになってないんだけど…。となった人は、ヴューポートの設定をしてみましょう。

ヘッダの記事下に、このコードを貼り付けてみてください。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

簡単に説明すると、initial-scaleが1に設定されていないのと初期の倍率が指定されていないので、スマホで表示する際に自動で縮小して表示されてしまうんです。

最後のuser-scalableというのは、ユーザーにズーム操作を許すか否かという設定なので、ズームしてもいいよという人は、消してください。これをnoで設定しておくメリットは誤って画面を縮小してしまったりズームしてしまったりで画面がズレることがないということ位です。

 

そして最後にモバイルフレンドリーのテストもしっかりしておきましょう。

モバイル フレンドリー テスト

パンくずリスト実装したり便利なプラグインをお借りしました

こちらの記事を参考にさせて頂きました。 

bulldra.hatenablog.com

 コードを貼り付けるだけで実装することができます。開発者様には頭があがりません。

更に、合わせて読みたい記事を表示してくれる便利なプラグインもお借りしています。
本当に助かります。

 

 

TOPへ戻るボタンを設定した

こちらの記事を参考にさせて頂きました。

www.webopixel.net

貼り付けるだけで実装出来ますが、多少javascriptやJqueryを触ったことあればよりスムーズに実装出来るかも知れないです。

ためになる記事がたくさんあるのでオススメです。

 

まとめ

他にもやりたいことはたくさんあるのですが、今回はここで置いてぼちぼちカスタマイズしていく予定です。