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

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

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



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

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

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


✓目次

この記事の対象者

  • 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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
1
2
3
4
{/* 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

その他、Icarusのデザイン変更に関する記事



コメント