タイポグラフィ

アプリケーションとして明確で読みやすいバランスと見た目が原則です。マークアップはもちろん、見た目でもどれがヘッダー、フッターなのか分かるようにデザインされています。

ヘッダー

ヘッダーは、H1をはじめとした HTML タグはもちろん、.h1と記述して同じ見た目を再現することがでできます。

Movable Type が選ばれる理由

Movable Type が選ばれる理由

Movable Type が選ばれる理由

Movable Type が選ばれる理由

Movable Type が選ばれる理由

Movable Type が選ばれる理由

Movable Type が選ばれる理由

Movable Type が選ばれる理由

<h1>Movable Type が選ばれる理由</h1>
<h2>Movable Type が選ばれる理由</h2>
<h3>Movable Type が選ばれる理由</h3>
<h4>Movable Type が選ばれる理由</h4>

<p class="h1">Movable Type が選ばれる理由</p>
<p class="h2">Movable Type が選ばれる理由</p>
<p class="h3">Movable Type が選ばれる理由</p>
<p class="h4">Movable Type が選ばれる理由</p>

リンク

Movable Type は、安全で効率的なウェブサイト運用を可能にするCMSプラットフォームです。

Movable Type は、安全で効率的なウェブサイト運用を可能にするCMSプラットフォームです。

<p><a href="javascript:void(0);">Movable Type</a> は、安全で効率的なウェブサイト運用を可能にするCMSプラットフォームです。</p>
<p class="mt-bg-dark"><a href="javascript:void(0);">Movable Type</a> は、安全で効率的なウェブサイト運用を可能にするCMSプラットフォームです。</p>
      

リスト

class 名 list-unstyled を記述することで、ディフォルトのマークと左マージンがなくなります。

  • 誰でも簡単に記事を更新
  • 高いセキュリティで安心
    • タグだけでセキュアなサイトを構築
    • CMSと公開サイトのパスを分離可能
    • 細かな権限設定で役割を明確に
  • サーバー配信機能でさらに安心
  • Data API で柔軟なサイト構築が可能に
<ul class="list-unstyled">
  ...
</ul>

コード

コードブロックは <pre><code> の入れ子を作ることで実装できます。クラス名 .pre-scrollable を追加すると、高さ 350px で上下移動のスクロールバーが表示されます。

Movable Type 7 は、
これまでの使いやすさはそのままに、
新機能「コンテンツタイプ」により多様な形式のコンテンツに対応し、
柔軟なアセット管理が可能な、まったく新しい Movable Type となる予定です。予定されている新機能などについては、Movable Type ドキュメントサイトで公開しています。
Movable Type 7 は、
これまでの使いやすさはそのままに、
新機能「コンテンツタイプ」により多様な形式のコンテンツに対応し、
柔軟なアセット管理が可能な、まったく新しい Movable Type となる予定です。
予定されている新機能などについては、
Movable Type ドキュメントサイトで
公開しています。
コンテンツタイプを使えばコンテンツに必要な情報構造を思い通りに作成できます。
コンテンツ作成者は、デザインを気にせずコンテンツの作成に注力することができます。

コンテンツタイプは、各サイトごとに管理・作成でいいますが、
コンテンツタイプのひな形をシステムで管理することで、
複数のサイトで同じコンテンツタイプを利用できる仕組みが用意されています。

コンテンツタイプごとに個別アーカイブやカテゴリー別、ユーザー別、日付別、
ならびにその組み合わせによる一覧アーカイブを作ることができます。
共通部分はテンプレートモジュールで管理し、
ページごとに変化する部分だけをコンテンツに合わせた
テンプレートとして作成できます。

コンテンツタイプやコンテンツデータの作成・管理をする権限はもちろんですが、
コンテンツタイプのフィールド単位で編集権限を柔軟に設定することができます。
<pre><code>
  ...
</code></pre>
<pre class="pre-scrollable"><code>
  ...
</code></pre>

テキストの折り返し

クラス名.text-wrap を追加すると、テキストを折り返すとことができます。

01234567890123456789012345678901234567890123456789

01234567890123456789012345678901234567890123456789



    <div class="w-25">
      <p>01234567890123456789012345678901234567890123456789</p>
      <p class="text-wrap">01234567890123456789012345678901234567890123456789</p>
    </div>