フォントを変更する

Webフォントを読み込む

themes/tranquilpeak/layout/_partial/head.ejs<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">を読み込むように追記する。

1
2
3
    <!-- Web Fonts -->
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
</head>

フォントを使用する

themes/tranquilpeak/source/_css/utils/_variables.scssをカスタマイズする。
Noto Sans Japaneseフォントを読み込み、codeとhighlight以外を置き換える。

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
27
28
29
30
31
32
33
34
35
36
37
38
// Font families
$open-sans: 'Open Sans';
$open-sans-sans-serif: 'Open Sans', sans-serif;
$merriweather-serif: 'Merriweather', serif;
$monospace: Menlo, Consolas, monospace;
$noto-sans-japanese: 'Noto Sans Japanese';

//$font-family-base: $open-sans-sans-serif;
$font-family-base: $noto-sans-japanese;

$font-families: (
//// base
//'headings': $open-sans-sans-serif,
//// components
//'code': $monospace,
//'caption': $merriweather-serif,
//'image-gallery': $open-sans,
//'post-header-cover': $merriweather-serif,
//'post-meta': $open-sans-sans-serif,
//'post-content': $merriweather-serif,
//'post-excerpt-link': $open-sans-sans-serif,
//'highlight': $monospace,
//// layout
//'sidebar': $open-sans-sans-serif
// base
'headings': $noto-sans-japanese,
// components
'code': $monospace,
'caption': $noto-sans-japanese,
'image-gallery': $noto-sans-japanese,
'post-header-cover': $noto-sans-japanese,
'post-meta': $noto-sans-japanese,
'post-content': $noto-sans-japanese,
'post-excerpt-link': $noto-sans-japanese,
'highlight': $monospace,
// layout
'sidebar': $noto-sans-japanese
);

ヘッダーのカスタマイズ

themes/tranquilpeak/layout/_partial/post/meta.ejsをカスタマイズして、見やすくする。

  • 記事投稿日だけでなく記事の更新日も表示する
  • 各メタ情報のアイコンを表示する
  • カテゴリーだけでなくタグもヘッダーに表示する
  • カテゴリーもタグと同じ表示形式にする
  • フォントをtext-smallからtext-mediumにして
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="<%= (classes ? classes.join(' ') : '') %>">
<!-- 記事投稿日 -->
<i class="fas fa-file-alt"></i>
<time datetime="<%= post.date.format() %>">
<span class="text-color-light text-medium">
<% if (post.lang) { %>
<%= post.date.locale(post.lang).format(__('date_format')) %>
<% } else { %>
<%= post.date.locale(page.lang).format(__('date_format')) %>
<% } %>
</span>
</time>
&nbsp;
<!-- 記事更新日 -->
<% if (post.updated) { %>
<i class="fas fa-redo-alt"></i>
<time datetime="<%= post.updated.format() %>">
<span class="text-color-light text-medium">
<% if (post.lang) { %>
<%= post.updated.locale(post.lang).format(__('date_format')) %>
<% } else { %>
<%= post.updated.locale(page.lang).format(__('date_format')) %>
<% } %>
</span>
</time>
<% } %>
<br>
<!-- カテゴリー -->
<% if ((post.categories) && (post.categories.length > 0)) { %>
<i class="far fa-folder-open"></i>
<span class="text-color-light text-medium"><%= __('post.categorized_in') %> </span>
<%- partial('category', {categories: post.categories})%>
<% } %>
&nbsp;
<!-- タグ -->
<% if ((post.tags) && (post.tags.length > 0)) { %>
<i class="far fa-folder-open"></i>
<span class="text-color-light text-medium"><%= __('post.tagged_in') %> </span>
<%- partial('tag', {tags: post.tags})%>
<% } %>
</div>

フッターのカスタマイズ

themes/tranquilpeak/layout/_partial/post.ejsをカスタマイズして、フッターからタグを削除。

  • タグをフッターに表示しない
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <div id="post-footer" class="post-footer main-content-wrap">
<!--
<% if ((post.tags) && (post.tags.length > 0)) { %>
<div class="post-footer-tags">
<span class="text-color-light text-small"><%= __('post.tagged_in') %></span><br/>
<%- partial('post/tag', {tags: post.tags})%>
</div>
<% } %>
-->
<% if (post.actions === undefined || post.actions) { %>
<%- partial('post/actions', {postContent: postContent}) %>
<% } %>
<% if (post.comments) { %>
<% if (theme.disqus_shortname) { %>
<%- partial('post/disqus') %>
<% } else if (theme.gitment.enable) { %>
<%- partial('post/gitment') %>
<% } else if (theme.gitalk.enable) { %>
<%- partial('post/gitalk') %>
<% } %>
<% } %>
</div>
</article>

ベフォーアフター

元々発生していたGoogleAnalyticsでのエラー

GoogleAnalytics Error width=640

ヘッダーおよびフォントの変化

ビフォー。アルファベットと日本語のバランスが良くない。

Hexo Tranquilpeak width=640

アフター。統一感があって読みやすい。カテゴリーとタグも視認しやすくなったが、ゴチャついてる感じも。

Hexo Tranquilpeak width=640

フッターの変化

ビフォー。記事が長いとアクセスしにくいタグ。

Hexo Tranquilpeak width=640

アフター。すっきり。

Hexo Tranquilpeak width=640