見出し画像

無料版はてなブログカスタマイズしてみた

ことさら

テーマ選び

今回の探すポイント
・装飾がシンプルで投稿記事が読みやすいもの
・カスタマイズしやすそうなHTML構造をしてるもの

特に気にしないこと
・ブログが写真と短めの文章で見せる内容なので、記事内の見出しや罫線に装飾はなくてもいい
・コピペコードがなかったら自分で書く…

上記の条件に当てはまったのがコレ。

「UnderShirt」
https://blog.hatena.ne.jp/-/store/theme/8599973812333959601

・投稿記事が読みやすい
・ちょっと太めの罫線と余白で見せるデザインで装飾は少なめ
・コピペコードなどは用意されてない
・アーカイブ（記事一覧）が見やすい

<div id="container">
    <header></header>
    <div id="content"></div>
</div>

HTMLはヘッダーとコンテンツを#containerで囲う構造が多いんですけど、
#containerのCSSがmax-width:1200pxとかになってると、ヘッダーに画面幅いっぱいの画像を載せにくいので、

画像1

図の右側みたいな感じにしたいときは、ヘッダーとコンテンツ別々に横幅設定してあるものがカスタマイズしやすいかなと。

ナビゲーションをつける

テーマの中には作者さんがナビゲーションのコピペコードを書いてくれてるものも多くて、
説明してくれてる通りにHTMLとCSSを貼り付けるだけできれいなナビゲーションがつけられる最高。

私はこちらのredoブログさんの記事「【ブログカスタマイズ】「はてなブログ」でグローバルメニューの追加方法を紹介｜初心者でもカンタン」を参考にしました。

はてな独自のウェブアイコンもある

画像2

お問い合わせの前にメールのイラストとか、ちょっとしたポイントがほしくてウェブアイコンを使おうとしたら、はてな独自のウェブアイコンが用意されていて感動。

Takeuchi BLOGさんの「はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点」がクラス名が表になってて読みやすかったです。

もっといろんな種類のアイコンを使いたい場合は、
Font Awesomeを導入してくれているテーマもあるのでそちらを使うと良さそう。

はてなブログは、
・タイトル下のHTML
・フッターのHTML
・CSS
をさわれるので、自分でFont Awesomeの導入もできます。

「読者になる」ボタンの存在

画像3

画面右上にある気になる「読者になる」ボタン。
デザインによってはちょっと邪魔かも、なこれを非表示にできるのかということなんですけど、
結論から言うと無料版は消さないほうがいい（有料版はOK）。

Minimal Greenさんの「はてなブログのヘッダー右上に突如出現した「読者になる」ボタンと崩れたスマホ版ヘッダー画像の修正方法」がすごく参考になりました。
はてな運営からのお問い合わせ回答や、どの規約に該当する可能性があるかまで、とてもわかりやすい。

トップページに記事一覧を表示したい

無料版はできない。アーカイブに転送してトップページに記事一覧を表示するのは規約違反になるとのこと。

画像4

トップページにブログ全文を表示するより、記事一覧が表示された方が目当ての記事が探しやすいんですけど、

はてなブログは基本トップページに記事全文が表示される仕様で、
有料版（Pro）にすると記事全文or記事一覧の表示が選べるようになるんですね。

スマートフォンで見ると逆に記事一覧が表示される仕様なんですけど、
無料版スマホ用ブログのHTMLやCSSの編集ができないので、デザインが変えられないんですよ。

デザイン＞スマートフォン＞詳細設定　から
「レスポンシブ設定」にチェックを入れると、スマホでもPC版のデザインが反映されるんですけど、そうすると無料版はてなブログは記事全文表示なのでスマホだと大変見づらい。
このデザインの差がつらいと感じるなら有料版に変えることになるんだなぁと改めて無料と有料の違いを感じたのでした。
さすがの課金モデルだ…。

カスタマイズ完了

こんな感じになりました。
エコーテンチョTADAの「今日は何つくろ？」

画像5

ロゴは2種類作ってみてに好きな方を選んでもらいました。
せっかくなのでここにも載せておこう。ロゴ難しい。。


以下テーマ選びのメモ

人気順にいろんなテーマを見たので感想メモです。
どのテーマも本当にすごいし作者さんのサポートがしっかりしてて本当にすごい（語彙力）

＜できるだけCSSを触らなくていいテーマを探す＞

CSSを修正とブログを確認をウェブ上で繰り返すことになるので
ちゃんと保存できていないと頑張って書いたものがふっとんでしまう。
ネットが急に止まったり、うっかり別のページに移動してしまったり…あるよね？
さらにテーマを変更するたびにCSSがリセットされるので、CSSのバックアップ必須。

ちょこっと修正するたびログを残すのは結構大変なので、CSS自体あんまり書き込まなくていいようテーマ選びから気合いれた方がいいなと。

あと作者さんがテーマの微調整とかした場合、
自分の書いたCSSのせいで見た目がズレたりする可能性もありそうなので
なるべく手数少なめでできるものを選ぶと後で楽になると思いました。

＜自分のやりたいデザインに近い骨格をしているか＞

これは上の方でも書いたんですけど、
各テーマは作者さんがデモページを用意してくれてることが多いので、HTMLの構造がどうなってるのか確認した方が良さそうです。

＜ブログの装飾＞

ブログ全体の文字フォントや見出し装飾が気にいるかどうか。
投稿記事で使う見出しや罫線まで細かくデザインしてくれてるテーマもあるので、自分の書きたいブログの内容によって選びたい。

画像6

ノウハウ記事とかは大見出しや中見出しのデザインが違った方が読みやすそうだし、
シンプルなブログなら逆にごちゃっと見える可能性もあるので文字の大小だけの見出しでも良さそう。
特殊なフォントを使っていてオシャレだけど自分のブログには合わなそうだなと思うこともある。

逆に装飾は合わないけどこのブログのHTMLが自分がやりたいデザインにぴったりだから、CSSは自分でなんとかすると割り切って使う場合もあるかもしれない…。

＜カスタマイズサポートがあるかどうか＞

設定方法やコピペコードを用意してくれてると安心。
作者さんに質問できる環境があるとさらに安心。


＜はてなブログで人気のテーマ（2021年10月21日）＞

「Minimalism」「UnderShirt」「Cappuccino」
「Brooklyn」「Haruni」「soboku」「Innocent」など。

「Minimalism」
・作者さんのサポートが手厚い（設定方法、コピペコードなど細かく記載）
・FontAwesomeが使える

最初にダウンロードしてカスタマイズを試してみたテーマ。
はてなブログの設定方法、ナビゲーションのコピペコード、背景や見出しの色のCSS変更箇所などなど、全部書いてくれてる。
書かれた通りに設定してコピペするだけで見た目が綺麗になるのが良い。

ヘッダーやコンテンツを囲む#containerのwidthが1140pxに設定されているので、ヘッダーに画面いっぱいに広がる写真を載せるデザインにはしづらい。
文字と装飾で見せるシンプルなデザインにしたいときに良さそう。


「Cappuccino」
・作者さんのサポートが手厚い（設定方法、コピペコードなど細かく記載）
・デザイン性が高い（サムネをホバーしたとき動的、記事投稿で使う見出しや罫線にも装飾付き、ブログタイトルや日付にGoogle FontsのFredericka the Greatが使われてる）

Google FontsのFredericka the Greatが印象的なので、この手書き風フォントが似合いそうな内容のブログだったらこれにしたい。


「Brooklyn」
・作者さんのサポートが手厚い（設定方法、コピペコードなど細かく記載）
・デザイン性が高い（記事投稿で使う見出しや罫線にも装飾付き、サイドバーの見出しが吹き出し装飾になっていてポイントになる）

ナビゲーションが横幅いっぱいに設定されているので、項目が少ないときは相性よくないかも。


「soboku」
・無駄をそぎ落とした極シンプルなデザインですごく見やすい
・カスタマイズサポートはなし
・ヘッダーやコンテンツを囲む#containerのwidthが1200pxで今回は断念


「Haruni」
・作者さんのサポートが手厚い（設定方法、コピペコードなど細かく記載）
・記事やサイドバーのエリアにラウンドがかかっていてやわらかい印象に見える
・ナビゲーションのulの横幅が1142pxに設定されていてメニューが広がりすぎない（項目が少ないときもここの値を自分で変更すればいいので楽そう）
・アーカイブ（記事一覧）でサムネを大きめに見せられるのが良い。


「Innocent」
・作者さんのサポートが手厚い（設定方法、コピペコードなど細かく記載）

2016～18年くらいのテンプレートが多い中、今年「Who」「Noir」という新しいテーマを公開されててなんか安心感がある。
『大多数のはてなブログテーマは「ライセンス違反」によりカスタマイズできない』の記事がとても参考になりました。


メモはここまで。
どのテーマも本当によくできてるなぁすごいなぁすごいなぁ、という感じ。
本気でがっつりカスタマイズしたいならWordPressとか使ったほうが良いかと思うんですけど、
気軽に何か書きたいときや、より管理を楽にしたいときはブログもいいなぁと思ったり。


いいなと思ったら応援しよう！