Ghostでコードブロックや画像を折りたたむ方法
GhostのエディタではCardsという機能を使って記事本文中に様々な要素を埋め込むことができます。
上記リンクでどんなカードがあるのかを確認することができますが、例えば、画像や動画、Bookmark(リンクを見やすく整える)、HTML、Embed(YouTube、Xなど外部サービスの埋め込み)などが用意されています。
その中にToggleというカードがあるのですが、これはテキストを折り畳んで表示したいときに使用することができます。
実際にTogglカードを使うと以下のような見え方になります。
クリックすると開いてみることができます
中に書いた文章は開かないとみることができません。
ボールド、イタリック、リンク付きテキストのみ対応しています。
※ここのリンクはGhostのCardの説明ページで、上においてあるリンクと同じものです。
非常に便利なカードなのですが、対応しているのが、ボールド、イタリック、リンク付きのテキストのみなので、画像やコードブロックを折り畳んで表示したい場合には使うことができません。
この記事では、Toggleカードを使わずにGhostで折り畳みを表現したいときの方法をメモしておきます。
HTMLでの表現
HTMLでは<details>タグを使うことで、ユーザーがクリックすると開いて詳細を確認できるという表現をすることができます。
<details></detials>で囲んだ部分を折りたたみすることができ、折り畳んだ状態で表示されるテキストは<details>タグの内部に<summary></summary>で囲んで記述します。デフォルトでは閉じた状態になっています。
<details>
<summary>ここが表示されるテキスト。クリックすると開きます</summary>
クリックして開くとここに書いたものが表示される
</details>
実際に<details>タグを使って書いた上記の文章をGhostのHTMLカードに埋め込んでみると、以下のような見え方になります。
ここが表示されるテキスト。クリックすると開きます
クリックして開くとここに書いたものが表示されるこのままでももちろん目的は達成できるのですが、画像やコードを中に置きたい場合にその部分もHTMLで書くのは大変です。
できればGhostに用意されているカードはそのまま流用したいので、HTMLカードを２つ使って対応することにします。
HTMLカードを２つ使って折り畳みを表現
ポイントは、１つ目のHTMLカードに<details>、２つ目のHTMLカードに</details>を書いて、２つのHTMLカードで<details>タグに囲まれたもの全体を表現するところです。
この方法だと、２つのHTMLカードの間にImageカードやコードブロックなど、好きなものを置くことで、なんでも折りたたむことができるようになります。
2つのHTMLカードは次のように書きます。
・1つ目のHTMLカード
<details>
<summary>ここに表示されるテキストを書く。クリックすると開きます</summary>
文章は表示したい場所に書きます。もちろんここに書いても大丈夫です。
・(画像やコード、文章など好きなものをHTMLカードの間に置く)
・2つ目のHTMLカード
</details>
これを実際に表示してみると以下のように見えます。
ここに表示されるテキストを書く。クリックすると開きます
文章は表示したい場所に書きます。もちろんここに書いても大丈夫です。
<details>
<summary>こんな風にコードブロックも折り畳めます</summary>
</details>普通に文章を書いても大丈夫です。ここまでがHTMLカードに挟まれた部分です。
これで目標は達成できました。
おしまい
デザインがToggleカードとは違ってカッコよくないのですが、そのあたりは別途<style>タグをCode injectionで書くなり、HTMLカードに記述しておくなりすることで好きなようにいじることができます。
HTMLカードに書いておいてそのカードに名前をつけて保存しておくと後で呼び出せるので良さそうですね。
デザイン部分についてはまた後日編集してみようと思います。
