はてなブログをカスタマイズしてみた（第2回）
こんにちは、鬱太郎です。最近、当初の目的であるプログラミングの勉強そっちのけでいろいろなことをして時間をつぶしてしまっています。でも、ただ意味もなく引きこもるよりはいいよね！今日は昨日までにした自分のブログのカスタマイズをまとめたいと思います。ごめんなさい( ;∀;)
テーマの変更
テーマを変更しました。Brooklynというテーマです。リンクはこちら
製作者さんのブログに詳しいカスタマイズ内容がかかれています
私は美的センス、ユーザビリティセンスが皆無なので、ランキング一位の一番インストールされているテーマを使用しました。
一番インストールされているんだ。一番いいテーマに決まっている！
Q.E.D. 証明終了32巻より
という冗談は置いといてｗ
実際素敵なテーマです。ありがとうございます！
Brooklynテーマの良い点
このテーマを使用してよかった点を挙げたいと思います。
- レスポンシブデザインに対応
- 追従式のグローバルメニューバーに対応
- 素敵なシェアボタンに対応
- シンプルな読者になるボタンに対応
です。これらを説明していきますね。
1.レスポンシブデザインに対応
スマホでPCの様に閲覧できるレスポンシブデザインに対応しています。
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部としての閲覧者の近さがRWDの延長部分と見なされている。ニールセンノルマングループは、「コンテンツ、デザイン、そしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。
私のブログを見てくださっている方の70%がスマートフォンからでした。今まで、パソコン画面で編集して記事をみてきましたので事のやばさに気づきませんでした。さすがに、これではまずいと思いスマートフォン向けに対応しているデザインにしようと思いました。
そしたら、元からこのデザインは対応していることを知りましたｗ ただし、レスポンシブデザインに対応していても、はてなブログの方で設定しなくては、反映されません。
はてなブログでレスポンシブデザインを設定する方法
はてなブログでは、「デザイン」→「スマートフォン」→「詳細設定」から設定できます。
2.追従式のグローバルメニューバーに対応
色々なサイトや読者さんのブログを見ていると、ブログのどこを見ていても画面上部にメニューバーが表示されて いるものがありますよね。
かっこいい！
これも、このテーマでは対応しています。ただし、製作者さんのブログに書いてあるコードを追加する必要があります。
グローバルメニューバーはHTML、CSS、JavaScriptの3つで作ります。テーマに含まれている部分はCSSしかないので、残りのHTMLやJavaScriptのコードは作者さんのものを指定の場所にコピペする必要があります。
3.素敵なシェアボタンに対応
はてなブログの記事下における元からあるシェアボタンはそれぞれの大きさがバラバラですよね。あと読み込みが遅いときがあります。このテーマはシェアボタンの数には劣るものの、デザインは素晴らしく素敵なシェアボタンを追加することができます。
かっこいい！×2
これも、製作者さんのブログに書いてあるコードを追加する必要があります。
4.シンプルな読者になるボタンに対応
はてなブログの読者登録ボタンはスマートでよいものだと思います。ただし、小さすぎることと、読み込みに時間がかかることがちょっと気になっていました。
かっこいい！×3
これも製作者さんのブログに書いてあるコードを追加すれば素敵なボタンが使えます。
フォローボタンを作成
読者登録ボタンのCSSをいじって新しくフォローボタンを作りました。
製作者さんの他の記事にてもっと素敵なものがあるのに、作った後に気づきました(´;ω;｀)
ま、まあ、CSSの勉強になったしいいかな…！
他のモジュール等のmarginを変更
サイドバーにあるプロフィールや過去記事等の隙間が空きすぎている気がしたので、それらの隙間を少し減らしました。
これが悪手でなければいいんですが…
記事の下に出る関連記事等の順番を変更
はてなブログでは記事の下に、任意のHTMLコードを入力できます。しかし、その入力したHTMLが出現する場所があまりにも下すぎます。デフォルトでは
- はてなブックマークのコメント欄
- 関連記事
- ユーザーのHTML
いや、、下すぎでしょｗ せっかく記事下に表示させたつもりの読者登録ボタンとフォローボタンが地の底まで掘り進んでしまいます。
これを
- ユーザーのHTML
- はてなブックマークのコメント欄
- 関連記事
こうしたいと思いました。こうすれば、今のように記事の下にはてなスター。そしてシェアボタン、読者登録ボタンとフォローボタンと表示できます。
ネットで探してみると偶然にもまさかのこのテーマの作者さんが対応策を載せてくれてました。ありがとうございます！
ですが、私の場合ははてなブックマークのコメント欄も下にずらしたいです。ですので、作者さんのコードを修正しました。
/* 関連記事を記事下よりも下に */ /*この設定で、このdivの中の要素をorderという値を使い、順番指定ができるようになる*/ .customized-footer { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } /*関連記事を3番目に*/ .entry-footer-modules { -webkit-order:3; order:3; width: 100%; } /*はてなブックマークのコメント欄を2番目に*/ .hatena-bookmark-comment-iframe{ -webkit-order:2; order:2; width: 100%; } /*ユーザーHTMLを1番目に*/ .entry-footer-html { -webkit-order:1; order:1; width: 100%; }
div要素の順番を強制的に変える方法があるんですね！勉強になりました。JavaScriptを使えば、動的にランダムな配置が可能というわけですね。何かに使えるかも…?
終わりに
ここまでご覧いただき、ありがとうございます。
Androidのプログラムをしたり、それに関する動画を編集しようとしたら、なぜかブログのカスタマイズにはまってしまいましたｗ はぁ。。。
最近ちょっと記事の方向性がバラバラなのかなと思う今日この頃です。ちょっとしたことが気になって、違うことしてしまいます。もしかしたら、ADHDのような衝動性がある病気なのかもしれません。まあ、それに気づいただけで良しとしましょう！少なくとも、今までブログを書き続けている。少しは前に進んでると信じましょう。
もうすぐブログを始めてから1か月が経ちます。（正確には今日で4週間経ちますが、キリがいいので月末ということで。）
過去の自分と今の自分を見つめなおして、新しい目標を立てていきたいなぁと思います。
というか、まだ1か月も経ってなかったんですねｗ それだけ自分の中で有意義な日々を送れたのかなと思います。
いつも読んでくださっている方々、ありがとうございます！
またね(‘ω’)ノ