2020-05-052020-05-05IT

【Hexo】Icarusテーマで作成される記事のタイトル、h2、h3のデザインを変更

当ページのリンクには広告が含まれています。

Hexoで作成した記事を読みやすいデザインにしませんか？

本ブログはIcarus(v3.0)というテーマを採用しておりますが、h2タグやh3タグにborder-leftをつけて記事の可読性を上げたいな、とおもっていました。

本記事では、それらのカスタマイズ方法をまとめました。

✓目次

この記事の対象者
読みやすい記事とは
h2タグ、h3タグのデザイン変更
記事タイトルをsemi-boldに変更

この記事の対象者

HexoにIcarusテーマを適用している方。Icarusはv 3.0.0。
基本的なHTML, CSSを理解している方

読みやすい記事とは

そもそも読みやすい記事って、どんな記事なのか。

やはりブログで多くのお金を稼いでいる方のデザインなのかなと思います。

Icarusテーマの配色に近いデザインを用いている有名ブロガーさんとして、manablogさんのデザインを参考（というかほぼ丸パクリ）にしてデザインを当ててみたいと思います。

h2タグ、h3タグのデザイン変更

編集するファイルは、\themes\icarus\include\style\article.stylです。

以下のように設定すればOKです。

\themes\icarus\include\style\article.styl


h2
    font-size: 25px
    background: #f7f7f7;
    padding: 20px 15px 18px
    border-left: 9px solid #4865b2;
    line-height: 40px;
    margin-top: 60px

h3
    font-size: 20px
    letter-spacing: 1.6px;
    padding: 10px 15px 10px;
    border-left: 9px solid #4865b2;
    font-weight: 600
    margin-top: 60px;

h4
    font-size: 16px
    letter-spacing: 1.6px;
    padding: 5px 15px 5px;
    border-left: 9px solid #4865b2;
    font-weight: 400
    margin-top: 60px;

ファイルの編集が終わったら、ファイルを保存し、hexo cleanコマンドでキャッシュなどを削除。

hexo generateコマンドを実施し、hexo serverでlocalhost:4000にアクセスしてみましょう。

ちゃんとh2タグ、h3タグにデザインが当てられていればOKです。

記事タイトルをsemi-boldに変更

記事のタイトルは\themes\icarus\layout\common\article.jsxファイルを変更します。

titleクラスにhas-text-weight-semiboldを追記します。

\themes\icarus\layout\common\article.jsx

{/* Title */}
<h1 class="title is-3 is-size-4-mobile has-text-weight-semibold">
    {index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
</h1>

IcarusはBulmaというCSSフレームワークを使っています。

以下に、fontに関連するhelperのリンクを張っておきますので、semibold以外のフォントにしたい場合は、こちらを参照してください。

Typography helpers | Bulma: Free, open source, and modern CSS framework based on Flexbox