Zensicalでコンテンツをインライン表示する

Zensicalでコンテンツをインライン表示する方法をメモしておきます。設定方法は公式サイトのNavigation integration¶で説明されています。このページで説明されている方法では「あらゆるコンテンツをインライン表示できる」わけでは無く、「Admonitionsと文章などのコンテンツをインライン表示する」という点に注意してください。「Admotion」とは、注意書きや情報ボックスなどを表示するための機能です。

検証環境

対象	バージョン
Zensical	0.0.15

ナビゲーションバーを統合する

コンテンツのインライン表示とは直接関係しませんが、ナビゲーション表示を統合しておきます。これにより、コンテンツ表示領域が広くなり、インライン表示の効果がわかりやすくなります。

ナビゲーションを統合していない状態 (デフォルト)

デフォルトでナビゲーションは統合されておらず、Zensicalで構築したサイトにアクセスすると以下のように表示されます。

ナビゲーションを統合した状態

ナビゲーションを統合するにはZensicalの設定ファイルであるzensical.tomlへ以下の設定をします。

features = [
    "toc.integrate",
]

この設定で画面表示が以下のように変化します。

画面右側に表示されていたナビゲーションが左側に統合され、コンテンツ表示領域が広くなっていることがわかります。

コンテンツをインライン表示する

前述の通り、Znesicalのインライン表示機能は「Admotionsと文章や画像などのコンテンツをインライン表示する」ための機能です。具体的には以下のように設定します。「Admotionを左側に表示する」または「右側に表示する」、各々の場合での設定・表示例は以下の通りです。

注意書きを左側に表示する

設定例

# inline left

Admonitions can also be rendered as inline blocks (e.g., for sidebars), placing them to the right using the inline + end modifiers, or to the left using only the inline modifier:

!!! info inline "Lorem ipsum"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Important: admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there's insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

表示結果

注意書きを右側に表示する

設定例

# inline right

Admonitions can also be rendered as inline blocks (e.g., for sidebars), placing them to the right using the inline + end modifiers, or to the left using only the inline modifier:

!!! info inline end "Lorem ipsum"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Important: admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there's insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

表示結果

画面幅による表示結果の違い

Zensicalに限った話ではありませんが、Webコンテンツは画面幅によって見た目が変わる場合があります。このインライン表示も画面幅によって見た目が変化する可能性があります。例えば以下のコンテンツがあったとします。

# inline left

Admonitions can also be rendered as inline blocks (e.g., for sidebars), placing them to the right using the inline + end modifiers, or to the left using only the inline modifier:

!!! info inline "Lorem ipsum"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

**Important:** admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there's insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

# inline right

Admonitions can also be rendered as inline blocks (e.g., for sidebars), placing them to the right using the inline + end modifiers, or to the left using only the inline modifier:

!!! info inline end "Lorem ipsum"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

**Important:** admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there's insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

私の環境では解像度(画面幅)によって表示が以下のように変化しました。

画面幅が「1280px」の場合

画面幅が「1024px」の場合

画面幅が「800px」の場合