Tips

ブログ開始時にやったGhostのカスタマイズを紹介

whitefrog

Apr 30, 2024 — 9 min read

Photo by Dmitriy Demidov / Unsplash

Ghostをインストールするとすぐにブログを書き始めることができますが、テーマを変えたりCode injectionを利用することで、デザインや機能を自分の好みにカスタマイズすることもできます。

この記事では、僕がブログ開始時に行った設定やカスタマイズをまとめておこうと思います。

設定

一般的なデザインや機能については、GhostダッシュボードのSettingから設定することができます。

基本的にはSettingの項目を上から順に見ていって、自分に必要なものを設定するだけなので、ここでは少し時間がかかったり、分からなくて調べたところだけ書いておきます。

テーマの選択と簡単なカスタマイズ

無料テーマと有料テーマ

テーマは公式が用意している無料のものでも18個あって、目的に応じて選択することができます。

正直、今の僕は無料のものでも十分満足したので、有料のものはそれほど詳しく見ていないのですが、GhostのMarketplaceから色々なテーマを購入して使用することもできます。

ThemeForest (Envato Market) など、外部のサイトでもGhostのテーマを購入することができます。

有料テーマはデザインも凝っていて編集の機能も追加されていたりするので、無料のものだと物足りない人でも満足いくものが見つかるんじゃないでしょうか。

選んだテーマと変更した項目

公式の無料テーマであるSourceを選んでみました。SourceはGhostのデフォルトのテーマなので、何もいじらなければインストールした状態でSourceが設定されています。

テーマのファイルはGitHubから見ることができます。

その他の公式テーマを選びたい場合には、まずSettingのDesign & brandingのCustomizeをクリックします。

出てくる画面で、右側Design欄最下部のChange themeをクリックするとテーマ選択画面になりますので、その中から気に入ったものを選んでインストール、設定することができます。

Design & brandingの画面ではテーマの設定の他にBrand, Site wide, Homepage, Postの４つタブがあり、サイトのデザインを変更することができます。

以下のリンクに詳細が記載されていますが、簡単にまとめておきます。

Brand
ロゴやアイコン、カバー画像などの設定ができます。

現時点ではロゴやアイコンは用意していないので、Accent color(リンクテキストなどの色)だけ好きな色に設定しました。

Site descriptionはまだ考えていないのでサイト名をそのまま書いて、Publication coverにはUnsplashのフリー画像をとりあえず設定しています。
Homepage
コンテンツの表示のされ方や表示する情報を選択します。

Header styleはコンテンツが少ないうちはLandingにしておくとスカスカに見えなくて良いと思います。検索窓を設置したければSearchを選びます。コンテンツが増えてきたら、HighlightやMagazineにすると目を引くデザインにすることができます。

Post feed styleは投稿した記事の表示形式を変更できます。Gridはグリッド上に表示、Listは縦に一覧表示となります。
Site wide
ロゴの位置やサイトの背景色、フォントなどを設定できます。自分の好きなデザインとなるように選択します
Post
ここでは各記事のページの設定ができます。記事の執筆者などのメタデータや関連記事の表示/非表示を選ぶことができます。

サイト上部(Primary)と下部(Secondary)のメニューバーに表示する項目とそのURLを設定します。

SettingのNavigationの項目を探します。

Customizeをクリックして、Primaryにヘッダに表示したい項目、Secondaryにフッタに表示したい項目を設定します。

僕の場合はPrimaryにホーム画面、Secondaryにプライバシーポリシーとコンタクトページを表示するように設定しました。

Ghostには標準でメンバーシップ機能が組み込まれていて、メンバー限定記事の公開やニュースレターの配信が簡単にできるようになっています。

ただ、こういった機能を必要としない場合は、画面に表示されるSubscribeのボタンを消したいですよね。

そういう場合はSettingから、Access という項目に行きます。

Editをクリックして、Subscription accessの項目でNobodyを選択すると、メンバー登録フォームとSubscribeのボタンを非表示にすることができます。

カスタマイズ

ダッシュボードのSettingからは設定できないような項目については、テーマを変えたり作ったりしない場合はCode injectionで対応することになります。

ここにHTMLを記述して、テーマ内部の要素をいじってデザインを変えたり、外部のJavascriptを利用したりすることが可能になるのですが、デザイン部分はテーマによって要素名が異なっている場合があるので注意が必要です。

目次の表示

記事に目次(Table of Contents)を表示するのに、Tocbotという見出しから目次を自動生成するJavaScriptライブラリを使用しました。

Tocbot

Tocbot - Generate a table of contents based on the heading structure of an html document

以下のサイトにGhostへCode injectionで設置する方法が紹介されていましたので、この情報を参考に設定してみました。

まずはCode injectionの画面でヘッダ側に以下のコードを貼り付けます。

<script src="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css" rel="stylesheet">

フッタ側には以下を貼り付けます。

<script>
    tocbot.init({
        tocSelector: '.toc',
        linkClass: 'toc-link',
        orderedList: true,
        headingSelector: 'h2, h3',
        collapseDepth: 3,
        contentSelector: '.gh-content',
        ignoreSelector: '.kg-header-card > *',
        headingsOffset: 40,
        scrollSmooth: true,
		scrollSmoothDuration: 420,
  		scrollSmoothOffset: -40,
        hasInnerContainers: true
    });
</script>

contentSelector: '.gh-content’　の部分はテーマによって異なるようなので、うまくいかない場合は自分の使っているテーマがコンテンツのクラスをどう設定しているのかを調べて書き換える必要があります。

Code injectionの設定が終わったら、記事に目次を設置する準備ができています。

各記事の目次を置きたい場所にHTMLカードを挿入して、以下のコードを貼り付けます。

<div class="toc"></div>
<style>
.toc:before {
  content: "Content:";
  display: block;
  margin-bottom: 20px;
  font-size: larger;
  font-weight: bold;
  border-bottom: 1px dashed #dadada;
  padding-bottom: 10px;
}
.toc {
  padding: 30px;
  border: 1px solid #dadada;
  border-radius: 5px;
  background-color: #fafafa;
}
a.toc-link {
  font-size: 80%;
  text-decoration: none;
}
li.toc-list-item {
    margin-top: 0;
}
.toc-list .is-collapsible {
  margin-left: 15px;
  color: #666;
}
</style>

これで記事に目次が表示されるようになり、目次のリンクから各見出しに飛べるようになりました。

今後新しい記事を書く度に同じコードを何度もコピペするのは面倒なので、上のコードをSnippetとして名前をつけて保存しておくと便利です。HTMLカードを選択すると出てくる次のアイコンをクリックするとSnippet名が入力できます。

TOCなどと名前をつけておくとわかりやすいです。

Snippet nameを入力したら、Createの＋ボタンを押すと保存されます。あとで呼び出すときはGhost editorでSnippet名に/を頭につけて入力すると呼び出すことができます。(名前をTOCとした場合は/TOC)

※テーマを直接いじってTocbotを使う方法はGhostのサイトに紹介されていました。サンプルを見ると記事本文とは別の列（画面左端）に目次が表示されていて、このデザインも綺麗なので後日試してみたいと思っています。Code injectionでもデザインいじれるのかもしれないので調べてみようと思いますが、Javascript素人なので時間かかりそう。

シンタックスハイライト

PrismやHighlight.jsといったライブラリを用いることで、コードにシンタックスハイライトをつけてみやすくすることができます。

Ghostの以下のガイドの、Add Prism via Code InjectionのところにPrismを追加する方法が記載されています。

ここに書かれている通り、Code injectionでヘッダに以下のコードを挿入すると、Prismによるハイライトが使えるようになります。

<!-- Prism -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.min.css">

リンクを新しいタブで開く

記事内のリンクをクリックしたときに、新しいタブで開くように設定しました。

これもCode injectionを用います。以下のコードをフッタに挿入することで、リンクを新しいタブで開けるようになります。

<!-- open link in new tab -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var links = document.querySelectorAll('a');
    links.forEach(function(link) {
      if (link.hostname != window.location.hostname) {
        link.target = '_blank';
      }
    });
  });
</script>

これは以下のリンクを参考にさせてもらいました。

フォントの色

本文中の一部分だけフォントの色を変えて強調したいことがあると思いますが、これは上手いやり方が見つかりませんでした。

本文中の色を変えたい場合は、少々面倒ですがその段落を丸ごとHTML Cardに<div>タグで括って記述して、その中で<font color="red">write something</font>のように強調したい部分だけ<font>タグでいじる方法しかなさそうです。

<div>例えば、<font color="red">こんな感じ</font>で書くと以下のように表示されます</div>

例えば、こんな感じで書くと以下のように表示されます

これはかなり面倒なので、何か対策を考えたいけど今のところどういう方法があるのか分かってません。テーマをいじればどうにかなるのかもしれませんが、また調べてみたいと思います。

見出しの色を変えたい場合はhタグにCSS設定すればいいので、実際にやったわけではありませんが簡単にできそうでした。

ハイライトの色

本文中の文字をハイライトしたい場合、ショートカットが使えます。Ghost editorのPost settingsの最下部にあるKeyboard shortcutsに書いてある通り、テキストを選択して

Command + Option + h

とすると、選択した文字列がハイライトされます。

ハイライトの色を変えたい場合はヘッダに以下のコードをインジェクションすると変えることができます。以下は赤色に変える例です。

<style>
mark {
    background-color: red;
}
</style>

この設定は、プレビューや実際の記事ではきちんと反映されますが、Ghost editor側では反映されずに黄色いままです。正しく反映されているかどうかはPreview画面で確認するようにしましょう。

Powerd by Ghost の非表示

Ghostをインストールしたそのままの状態だと、サイトのフッタに”Powered by Ghost”という文とリンクが表示されています。

この部分を非表示にしたいと思ったので、Previewでこの要素をInspectしてみると、以下の部分が対応していることがわかります。

<div class="gh-footer-copyright">
 Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
</div>

これを非表示にしたいので、対応するクラスを非表示にする以下のコードをCode injectionでヘッダに挿入すればOKです。

<style>
.gh-footer-copyright { display: none; }
</style>

おしまい

Code injectionだけでもある程度のことはできました。もっと本格的にデザインを変えたいという場合は、多少お金はかかりますが有料テーマを購入する方がコスパが良さそうです。Webデザインに詳しい方はテーマを自作するのもありですね。

ブログ開始時にやったGhostのカスタマイズを紹介

whitefrog

設定

テーマの選択と簡単なカスタマイズ

無料テーマと有料テーマ

選んだテーマと変更した項目

Navigationの設定

カスタマイズ

目次の表示

シンタックスハイライト

リンクを新しいタブで開く

フォントの色

ハイライトの色

Powerd by Ghost の非表示

おしまい

Read more

Ghostでコードブロックや画像を折りたたむ方法

ghost updateをすると編集したテーマファイルが元に戻ってしまう問題の解決策

GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる

部屋に飾る絵画とブログの画像

設定

テーマの選択と簡単なカスタマイズ

無料テーマと有料テーマ

選んだテーマと変更した項目

Navigationの設定

メンバーシップ機能 (Subscribeボタンの非表示)

カスタマイズ

目次の表示

シンタックスハイライト

リンクを新しいタブで開く

フォントの色

ハイライトの色

Powerd by Ghost の非表示

おしまい

Read more

Ghostでコードブロックや画像を折りたたむ方法

ghost updateをすると編集したテーマファイルが元に戻ってしまう問題の解決策

GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる

部屋に飾る絵画とブログの画像