フォントを変更する

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