はてなブログの人気デザイン【Brooklyn】を1ヶ月使ってみて
今回は、ブログを始めてからお世話になっている、はてなブログのテーマデザイン
「Brooklyn」を1ヶ月使った感想を書いていきます。
ブログを始めるにあたり、どのテーマを使おうか本当に迷っていました。
なんせ、ブログを始める1ヶ月前までは、はてなブログってなぁに？
WordPressって、エクセル？パワーポイントの新しい仲間？
と本気で思っていましたから笑（冗談抜きに）
いやぁ本当にお恥ずかしい...(;^ω^A
で、この超絶ど素人のわたしがたどり着いたのは、はてなブログでした。
なぜ、はてなブログにして良かったかの記事はこちらを見ていただけると解るかと。
はてなブログのメリットとデメリットは後々ブログに書くとして、
ブログ初心者の方が絶対に迷うところはブログのデザインテーマだと思います。
そこで、はてなブログの人気デザインテーマの【Brooklyn】を1ヶ月使った感想を書いていこうと思います。
デザインテーマ【Brooklyn】
初期デザイン
こんな感じです。
シンプルでとても見やすいです。
当初のブログのコンセプトとしては、「心理学」をメインに書いていこうと思っていたので、あえてシンプルで落ち着いた雰囲気にしたいと思いBrooklynを選択しました。
ちなみに、Brooklynの導入方法は「つなろっく」さんの記事を参考にしました！
本当に本当に解りやすいので、ぜひ参考にしてみてください。
カスタマイズ性
ブログ初心者がブログを運営していく上で、必ずと言っていいほどブログのカスタマイズ方法にぶち当たると思います。
Brooklyn自体が、すでに完成されているデザインですが、やはり自分流にアレンジしてみたいと思うのが人間の心理です。
って、もっともらしく言ってますが、やっぱり自分の好みのアレンジってありますよね。
ここでポイントですが、
人気のあるデザインテーマは他のブロガーさんがカスタマイズした方法がめちゃくちゃ記事にされているんです！
実際にわたしが実際に参考にした記事は
見出しのカスタマイズだったら
affiliate-couple.hatenablog.com
などなど。
もっとたくさんありますが、ここでは実際に参考にさせていただいた記事を載せさせていただきました。
他にも、
グローバルナビを変更したい！
シェアボタンのデザインを変更したい！
など、ググるとたくさんあるので、初心者には本当にありがたいです。
レスポンシブデザイン対応
やはり、1番の決めてはこれです。
HTMLやCSSなどのプログラミングの知識がゼロのわたしにとっては、地獄から救い上げてくれた天使のようでした。
レスポンシブデザイン様...ありがたや...
てか、レスポンスデザインってなんやねん？って思った方に簡単にご説明を...
ユーザーの デバイス（パソコン、 タブレット、モバイル、非視覚的 ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えることができます。
引用元：モバイル SEO の概要 | 検索 | Google Developers
要するに、
PCで作ったブログをスマホで見るとデザインが変わってしまったり、見にくかったり、操作がしずらいんです。
それを、自動でPC用の画面をそのままスマホ用に変換してくれる機能なんです！
プログラミングができる人は、スマホでもPCで作ったブログ画面を同じように（むしろスマホ用に）プログラミングして見やすいように作れちゃいますよね？
これ、初心者ができます？(;^ω^A
後々は覚えて行きたいけど、ブログ始める前に絶対に挫折するでしょ！
最初の一歩踏み出せないでしょ！
今の世の中、ブログを見ている割合でいうと、60%以上はスマホやタブレットからブログを閲覧してるんですよ。
ってなると、たくさんの人に見てもらうためには、スマホで見やすいブログを作んなきゃダメやん。
でも、プログラミングをすぐに覚えられない...
ここで！
レスポンスデザイン様が登場です。
わたしのブログを例にしますが、
実際のPC画面でのブログの表示はこちらになります。
レスポンシブデザインの例
スクロールしていくと...
記事紹介の横にサイドバーが表示されています。
プロフィール、プライバシーポリシー、最新・注目記事、検索、カテゴリーなどなど
簡単に設置が出来てカスタマイズ性もあります。
そして、スマホ画面はどうなっているかというと...
ちなみに、【Brooklyn】の標準レスポンシブ機能では、PC画面でのグローバルメニューは表示されません。
このグローバルメニューをスマホ化にすると...
赤線の囲みの部分になり、右恥の3本線をタップすると
この用に展開されます。
【Brooklyn】でのスマホ版のグローバルメニューの設置方法についてはこちらの記事を参考にさせていただきました。
【Brooklyn】の制作者のSHIROMAさんのブログです。
本当にお世話になってます。そして、ありがとうございます！
スマホ画面をさらにスクロールしていくと...
PC画面では横にあったサイドバーが、スクロールしていくと下に表示されるようになります。
WordPressに比べると、自由度は下がると思います。
でも、初心者がブログを始めるにあたっては充分すぎる機能と簡易性ではないでしょうか？
プレビュー画面
そして、さらに便利機能が。
【Brooklyn】だけでなく、はてなブログの機能ですが
PC画面で記事を作成しアップした後に、スマホで自分の記事を確認すると...
あれ？文章がずれてる...改行がおかしい...なんか見づらい...
ってことありますよね。
これを防ぐための便利機能が...
プレビュー画面です。
これはPCで表示される記事のプレビュー画面になります。
これはPC画面でのプレビュー画面ですが、はてなブログで記事を作成、編集するときは、見たまま編集かHTML編集のどちらかになります。（アフィリエイトの貼り付け以外HTMLは開かないと思いますが...）
どちらの編集の場合でも、見出しのデザインやアップ後の表示などは確認が出来ません。
その際に、プレビュー画面で確認すると、アップ後の画面を確認できます。
そして、なんとスマホ画面の表示もプレビューが出来てしまうんです！
これって本当に便利ですよね！
PC画面で作成したときに、見やすくできていてもスマホで表示された時に文章が見づらかったら、せっかく書いた記事が台無しです...
わたしも、両方のプレビュー画面を見ながら微調整をしています。
まとめ
・ブログを始めようと思っている...
・始めたいけど何か難しそう...
・スマホでブログを見やすくするにはどうすれば...
と考えている方は、ぜひ【Brooklyn】で始めてみてください！
もちろん、わたしのブログもまだまだ見づらかったり、操作性が乏しい部分が多々ありますが、まず『始めてみないことには何も進みません』。
始めてみて、疑問に思ったことを少しずつ改善していけば良いと思います。
全部、完璧には出来ないので、自分に必要な情報だけピックアップして行きましょう！
また、こう変えた方がいいよ、こういうカスタマイズもできるよ、などご意見がいただけたら嬉しいです。
ぜひコメントお願いします！
