みやちまん.com

ネットショップコンサルティングを展開する株式会社302代表ブログ

はてなブログを改造するにあたって行ったカスタマイズまとめ【PC+スマホ】

スポンサーリンク

f:id:masa381man:20160314120731j:plain

ようやくブログとしての形が整ってきました。。まず始めるには形から入らないといけないタイプで、きちんと整えないと、なかなか進み出せません。。。悪い癖ですが。。。

はてなブログも、色々な箇所をカスタマイズできるので、一通り自分好みにカスタマイズしました。PCもスマホも、だいぶCSSなりJavaScriptなり適用されています。ここまで行ったカスタマイズをまとめてみたいと思います。

なお、はてなブログpro契約が前提です。

ヘッダーメニューの作成

PC版

PCで閲覧すると、ブログタイトルの下にメニューがいくつか表示されますが、その部分。

f:id:masa381man:20160314110451j:plain

そのカスタマイズは、下記の参照しました。本当は、ヘッダー画像とか付けたいのですが、用意出来ていないのでいずれ・・・。

www.dagasorega-e.net

【2016/05/21追記】
ヘッダーを画像に変えました。こちらも、上記記事を参考にしています。

ちょっと地味なので、ヘッダー画像はまたどうにかしたいな・・・。

スマホ部分

スマホでも、PC同様のメニューが表示されるようにしています。

f:id:masa381man:20160314110610j:plain

画像では全て表示されていますが、「MENU」をタップすると下にうにょんと表示されるようにしています。

それはこちらを参照しました。

www.yukihy.com

トップへ戻るボタン(PC)

PC表示で少しスクロールすると、右下にこのようなボタンが出るようにしています。

f:id:masa381man:20160314112127j:plain

クリックすると、うにょーんって1番上までスクロールしてくれます。記事を最後まで読んで、1番上に戻りたい時など便利ですね。その設置は下記記事を参考にしました。

nohack-nolife.hatenablog.com

サイドバーのSNSボタンリンク

サイドバーのプロフィールの下に、各SNSへのリンクボタンを貼っております。はてなブログの読者になるボタンもここにまとめています。

f:id:masa381man:20160314110855j:plain

こちらの記事を参照にしました。

www.ituore.com

スマホも同様に、上記の設定を適用しています。

f:id:masa381man:20160314111118j:plain

このSNSボタンは、PCではサイドバーと記事下に設定しているプロフィール情報の下、スマホでも、同様に記事下にプロフィールを置いているのでそこに設置しました。

記事上下のシェアボタン(PC&スマホ)

記事上下に表示しているシェアボタンは、デフォルトのものは使わず(表示はオフ)、下記記事で参考にしたやり方で設置しています。これはパソコンでの表示でもスマホでの表示でも同様。

www.yukihy.com

スマホに月別アーカイブを表示

PC表示では用意されている月別アーカイブ。これをスマホにも表示させています。

f:id:masa381man:20160314113228j:plain

それはこちらの記事を参考にしました。

www.shachikuman.com

スマホに複合メニューバーを設置

f:id:masa381man:20160314113817j:plain

スマホでみた時に1番下につく、HOMEへのリンク、人気記事一覧、カテゴリ一覧、トップに戻るリンクのメニューバーです。それは下記記事を参照。

www.yukihy.com

記事下に最新記事を表示(PC&スマホ)

記事下には、PCスマホ共に最新記事を表示させています。

f:id:masa381man:20160314114044j:plain

これは、忍者ツールというサービスを使用しました。下記記事を元に作成しました。

www.shoichikasuo.com

今は忍者レコメンドではなく、忍者RSSというサービスに変わっているっぽいですね。

アドセンスを記事一覧やカテゴリ一覧などアーカイブページに表示(スマホ)

アドセンスを記事上下等に設定すると、トップ画面ではアドセンスが表示されなくなります。そこで、一覧ページにアドセンスを表示させるためのカスタマイズがこちら。

psn.hatenablog.jp

その他設定(続きを読む・パンくず表示・関連記事表示・サイドバー固定・AdSenseの記事中央表示・不要部分の削除)

その他の細かいデザイン調整や、続きを読むボタンのデザイナイズ、パンくずリストの表示、記事下に配置している関連記事の表示、サイドバーに追尾する固定部分の表示、アドセンスを自動的に記事の中央に持っていく表示、後は閲覧するにあたって不要な部分の削除方法など、細かい部分は下記記事を参考にしました。

http://www.dekihiroyoshi.com/entry/2015/12/02/055243www.dekihiroyoshi.com

他はこちらの記事もカスタマイズにおいてオススメ。

www.kokoro-fire.com

ブログの記事上にある、所属カテゴリのこういった表記も、パンくずを適用されるとこういう表示になります。

f:id:masa381man:20160314112336j:plain

後はCSSやJavaScriptデータを外部読込に(PC&スマホ)

カスタマイズをやっていて思うのですが、毎回はてな上でCSSなりJavaScriptなり入力していく作業は骨が折れます。めんどくさいです。編集しづらいし。。。そのため、CSSファイルとJavaScriptファイルをまとめ、別サーバーに上げ、読み込ませることにしました。

なぜか、「@import」で読み込ませることができなかったので、フッターに下記のように書いて外部読込させています。

<link rel="stylesheet" type="text/css" "cssの外部ファイル絶対パス">
<script src="JavaScriptの外部ファイル絶対パス" charset="utf-8"></script>

これはPC・スマホ両方設定しています。

これで、CSSやJavaScriptを編集したり追加したりする際は、わざわざ管理画面を開かずともファイルを直接編集してFTPでアップロードすることで解決します。

どうしても実現できなかったこと

はてなブログでは、記事上下にアドセンスを設定するため、記事一覧ページやトップページにアドセンスを貼ることができません。

記事一覧の途中に表示させるやり方は、上に紹介した方法でできますが、それでも1つだけ。せっかくだから、3つ表示させたいのですが、それができず。。。

検索しても出てこなかったので、PHPみたいに条件分岐させるような機能がつけばいいんだけどなぁ。。。。

最後に

以上、カスタマイズした箇所をまとめました。ほぼ、ぐぐってはコピペしての作業だったので、これまでやり方を書いてくださったブロガーの方々には本当に感謝します!

CEO BLOG 302inc.

twitter / facebook / Google+

Copyright© CEO BLOG 302inc. , 2015 All Rights Reserved.