GitHub Pages＋PelicanでつくるBlog：テーマ設定と見た目の対応

GitHub PagesとPelican利用時のテーマ設定とfavicon等の見た目対応メモ

みずのり 2025-12-07(日) 2025-12-07(日) 1 mins
環境構築メモ github pelican

＜シリーズ全体のリンクはこちら＞

凝るとキリがないのですが、テーマを設定することで見た目や使い勝手を変えることもできます。テーマの設定方法、faviconなどの見た目に影響する部分に関してのメモを残しておきます。


テーマの設定方法

取得元、見た目の確認

テーマとその見た目は以下サイトで確認できます。そして選んだテーマを適用します。

テーマ設定方法

ざっと以下の手順となります。

  1. テーマのデータをDL（git cloneでもよい）して、プロジェクトディレクトに置く
  2. pelicanconf.pyにテーマのディレクトリを設定する

以下のように、プロジェクトのrootディレクトリにテーマのデータ（theme_directory）を置いたとしましょう。

repository_directory/
|- content/
  |- ...
|- theme_directory/
  |- ...
|- pelicanconf.py

pelicanconf.pyに以下を追記します。あとは、make htmlなどの手順を実施すればOK。

THEME = "theme_directory"


（余談）本Blogのテーマ設定時の手順

このBlogのテーマを設定した際にあわせて実施する内容をメモしておきます。

設定したテーマ

simplify-theme を利用してます。

テーマに関するモジュール（プラグイン用）のインストール

テーマのディレクトリにrepuirement.txtがあったので、pipのインストールを実施（テーマディレクトリに移動して以下コマンド実施）。

> pip install -r ./repuirement.txt


テーマのサンプルをcontentに展開して確認

テーマのディレクトリ内にbuildディレクトリが含まれておりました。contetに記事の書き方のサンプルがありましたので、見栄えや書き方の確認をしてます。

pelicanconf.pyのサンプルを取り込む

同じくbuildディレクトリに、pelicanconf.pyにプラグイン等のサンプルも記載されていたので、自分の設定に取り込んでます。
※プラグインは、前段で実施したモジュールのインストールが前提となっているようでした。

その他、テーマに対して実施した調整

  • 日付のフォーマットを設定（後述）
  • 余計なリンク削除（linkedInとか）
  • 一部文字色の変更
  • タイトル（雑メモ）からTOPへのリンクを可能として、Homeのリンクを削除


見栄えの調整（日付フォーマット）

デフォルトだと時刻表記が英語ベースで見づらかったので修正してます。この修正はpelicanconf.pyで可能です。以下のように設定してます。

DEFAULT_LANG = 'en'
DATE_FORMATS = {
    # 'en': ('usa','%a, %d %b %Y'),
    'en': ('jpn','%Y-%m-%d(%a)'),
}

なお、デフォルトの言語はjpもしくはJapaneseにしようと思ったのですが、Docutils has no localization for 'jp'. Using 'en' instead.といったエラーが出たため、enをベースとしてます。まあ、この設定で困ってません。


favicon設定（おためし程度）

ブラウザのタイトルの左側などのロゴアイコン用のfaviconも雑に作ってます。以下手順ですね。

ベースの画像を作成（GIMP）

512x512のサイズでベース画像を作成、PNG形式とします。GIMPなんて久しぶりに使う感じ…

ロゴのベース作成


一括変換を実施

Favicon Generator. For real.で一括変換しました。作成した512x512のPNGファイルを対象に作成します。

ロゴデータの配置とpelicanconf.pyへの設定記述

ロゴデータをcontentの直下に配置します。生成された以下のファイルを対象としました（適切かは不明）。favicon.icoだけは必須でしょう…

  • favicon.ico
  • favicon-96x96.png
  • apple-touch-icon.png
  • web-app-manifest-192x192.png

あわせて、outputディレクトリに反映されるよう、pelicanconf.pyに以下のように記載してます。

STATIC_PATHS = [
    'images',
    'favicon.ico',
    'favicon-96x96.png',
    'apple-touch-icon.png',
    'web-app-manifest-192x192.png',
    'logo.png',
    '.htaccess',
    'robots.txt'
]

あわせて、テーマのディレクトリにあったtemplates/base.htmlのアイコン記載に以下のような追記をしてます。
 ※各自のテーマで変更箇所は異なるかもです。

<link rel="shortcut icon" href="{{ SITEURL }}/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="{{ SITEURL }}/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="{{ SITEURL }}/favicon-96x96.png">
<link rel="icon" href="{{ SITEURL }}/web-app-manifest-192x192.png">

ひとまず、上記としてます。テストはしてないので、うまく反映されない場合もあるかもです。

参考情報



Read more:
Related posts: