さてさて、そろそろ何か始めないとな

さいたま市のソフトウェアエンジニアのブログ

はてなブログのテーマを「Haruni」に変更してみた感想とか

「Haruni」への変更方法

f:id:iNack:20200523202730p:plain
はてなユーザーであれば、テーマストアで「プレビューしてインストール」を押すだけです。とても楽ちん

Haruni - テーマ ストア

「Haruni」のカスタマイズしたこと、できること

さすがにデフォルト色のままではと思ったので、色を変更してみました。

といっても、テーマ作者の方が紹介してくれているサンプルコードをいれただけ

着せ替え用CSS 水色・紫・黒系グラデーションサンプルコード【訂正あり】 - Haruni

水色、紫、黒・グレー系については、サンプルのCSSをそのまま使えます。

それ以外のパターンは、少し気をつけて修正必要です。

 テーマ作者の方が紹介してくれている以下も参照しました。

linear-gradientの使い方

縦、横、斜め、円形、三色といろんなグラデーションのパターンができます。

ただ、タイトルのところに縦を試してみたのですが、私の環境ではグラデーションが感じられませんでした。グラデーションしきる前に表示領域が終わってしまったのかな?

なので、テーマ作者さんのサンプルのまま、横グラデーションにしました。

CSSのグラデーション(linear-gradient)の使い方を総まとめ!

HTMLカラーコード

色だけは変更しておこうと思ったので、念の為色見ながら決定

WEB色見本 原色大辞典 - HTMLカラーコード

このページもテーマ作者さんが紹介してくれています。 

タイトルへの画像設定 

いままでは、タイトルに画像を設定していたのですが、スマートフォンで表示したときに画像が切れているのをなんとかしたかったのですが、やっぱりタイトルに画像は難しいみたいで、もう少し勉強が必要。

グローバルメニューの設置

前に利用していたテーマでも、この機能は提供されていたのですが、面倒で設置していませんでした。

これだけ丁寧に説明していただければ、無知な私でもできそうな気がしてきました。

グローバルメニューの設置方法 訂正あり - Haruni

オリジナルシェアボタン

f:id:iNack:20200522120313p:plain

こういうやつですね。

やっぱり、あった方が良いのかな?少し悩むところ。

 

 「Harumi」インストールしてみた感想

いまさらですみません。

非常にすっきりしていて、わかりやすいページになった気分がします。

インストールはもちろん簡単でしたし、やりたいことの関連するページを紹介してくれていたり、いろいろなパターンのCSSを提供されていて、とても親切です。いたれりつくせり。

まとめのページもありました。スゴイ。

はてなブログカスタマイズ記事のまとめ - Minimal Green

おかげで、いままで、いろいろ調べる時間と「やる気」がでなかったので、途中で挫折していたグローバルメニューの設置等も、今回は挑戦してみよういう「やる気」が出てきました。

「FontAwesome」っていうのも、今回初めて知りました。いろいろなデザインテーマで使われているんですね。勉強になります。

実際には、提供されているテーマとは直接関係ないカスタマイズ部分に対しても、いろいろと情報をまとめていただいていて、大変勉強になります。

ここまでスッキリすると、サムネイルを設定していなかったページが今まで以上に気になるようになってきました 汗

頑張って、過去記事のサムネイル設定しなおそうと思ったのですが、そのままデフォルトのサムネイルが並ぶのもおかしいので、ちゃんと記事に沿った画像を設定したくなってきました。

大きくブログの見た目を改善できる一歩ができた気がします。

ありがとうございます。>minimalgreenさん