こんにちは、たびとです。
今まで、記事のコンテンツ作成に重点を置いていました。 そのため、適当にはてなブログのテーマを選択して、適当なブログの設定で、 これまで運用してきましたが、やっと刷新することができました。
ブログのデザインですが、いつか見直そうと思っていましたが、 やりたいことが多いことと、記事作成に追われて、後回しにしていました。 これまで放置プレイだったのに、なぜ見直す気になったのか、という話です。
この記事の対象者
- 自分のデザイン力を少しでも上げようと思っている方
- はてなブログのデザイン変更に興味のある方
デザインをイチから勉強
たまには開発以外の本を読んでみようと、色々なジャンルの本を色々と物色していたら、 たまたま、目に付いたのが、「 デザイン入門教室 」というタイトルの本でした。
せっかくデザインの本を読むのだから、読み比べをしようと思って、 この本以外に後 3 冊ほど購入してみましたが、UX の書籍は大外れでした。 最終ページまで、ざっと目を通して 15 分ぐらいで終了です。 会社の教育にありそうな薄い内容で、全く読む価値がありませんでした。
読んでみましたが、デザインの考え方がコンパクトによくまとめられているため、 空いた時間に少しずつ読むのもいいので、サクッと要点だけを知りたい人にも向いていると思います。 アマゾンの評価が高いのも納得です。久しぶりに当たりの本を引きました。
今回のブログのデザインを見直そうと思ったのも、この本を読んだのが切っ掛けです。 まだ、残り 2 冊は読んでいませんが、この デザイン入門教室 だけで十分だと思います。
デザインの見直し
前回までのデザインは以下のようになっていました。 デザインとしては特に何もなく、選択した人気のテーマで多少はマシになっているだけです。 一応、砂漠をイメージして作ってみましたが、基礎知識なしでは、こんなモノでしょう。
これをどのように見直したのか、ポイントを列挙してみます。
- IT 関連の記事を書いているのだから、IT を連想できるタイトル画像を用意する。
- たびとアイコンの色使いがダサいので、新たに作り直す。
- 記事の文字を見やすいフォントに変更し、読みやすいサイズに変更する。
- サイドバーに必要な情報をキチンと表示する。
タイトル画像
Raspberry PI の二足歩行ロボット RAPIRO を作成した時の写真が手元にあったので、 それを加工してタイトル画像にすることにしました。
実際には何の変哲もない写真だったのですが、いい感じに回転させ、配線をぼかし、 多少のフィルタ処理を行い、タイトルが読みやすいように透かし領域を作りました。 これらもデザイン入門教室の考え方を参考にしました。
これらの加工は全て IrfanView というフリーウェアで編集しました。 画像ビューワのジャンルですが、簡単な編集ならこれで十分です。
プロフィールのアイコン変更
前回のアイコンは、背景に砂漠と空をイメージして作ったモノですが、 文字色と背景色の選択が悪いのと、トーンが異なるため、ぼやけた仕上がりになっています。 これらの色に関する考え方もデザイン入門教室に書いてありました。
例えば、以下のような配色サイトを参考にすると理解しやいすいと思います。 メインの色を選んだら、円の反対側の色(補色) か両隣の類似色を選ぶと、 色が引き立つそうです。
また、トーンも合わせるとより色が引き立つそうです。
これらを参考に、新たなアイコンは背景画像を円の枠線と同じぐらいの色味になるように調整しました。
後日談。 現在は3代目のアイコンに変更しています。 背景を RaspberryPI の基盤に変えて、IT系を前面に出すようにしています。
フォントとサイズ
テーマに使っている CSS の中身を見たところ、 Windows は「游ゴシック」が選択されており、 フォントサイズは 15 px になっていました。
評判の悪い 游ゴシック は使いたくないため、 Google Fonts の「 Noto Sans JP 」を使うように CSS を編集しました。 読込みのオーバヘッドより、読みやすさ重視です。 フォントを指定したため、どのデバイスも同じフォントが採用されるはずです。
また、採用しているテーマの文字サイズが 15 px だったので、 これも 17 px (ブラウザのデフォルトは 16 px) に変更しました。 ご年配の方を考慮すると、文字は大きい方が読みやすいと考えたためです。
後日談。 ユニバーサルデザインのフォントを知り、そちらに変更しました。 また、フォントサイズも 16px に変更しています。
サイドバーの見直し
まず、検索ボックスを先頭にもってきました。 自分で記事を探すにも検索機能をよく使うため、 これが最上位にあるのが使い勝手いいと思います。
リンクに何も指定しないと、はてなブログのリンクが自動で表示されるため、 これも適切な内容が表示されるように編集しました。
カテゴリの記事が表示されるように新たに追加しました。
テーマの自作
上述のフォントを編集するようになって、結局テーマを自分で作成し直すことにしました。 とりあえず、テスト用にブログを新規に作成し、テーマを非公式でアップし、 テスト用ブログでデザインを確認しながら自作テーマを作成することが普通のようです。
はてなブログの構成
さて、いざ CSS を作ろうと思ってみたものの、公式サイトにサンプル CSS はありますが、 ブログを構成するドキュメントが見当たりません。
一番必要なのは、以下のサイトのように、ブログの構成とCSSセレクタの情報が欲しいのですが、 公式サイトにはないようです。探せないだけで、どこかにあるのかな。
CSS から SCSS へ
流石に情報不足で、いきなり CSS を編集するとか正気の沙汰とは思えない苦行なので、 SCSS で編集することにしました。
世の中には CSS を SCSS に変換する便利なサイトがあるので、それを使います。
また、出来上がった SCSS を CSS に変換してくれる便利なサイトもあります。
いくつがサイトがあるのですが、別のサイトはシンタックスエラーで失敗しました。 エラーが発生するときは、別サイトで試しましょう。 Visual Studio 2022 でのコンパイルも考えましたが、 ASP.NET から作成する必要があるかもしれないので保留です。
まとめ
とりあえず、SCSS から CSS に変換し、非公開テーマとして運用できるようになりました。 これから一つ一つ確認しながら、最適なデザインを作り込んでいきたいと思います。
まだまだ始めたばかりで、人気のテーマをベースに改造しただけですが、 これから、自分用にデザインを変更していって、納得できるレベルになったら、 テーマを公開してみようと思います。
最後に続きと参考サイトを掲載しておきます。 では、皆さん、よい旅を。
続き
この記事の続きをアップしています。興味のある方は続きをどうぞ。
参考サイト
- デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA) | 坂本 伸二 |本 | 通販 | Amazon
- Amazon | Rapiro | 電子ラーニングトイ | おもちゃ
- IrfanView - Official Homepage - One of the Most Popular Viewers Worldwide
- Google Fonts
- 【カスタマイズ用】はてなブログのHTML構造まとめ - 【ちゃんこめBlog】インド在住OLの雑記ブログ
- css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
- SCSS to CSS Compiler - CSS Portal
