メニューアイコンクリック時の表示カスタマイズ

まずはページ左上の (メニューアイコン)をクリックした時の項目を変更していきましょう。

/home/okina_freelife/hexo/theme/_config.yml の編集

/home/okina_freelife/hexo/themes/indigo/ にある _config.yml を変更していきます。

前回の記事で Theme 変更をした時に修正した /home/okina_freelife/hexo/ にある _config.yml ではないので注意してください。

picture1

中国語の部分と必要の無いリンクを削除し、以下のような状態にする。

picture2
　　
ワンポイント！！

初めてのファイルを編集するときは元々のファイルを念のため複製しておきましょう
万が一戻せなくなってしまった場合に元々どういう風に書かれているのかを確認したり、最悪初期状態に戻すことができます。
コードエディタで複製したいファイルを選んで、右クリック => Duplicate を実施。

Git で管理するから大丈夫とかの人は読み飛ばしちゃってください！

まずは自分の profile の部分を変更していきます。デフォルトだとサルの写真と名前と mail アドレスが表示されていています。また、Github, Weibo などのいらないリンクの部分など削除して、home を表す中国語も変更。

ホームの部分の変更はこんな感じ。Home じゃなくて”ホーム” など好きに変更して下さい。

picture4

いらないリンクの部分などを削除し終わったらこんな感じ。

picture5

次は Profile の部分を編集します。変更する部分は以下の部分。

picture6

avatar: の部分は default の猿の画像。

/img/ の位置は以下。　実際のパスは /home/okinafreelife/hexo/themes/indigo/source/img/

picture7

ここに使用したい画像を upload していってください。 Upload の方法は非常に簡単です。単純にドラッグアンドドロップするか、右クリックして “Upload files…” で実施できます。

今回は profile_test.png という画像を upload.

picture8

avatar_link: の部分は avatar の画像を click した時に表示される部分になりますので適宜設定していってください。
特に飛ばしたいページなどが無ければ自分のブログのホームの URL でも載せておけばよいですね。

Brand: のところは avatar: 画像の背景の画像。今回はこのままでいくがアバターの時と同じ要領で変更してください。

Favicon: はブラウザで page を開いた時にタブに表示されるアイコン。ここも自分の favicon があれば使用してください。 100x100 位の大きさがグッド。

Email: のところはそのまま載せたい email を載せれば良い。今回は試験のため noreply@test.com と設定してますが適宜適当な email address に置き換えて下さい。
ここを簡単な自己紹介に変更する方法などは HEXO カスタマイズの応用編で解説していければと思います。

最終的に _config.yml はこんな感じになります。

picture9

確認のページをリロードするとこんな感じになります。大分スッキリしてきましたね。

picture10

/home/okina_freelife/hexo/_config.yml の編集。

メニュー画面に表示される表示などを修正していきます。

今度は /home/okina_freelife/hexo/_config.yml (HEXO ホーム)にある _config.yml をいじっていきます。

同じメニュー部分をいじるのですが違うファイルを編集していく必要があります。

　　
ワンポイント！！

どこのファイルのものを修正すればどこが変わるかというのが分かるにはどうしても慣れが必要です。
基本的な考え方は HEXO 全体に関わるものは HEXO ホームにある _config.yml で、 Theme に関するものはもちろん Theme 配下の _config.yml を編集していきます。
しかしながら、全体で使いそうだなーと思う変数でも実は Theme で定義している、、、というものもあるので正直ある程度の慣れが必要になります。

それでは HEXO ホームディレクトリ配下の _config.yml を編集していきましょう。

以下のように編集してください。

picture11

もちろん author: の部分に入れるのは自分の名前やニックネームを入れてください。

joyful

author: のあとは半角スペースを入れるのを忘れるなけろ！！！

よく覚えてましたね！　半角スペース忘れちゃうと形がページ全体の形が崩れちゃうので気をつけてくださいね。

変更できたか確認してみましょう。

今回は HEXO ホームディレクトリ配下の _config.yml を編集したので hexo server のリロードが必要です。 Clould Shell にてリロードしてから確認してください。

picture12

順調ですね！

タイトル、サブタイトル、フッター部分のカスタマイズ

ブログのタイトルやサブタイトル等を自分のブログにあった内容に変更していきます。またフッター(Footer) 部分も中国語あったりするのでそのあたりをシンプルにしていきます。

タイトル、サブタイトルの変更。

HEXO ホームディレクトリ配下の _config.yml を編集します。

この辺りはどんなテーマを使ったとしても共通そうですもんね。そのような項目は HEXO ホームディレクトリ配下の _config.yml です。
ちょっとづつ慣れていきましょう！！

メニュー画面の変更の時にすでに編集している項目もありますが、編集後は以下のような感じになります。

picture13

language を jp 等にしないのは、hexo の言語を変えても今回使用する indigo のテーマで変更されるところがほとんどなく、この設定により reidirect される先が日本語のサイトになる部分があるのですがリダイレクト先の日本語がおかしかったりするので無難に英語のままでいきました。
もちろん、ここを “jp” と変更して頂いてどのようになるかを見て頂いてもよいかと思います。

normal

確認する時は hexo server の再起動けろ！！

(せ、成長してる。涙)

フッター部分の編集

フッター部分は中国語表記が多いし、QR コードで課金してくれ！っていうボタンもあるし編集しておきたいですよね。

全てのページで共通の部分とか特定の部分だけのデザインは /home/okina_freelife/hexo/themes/indigo/layout/ 配下の .ejs ファイルを編集していく。

今いじるのはフッター部分なので footer.ejs というファイルを編集します。

.ejs というのは テンプレートエンジンという Node.js のパッケージの１つです。JavaScript と HTML を使って Web ページを作っていく感じです。ページの各要素を作成する重要な部分ですね。

それでは編集していきましょう。

編集前の footer.ejs

picture14

最初の <div class="top"> が以下の部分。

picture15

次の <div class="bottom"> が以下の部分。

picture16
の部分はいらないので全部消してしまう。もし残したい場合は中国語の部分だけ日本語に変えるとかすればいいと思います。
の部分は Power By Hexo Theme Indigo 等がいらないのでその部分を消してしまう。

こんな感じです。

picture17

画像なので切れてしまっていますが p タグの部分はこんな感じです。

1
<p><span><%-config.author %> &copy; <%if (theme.since_year && theme.since_year < date(new Date(), 'YYYY')) {%><%- theme.since_year %> - <%}%><%- date(new Date(), 'YYYY') %></span>

これで footer も以下のようにシンプルに！

picture18

記事の最後の部分の編集

最初は Hello World という hexo が自動で作ってくれる記事のみある状態。新しく記事を作った場合でも同様のものが表示されるようになっているので、今回はこの記事をもとに説明していきます。
記事の下の方まで行くとこんな感じ。

picture19

中国語の部分と赤いアイコン(賞のような漢字が入っているやつ)は入らないので消しちゃいましょう。

変更するのは themes 配下(/home/okina_freelife/hexo/themes/)の _config.yml です。

以下のように postMessage: の行をコメントアウトします。今回はコメントアウトしますが、行ごと削除してしまっても問題ありません。

1
2
# 文章页留言内容，hexo中所有变量及辅助函数等均可调用，具体请查阅 hexo.io
#postMessage: 这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<a href="<%- url_for(page.path).replace(/index\.html$/, '') %>" target="_blank" rel="external"><%- page.permalink.replace(/index\.html$/, '') %></a>
hatena

コメントアウトってなにけ？

コメントアウトというのは、その行はプログラミング言語だったりデータ形式の中で意味を持たせなくすることです。
今回で言うと HEXO (というプログラム)が _config.yml を読み込んで実施していくんですが、このコメントアウトされた部分はプログラム的には無視するんです。

無視させたい部分に # を入れると、# から後ろがコメントアウトされます。有効範囲は一行で、行の先頭だけではなくて途中からでも使えます。

一般的には人が読みやすくするための説明に使ったり、一時的にその行を無効にしたい場合や、何個か選択肢があって頻繁に切り替えることがある場合　(先頭の#を付け替えるだけでプログラムに読み込ませる行を変更可。)に使います。

コメントアウトのやり方は、プログラムだったりデータ形式の種類によって変わりますので注意してください。

また YAML の場合複数の行を一気にコメントアウトすることができないのと、入れ方によってはうまく動作しない書き方もあるのでよくわからないよーってかたは行の先頭で使ってください。

話を戻します。

赤いアイコン(click すると QRコードが出てくる。)は reward 部分をコメントアウト。

1
2
3
4
5
# 是否开启打赏，关闭 reward: false
#reward:
  #title: 谢谢大爷~
  #wechat: /img/wechat.jpg     #微信，关闭设为 false
  #alipay: /img/alipay.jpg     #支付宝，关闭设为 false

変更後はこんな感じ。

picture20

だいぶすっきりしました。

不要アイコンの削除等

あとちょっとです。最後は Share ボタンの中身やブラウザのタブに表示されるメッセージを変更していきましょう。

Share ボタンの中身

デフォルトだと Share ボタン をクリックしたときにおそらく使わないであろうサービスやすでに終了してしまっているサービスが載っているので必要なものだけ残す。

picture21

変更するのは /home/okina_freelife/hexo/themes/indigo/layout/_partial/post/配下の share.ejs です。

  • タグで一つ一つの SNS の部分が書いてあるので、必要な部分のみ残してあとはすべて消していきます。
  • と
    • で囲まれている部分を削除です。
    "share.ejs 変更後"
    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
    <%
        // 使用 sns 直接分享接口
        // 微信使用 qrcode helper 或 http://goqr.me/api/ 生成二维码
        var sUrl = url.replace(/index\.html$/, '')
        var sTitle = page.title ? '《'+ page.title +'》 — ' + config.title : config.title
        var sDesc = truncate(strip_html(page.excerpt || config.description), { length: 80})
        var sPic = page.photos && page.photos.length ? page.photos[0]
            : (/^(http:|https:)?\/\//.test(theme.avatar) ? theme.avatar
                : config.url.replace(/\/$/, '') + theme.avatar)
    %>

    <div class="<%- scope %>-share" id="<%- scope %>Share">
        <ul class="reset share-icons">
          <li>
            <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<%-sUrl%>" data-title=" Facebook">
              <i class="icon icon-facebook"></i>
            </a>
          </li>
          <li>
            <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=<%-sTitle%>&url=<%-sUrl%>&via=<%-config.url%>" data-title=" Twitter">
              <i class="icon icon-twitter"></i>
            </a>
          </li>
        </ul>
     </div>

    これで不要なアイコンは消えますが、マウスでポイントしたときに中国語が出てしまうのでこれを変更します。

    picture22

    変更するファイルは /home/okina_freelife/hexo/themes/indigo/source/css/＿partial/配下の share.less です。

    hatena

    .less ... これはなにけ？

    .less というのは CSS の進化版だと思ってください。CSS だと書くのが面倒だったり、CSS では使えない機能が使えたりします！

    スタイルをいじる (見た目をいじる) 用途で使うのに変わりはないので、.less をいじると見た目が変わるということだけ覚えておいていただければ OK です！

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .share-icons {
            a {
                width: @share-icon-size;
                height: @share-icon-size;
                line-height: @share-icon-size;
                font-size: 1.33333em;
                border-radius: 50%;
                .tip-left();
                .boxShadow(.3s);
                opacity: 0;
                .transform(scale(0));
                -webkit-transform-origin: center bottom;
                transform-origin: center bottom;
                &:before {
                    content: attr(data-title)' で共有'

    一番最後の行のところを変更すれば大丈夫です。

    変更後はこんな感じ。アイコン２つでさみしいですが、追加していくのは応用編にて。

    picture23

    ブラウザのタブに表示されるメッセージの変更

    デフォルトだと以下の画像のような中国語になってます。

    picture24

    ここを自分の好きな文字列に変えましょう。あまり長すぎても切れてしまいますし、ブラウザで開いているタブの数によって何文字見えるかも変わってくるので最初の一文字が重要ですね！

    私は “翁” が少なくとも見えるようにしました。

    変更するのは themes 配下(/home/okina_freelife/hexo/themes/)の _config.yml です。

    1
    2
    3
    4
    # 动态定义title
    title_change:
      normal: 翁のブログ
      leave: 翁のブログ

    leave: は、別のタブが開かれているときに表示される文字列で normal: が当該タグに戻ったタイミングで一度表示される文字列になります。

    こんな感じです。

    picture25

    まとめ

    いかがでしたでしょうか。ひとまずこれで見た目的にはブログを開始できるくらいの体裁は整ったと思います。

    なので次の記事ではカスタムドメインを設定し実際に記事をインターネットへ公開する手順をやっていきましょう。お疲れ様でした！

    シリーズ記事まとめ

    “第 1 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.1 - Introduction 編”
    “第 2 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.2 - account 作成編”
    “第 3 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.3 - GAE 環境構築編”
    “第 4 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.4 - HEXO インストール編”
    “第 5 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.5 - Theme カスタマイズ編”
    “第 6 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.6 - 最小限カスタマイズ編”
    “第 7 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.7 - 記事作成編”
    “第 8 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.8 - インターネット公開編”