はるなぴログも大分テーマのカスタマイズが進んできました。
そこで今回は、はてなブログでオリジナルテーマ自作の構想を練ってみたいと思います。
はてなブログテーマInnocentの問題点は何か？
まずは今使っているテーマInnocentの問題点を洗い出してみます。
Innocentは非常に優れたテーマでSEOも考えられておりhttps化対応もOKです。では問題点は？
まず第一は作者がもうテーマのメンテナンスをしていないということ。→すみません、修正します。（ブログは更新していませんが、テーマはまだメンテされているという情報を読者の方からいただきました！Thanks！）今のところhttps化にも十分耐え古びた感じがあまりしませんが今後は分かりません。
次に、はるなぴが使ってみて感じたことですが、そもそもカスタマイズして使うことが前提のテーマです。いきなりそのままではあまりにもシンプルすぎて即使用するというのはためらわれてしまうという方も多いのではないかと思います。
導入してすぐに使っても違和感のない出来合いのテーマがあると良いのではないかと思います。
自作してみたいオリジナルテーマの内容を考えてみる
ブレインストーミング的に列挙してみました。
- Innocentからの乗り換えがスムーズにできる
- 適切なSEOを考慮する
- モバイルファーストレスポンシブ対応可能
- モダンブラウザをメインに考える
- モバイル用スピードアップデートに対応できるパフォーマンス
- 導入後即使用可能な出来合い感のあるテーマ
- SNSボタンはカスタマイズしない
- https化（常時SSL化）に無理がない
- はるなぴログで導入したカスタマイズを適用する
それぞれ細かく考えていきます。
Innocentからの乗り換えがスムーズにできる
Innocentは優れたテーマです。
なのでInnocentを使用している人も多いはず。Innocentから乗り換えてもらえるようなテーマにすることで使ってもらえる対象を広げようと考えました。
そのためにはInnocentから乗り換えた時にレイアウトが大きく崩れるようではダメです。Innocentのデザインをある程度継承しつつオリジナリティーが出せるようなテーマを目指すこととします。
適切なSEOを考慮する
InnocentはSEO的にもよく考えられています。
2カラムでサイドバーに関連コンテンツを表示。これでメインコンテンツにあまり関心を持てない訪問者も繋ぎ止められます。
サイト内を回遊させる構成がきちんと考えられていますので、こうした配置も継承し今までInnocentを使っていた人があまり違和感を感じないような構成を心がけることとします。
モバイルファーストレスポンシブ対応可能
スピードアップデートとも関連しますが、モバイルファーストレスポンシブ対応可能となるようメディアクエリを設定します。
Innocentではメディアクエリの記述が分散して書かれています。ですのでタブレットやデスクトップPC用のCSSはまとめてモバイルのパフォーマンスを最適化します。
モダンブラウザをメインに考える
Innocentが作られたのは2015年です。
ですのでリセットCSSもnormalize.cssのv3.0.2を使用しています。随分古いですよね。これはもっと新しいものに取り換えます。
対応ブラウザもよく考える必要がありそうです。IE11対応を考えるかどうかも問題ですね。完成時期によっては切っていきたいと考えています。
モバイル用スピードアップデートに対応できるパフォーマンス
可能な限りシンプルなCSSにしてスピードアップデートに対応可能なパフォーマンスを引き出したいと考えています。
今のInnocentテーマでもPageSpeedInsightsではなかりの高得点を叩き出します。これを更に推し進めることができればと考えています。
導入後即使用可能な出来合い感のあるテーマ
これはInnocentの問題点のところで取り上げました。
CSSカスタマイズに馴染みのない初心者でもすぐに使えるようなテーマとすることで使ってもらえる人を増やしたいと思います。
SNSボタンは基本カスタマイズしないでオプションとする
SNSボタンは基本はカスタマイズしません。
なぜかというとカスタマイズして分かりにくくなっているテーマが多いと感じるからです。はるなぴもそうでした。「このボタン押していいのかな？」と迷ってしまいます。
更にjavascriptのせいでしょうか、いつまでもグルグルとカウンターが回ってしまっていたり、タップしてもいつまでも反応のないボタンもありました。
なので基本はシンプル第一でいこうと思います。
そしてSNSボタンのカスタマイズはオプションとして提示することとしたいと思います。
https化（常時SSL化）に無理がない
Innocetもhttps化に際して問題となる設定はないようです。
これは踏襲していきます。つまりhttpでリンクするようなものを紛れ込ませないように注意していきます。
はるなぴログで導入したカスタマイズを適用する
はるなぴログでは既にかなりのCSSカスタマイズを導入してきました。
たとえば文字のサイズを大きくするなど。これらはできる限り新しいテーマにも盛り込んでいきます。
今考えているのはこんなところですが、まだ思いついたらリライトしていきます。Innocentと見た目はある程度似てきてしまうかもしれませんが、中身はごっそり入れ替えるぐらいのつもりで自作したいと思っています。
