hexoのテーマの選び方


ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。
本記事では「hexoのテーマの選び方」について記載します。

GAE開発環境へのHEXOインストールについては「GCP独自ドメインSSLブログが無料で使える(3)HEXO環境構築」をご確認ください。

1.HEXO テーマのデフォルト設定について

HEXOのデフォルトテーマは「landscape」になっています。

2.HEXO テーマの種類について

HEXOのテーマについて「Themes | Hexo」を見ると執筆時点で253個あります。
適当にクリックしてみるとすべてgithubのページへのリンクが並んでいるだけということが分かったので「github」で★が多い順に並べてみました。

1位 next
2位 yilia
3位 material
4位 icarus
5位 indigo
6位 apollo
7位 tranquilpeak

3.HEXO テーマの選び方について

HEXOテーマの種類は253個もあり、何が違うのかよく分からず、何を基準に選べば良いのかも分からず、目移りします。ダディ伯爵も最初はかなり悩みました。
取りあえず「アイキャッチ画像」が綺麗で有名な「icarus」を選択し、自分好みにカスタマイズすればいいや~という軽いノリでカスタマイズを進めましたが、1週間ぐらい経ったころに意外にもカスタマイズ箇所が多くテーマを一から作るのと同じぐらいの作業量のに気が付き、ダディ伯爵が使いたいテーマは「icarus」ではなかったという結論に至りました。
最初のテーマ選びに戻り、要件を再整理しました。

3-1.daddy.trevia.comのテーマ要件

ダディ伯爵が作りたい個人ブログ「daddy.trevia.com(https://daddy.trevia.com)」の要件について、「レイアウト」と「装飾」の2軸で整理してみました。

  • レイアウトについて 
    1.スクロール時にヘッダ固定したい 
    2.パソコン用はメニューを左に表示したい 
    3.パソコン用の記事には目次を右側に表示したい 
    4.スマホ用はメニューを表示せず、ハンバーガーアイコン表示にしたい

  • 装飾について
    本文の文字の大きさ、フォント、H1~H6のデザイン等、変更は、カスタマイズを簡単にしたい

3-2.daddy.trevia.comのテーマ要件

要件が整理できたので、HEXOのテーマ「Themes | Hexo」にてABC順に並んでいるテーマを1個ずつクリックしていくと、ダディ伯爵が求めているのは「material系」だというのが分かりました。
さきほどの「githubランキング」から選ぶと
3位 hexo-theme-material
5位 hexo-theme-indigo
が該当しました。

3-HEXO-テーマのおすすめについて

ダディ伯爵がおすすめするテーマは、やはり、自分好みにカスタマイズが簡単だった「indigo」です。

4.HEXO テーマの変更方法について

HEXOディレクトリ/themes/XXXX/にGithubからダウンロードしたフォルダを展開します。「XXXX」の部分は「_config.yml」で指定する文字列と合わせます。

②「_config.yml」を編集します。 themeのデフォルト設定はlandscapeとなっている部分をxxxxに変更します。

theme: XXXX

ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法については、以下の参考記事を上から順番にご確認ください。


 Previous
GCPのAlways FreeのGAE無料枠を使ってみた GCPのAlways FreeのGAE無料枠を使ってみた
ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。本記事では「GCP無料枠」について記載します。 カテゴリ:GCP入門合わせて読みたい GCPのAlways FreeのGAE無料枠を
2019年05月19日
Next 
hexoのカスタマイズをしてみた hexoのカスタマイズをしてみた
ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。本記事では「hexoのカスタマイズ」について記載します。↓コードの部分の表示がindigoだとうまく表示されたのにmateryだおかしくな
2019年05月13日
  TOC