どうもこんにちは。
久しぶりにcssを編集していてちょっと苦戦していたたんぽぽです。
この度、「speedy-simple」というはてなブログのテーマを作成しました。
blog.hatena.ne.jp
表示確認のテストブログはこちらになります。
speedy-simple.hatenablog.com
今回は、短めですが作成したテーマに関して記載をしていきたいと思います。
まずは、このテーマを作成するに至った理由について書いていこうと思います。
このテーマを作成した理由
以下の記事に書いていることなのですが、細かいところをリストアップしたいと思います。
tanpopogame.hatenablog.com
- テーマのcssファイルの容量が大きい
こちらは、今までインストールしていたテーマのデメリットだと思います。
はてなブログはテーマをインストールすることで、ページを読み込んだ際にcssファイルを読み込むことになります。
上の記事で書いたのですが、今までインストールしていたテーマのcssはminifyされていなかったためファイル容量が無駄に大きくなっていました。
ファイル容量が大きくなるとその分読み込み速度が遅くなるため改善したかった点です。
- 少し気になるスタイルがあった
正直に言うと表示はかなり気に入っているテーマでした。
使いやすいですし、すっきりした感じが個人的にハマっていました。
ただ、使っていていくつか気になる点がありました。
サイドにある記事一覧のスタイルに少し気になるところがありました。
なぜか、記事一覧や注目記事などのリスト表示部分の一番下の項目の下のラインとの距離がなぜか他の項目と違って間隔が狭くなっていました。
見ないふりをしていたのですが、今回のはてなブログのテーマを作成した際にそういったリスト表示の調整を行いました。
また、ページャーの表示なども改善したかったので表示に調整を加えています。
大きく分けるとこの2点になります。
cssファイルの容量改善のおまけでスタイルの調整を行いました。
今回のテーマ作成を行い、反映をしたブログの評価はこちらになります。
画像の差し替えなども行なっているため、テーマを変えただけのスコア評価ではないですが。
正直もう少しスコアを上げないといけないのですが、警告を受けていたcssファイルの読み込み容量の問題は解決しました。
元の評価が26だったことを考えるとそれなりの改善ができたと思います。
もう少し改善の余地がありそうなので、頑張りたいと思います。
「speedy-sample」について
ベースのテーマについて
「speedy-sample」のベーステーマとしてはてなさんが作成したオープンソースの「Boilerplate」を使用させていただきました。
github.com
この「Boilerplate」は、はてなさんがテーマを作成する上でのベースデザインになります。
当然0から作ることも可能だと思いますが、ベースがあるほうが作るのも追加・調整を行うのみでいいので楽ですし時間の短縮になります。
今回はシンプルなテーマを作りたかったので比較的装飾が少なく、はてなさんがカスタマイズのベースにお勧めされていたこのテーマを使用する運びとなりました。
Flexの使用
floatやflexという単語がわからない方は流してもらって大丈夫です。
昔使用していたテーマも2カラムの表示だったのですが、その際にfloatという仕組みが使用されていました。
正直表示上は差し支えないので、そのままでも良かったのですがベーステーマの「Boilerplate」が2カラムレイアウトでflexを使用していました。
flexは最近というほどではないですが、css3で制定された仕様でフレキシブルでカスタマイズがしやすいためベーステーマから継承する形で使用しています。
ライセンスについて
このテーマに関しては、「GNU General Public License (GPL)」を使用しています。
自己責任での改変などが認められておりますので、気に入らないところがあればこのテーマを編集して使ってください。
今後について
このテーマの今後についてですが、前の記事で書いた「ダークモード」への対応を検討しています。
ただ、システムと異なり文字を読むことがメインなので黒系の背景はどうかなとも考えています。
また、FontAwesomeを使用している関係上、追加の読み込みが発生してしまっている状況のためアイコンをWebフォントではなくSVGなどで表示をする方向にしたいと考えております。
更新を行いましたらテーマページにて更新日と対応内容を合わせて記載していきます。
blog.hatena.ne.jp
もしこうして欲しい等の要望がありましたら、テーマページにも記載しているアドレスへ連絡ください。
必要に応じて検討させていただきます。
まとめ
今回は、僕が作ったテーマ「speedy-simple」について書いてきました。
前のテーマも良かったのですが、今回改めて自分で作成してみて、cssの難しさというか奥深さのようなものを再確認できたなと思います。
仕事がhtml・cssの記述からシステム開発にシフトしたことで、それらを書く機会がなくなったのでなかなか楽しかったです。
今回作成したテーマを使ってもらえたら嬉しいです。
以上になります。
普段、このブログでは僕が買ったり使ったりして感じたことや思ったことをよく書いています。
そういったレビューなどを読みたいと思ってくださった方は、読者になるを押してもらえると励みになります。
ここまで読んでいただきありがとうございました！
記事の共有もしてもらえると嬉しいです。
よろしくお願いします！！
