ようやくブログとしての形が整ってきました。。まず始めるには形から入らないといけないタイプで、きちんと整えないと、なかなか進み出せません。。。悪い癖ですが。。。
はてなブログも、色々な箇所をカスタマイズできるので、一通り自分好みにカスタマイズしました。PCもスマホも、だいぶCSSなりJavaScriptなり適用されています。ここまで行ったカスタマイズをまとめてみたいと思います。
なお、はてなブログpro契約が前提です。
この記事の目次
ヘッダーメニューの作成
PC版
PCで閲覧すると、ブログタイトルの下にメニューがいくつか表示されますが、その部分。
そのカスタマイズは、下記の参照しました。本当は、ヘッダー画像とか付けたいのですが、用意出来ていないのでいずれ・・・。
【2016/05/21追記】
ヘッダーを画像に変えました。こちらも、上記記事を参考にしています。
ちょっと地味なので、ヘッダー画像はまたどうにかしたいな・・・。
スマホ部分
スマホでも、PC同様のメニューが表示されるようにしています。
画像では全て表示されていますが、「MENU」をタップすると下にうにょんと表示されるようにしています。
それはこちらを参照しました。
トップへ戻るボタン（PC）
PC表示で少しスクロールすると、右下にこのようなボタンが出るようにしています。
クリックすると、うにょーんって1番上までスクロールしてくれます。記事を最後まで読んで、1番上に戻りたい時など便利ですね。その設置は下記記事を参考にしました。
サイドバーのSNSボタンリンク
サイドバーのプロフィールの下に、各SNSへのリンクボタンを貼っております。はてなブログの読者になるボタンもここにまとめています。
こちらの記事を参照にしました。
スマホも同様に、上記の設定を適用しています。
このSNSボタンは、PCではサイドバーと記事下に設定しているプロフィール情報の下、スマホでも、同様に記事下にプロフィールを置いているのでそこに設置しました。
記事上下のシェアボタン（PC＆スマホ）
記事上下に表示しているシェアボタンは、デフォルトのものは使わず（表示はオフ）、下記記事で参考にしたやり方で設置しています。これはパソコンでの表示でもスマホでの表示でも同様。
スマホに月別アーカイブを表示
PC表示では用意されている月別アーカイブ。これをスマホにも表示させています。
それはこちらの記事を参考にしました。
スマホに複合メニューバーを設置
スマホでみた時に1番下につく、HOMEへのリンク、人気記事一覧、カテゴリ一覧、トップに戻るリンクのメニューバーです。それは下記記事を参照。
記事下に最新記事を表示（PC＆スマホ）
記事下には、PCスマホ共に最新記事を表示させています。
これは、忍者ツールというサービスを使用しました。下記記事を元に作成しました。
今は忍者レコメンドではなく、忍者RSSというサービスに変わっているっぽいですね。
【2017/7/24追記】
現在こちらは外しております。
アドセンスを記事一覧やカテゴリ一覧などアーカイブページに表示（スマホ）
アドセンスを記事上下等に設定すると、トップ画面ではアドセンスが表示されなくなります。そこで、一覧ページにアドセンスを表示させるためのカスタマイズがこちら。
【2017/7/24追記】
現在こちらは外しております。
目次やリストデザイン
ブログの開始あたりにつける目次のデザインや、リストデザインも変更しています。
目次デザイン
目次のデザインは下記記事を参考にしています。
関連記事表示デザイン
関連記事の表示デザインは次の記事を参考にしています。
リストデザイン
リストデザインとはこんな感じのやつです。
- リスト1
- リスト2
- リスト3
通常のリストよりもかなり見やすくデザインされています。
リストデザインは下記記事を参考にしています。。
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに
さるわかさんはわかりやすくかわいいデザインが多く用意されているので、ほんとに参考になってます。感謝です。
この辺のボックスデザインもキレイなのでおすすめ。
ポイントのデザインなどは、強調したい部分や主張したい箇所に使うと効果が発揮できそうです。
その他設定（続きを読む・関連記事表示・サイドバー固定・AdSenseの記事中央表示・不要部分の削除）
その他の細かいデザイン調整や、続きを読むボタンのデザイナイズ、パンくずリストの表示、記事下に配置している関連記事の表示、サイドバーに追尾する固定部分の表示、アドセンスを自動的に記事の中央に持っていく表示、後は閲覧するにあたって不要な部分の削除方法など、細かい部分は下記記事を参考にしました。
この記事では、
- 文字サイズや行間の調整
- 続きを読むボタン
- 関連記事の表示
- サイドバーの固定表示
- アドセンスの記事中央への自動表示
- 不要な部分の削除
といった箇所を参考にしています。
他はこちらの記事もカスタマイズにおいてオススメ。
ブログの記事上にある、所属カテゴリのこういった表記も、パンくずを適用されるとこういう表示になります。
【2017/7/24追記】
現在こちらは外しております。
パンくずに関しては、はてなブログに機能が追加されていましたので、デフォルトの機能を使っております。
後は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みたいに条件分岐させるような機能がつけばいいんだけどなぁ。。。。
最後に
以上、カスタマイズした箇所をまとめました。ほぼ、ぐぐってはコピペしての作業だったので、これまでやり方を書いてくださったブロガーの方々には本当に感謝します！
コメントを残す