LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@shinpinoshi

【Hexo】WordPressを使わずほぼ無料で収益化可能なブログを構築する（番外編 サイトの見た目を整える）

Last updated at Posted at 2025-10-06

はじめ

ひとまずリリースまでを本編をとしてやってますが、
まだまだ細かい設定をやらないとブログっぽくないためこちらに記載します。

本編では、Cardというテーマを使用してましたが、
lightというテーマに変更しました。

概要

・ファビコンの設置
・Copyrightの設定
・検索の文字を変更
・タイムラインの長さを変更
・HOMEボタンを有効化
・検索機能の仕様を変更
・検索ボックスを一番下に移動
・コメントを削除



## ファビコンの設定
### 手順
#### 1.ファビコンを配置

```path
themes\light\source\favicon.png

ファイル名はソースで固定されているので注意

サーバを再起動するとファビコンが設定されました！
image.png

Copyrightの設定

初期設定だと「Hexo」が設定されているので変更する
image.png

手順

1._config.ymlを変更

_config.yml
author: shinpinoshi

image.png

サーバを再起動するとcopyrightが変更される。
image.png

検索の文字を変更

「Suche」ってなんやねんって話なので変更します。
image.png

手順

1.de.ymlを変更

\themes\light\languages\de.yml
categories: Category
search: Search
tags: Tags
tagcloud: Tag-Cloud
tweets: Tweet
prev: Previous page
next: Next page
comment: Comment
archive_a: Archive
archive_b: "Archive: %s"
page: Page %d
recent_posts: New Post

image.png

あまり好みじゃなかったので色々変更しておきました。

サーバを再起動すると変更されます。
image.png

タイムラインの長さを変更

なんかタイムライン長くね？って思ったので変更します。
image.png

手順

1.記事内に下記の文字列を入れる

このコメントまでの文字列が表示される

<!-- more -->

image.png
または記事に下記のようにexceptを設定する
image.png

サイトをF5更新すると変更される。
image.png

HOMEボタンを有効化

HOMEボタンを押すと404になるので、改修する
image.png
image.png

手順

1.config.ymlを下記のように編集

_config.yml
menu:
  Home: /

image.png
これで問題なく画面遷移できるようになりました。

（初期値だとHomeが空文字となっており、URLにNULLという文字列が入るのが原因）

検索機能の仕様を変更

検索を行うとGoogle検索されてしまうので、サイト内検索できるように変更する
image.png
Enterを押すとGoogle検索される
image.png

手順

1.hexo-generator-searchをインストール

_config.yml
npm install hexo-generator-searchdb --save

2.プロジェクト直下の_config.ymlを追記

\site\_config.yml
search:
  path: search.xml
  field: post
  format: xml

image.png

3.テーマの_config.ymlを追記

\site\themes\light\_config.yml
search:
  enable: true
  service: local

image.png

4.テーマのsearch.ejsを追記

\site\themes\light\layout_widget\search.ejs
<div class="search">
  <input type="text" id="local-search-input" placeholder="Search">
  <div id="local-search-result"></div>
  <script>
    window.ROOT_PATH = '<%- config.root %>';
  </script>
  <script src="<%- config.root %>js/search.js"></script>
</div>

image.png

5.search.jsを新規作成

\site\themes\light\source\js\search.js
(function () {
  var input = document.getElementById('local-search-input');
  var resultContainer = document.getElementById('local-search-result');

  if (!input) return;

  var data = [];
  var xhr = new XMLHttpRequest();
  // Hexo root を反映した絶対パス
  xhr.open('GET', (window.ROOT_PATH || '/') + 'search.xml', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var parser = new DOMParser();
        var xml = parser.parseFromString(xhr.responseText, 'text/xml');
        var entries = xml.getElementsByTagName('entry');
        for (var i = 0; i < entries.length; i++) {
          data.push({
            title: entries[i].getElementsByTagName('title')[0].textContent,
            content: entries[i].getElementsByTagName('content')[0].textContent,
            url: entries[i].getElementsByTagName('url')[0].textContent
          });
        }
      } else {
        console.error('search.xml の読み込みに失敗しました', xhr.status);
      }
    }
  };
  xhr.send(null);

  input.addEventListener('input', function () {
    var str = this.value.trim().toLowerCase();
    var resultHTML = '';
    if (str.length > 0) {
      data.forEach(function (post) {
        if (post.title.toLowerCase().includes(str) || post.content.toLowerCase().includes(str)) {
          // 本文の一部を抜粋（50文字まで）
          var snippet = post.content.replace(/<[^>]+>/g, ''); // HTMLタグ除去
          if (snippet.length > 50) snippet = snippet.slice(0, 50) + '…';
          resultHTML += `
            <a href="${post.url}" class="search-result-item">
              <div class="search-result-title">${post.title}</div>
              <div class="search-result-snippet">${snippet}</div>
            </a>
          `;
        }
      });
    }
    resultContainer.innerHTML = resultHTML || '<div class="search-no-result">検索結果がありません</div>';
  });

})();

image.png

あとは自分好みにレイアウトを変更して下記のような感じに仕上がりました。
（もう少し調整すればいい感じになるかもです！）
image.png

ちなみにCSSは下記のような感じでやってます。

css.css
#local-search-result {
  margin-top: 0.2em;
}

.search-result-item {
  display: block;
  padding: 0.8em;
  margin-bottom: 0.2em;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  border: 1px solid #ddd;
  background-color: white;
}

.search-result-item:hover {
  background-color: #f7f7f7;
  text-decoration: none;
}

.search-result-title {
  font-weight: bold;
  margin-bottom: 0.3em;
}

.search-result-snippet {
  font-size: 0.9em;
}

.search-no-result {
  font-style: italic;
  padding: 0.5em;
}

image.png

検索ボックスを一番下に配置

検索ボックスをウェジットの一番下に配置したい
image.png

手順

1._config.iniのwidgetsの順番を変更する

\site\themes\light_config.yml
widgets:
- category
- tag
- archive
- search

image.png
サーバを再起動すると無事順番が変わりました！
image.png

コメント機能を削除

コメント機能は不要なので、削除したい
image.png

手順

1._config.iniのcomment_providerをfalseに設定

\site\themes\light_config.yml
comment_provider: false

image.png

2.comment.ejsをコメントアウト

\site\themes\light\layout_partial\comment.ejs
ファイル内をすべて削除

image.png

コメントアウトの場合、F12で確認するとコメントアウトしたHTMLブロックがそのまま残されるのであまりお勧めしません。

無事消えました！
image.png

締め

結構いい感じになったのではないでしょうか？
何か変更したいことが思いついたらここに追記していきますね！

image.png

以上お疲れさまでした！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?