Bootstrap 5 ベース Movable Type 7 用テーマテンプレート “BRILLI@NT”

Bootstrap 5 ベースの Movable Type 7 用テーマ BRILLI@NT

Bootstrap 5 ベース Movable Type 7 用テーマテンプレート “BRILLI@NT”

Movable Type では、シックスアパート社より素晴らしいテンプレートである「Jungfrau」(ユングフラウ)が提供されており、ご活用されている方も多いのではないでしょうか。

しかしこの Jungfrau 、残念ながら Bootstrap 5 対応ではなく、レイアウト構文も Bootstrap のそれではないため、実装後いざ作り込んでいこうとすると、Jungfrau の CSS 構文と Bootstrap の構文が混乱してしまい、だったら最初からテンプレート部分を Bootstrap で書いてしまえ、と思い立ち作成したのが、この Bootstrap 5 のテンプレート「BRILLI@NT」です。

BRILLI@NT の特長

BRILLI@NT は、Bootstrap 5 のレイアウト構文で作られた、Movable Type 7 用のテンプレートです。Bootstrap 5 の新機能をレイアウト構文にふんだんに取り込み、視認性・保守性が高いテンプレートになっています。また Bootstrap Icon も <i> タグで利用可能であり装飾性にも優れています。

BRILLI@NT ライブ DEMO サイト

実際に BRILLI@NT ベースで構築したサイトをこちらでご確認いただけます。

https://lifestyle.avalon-studio.work/

BRILLI@NT ダウンロード

以下のリンクで BRILLI@NT のテーマファイルをダウンロードいただけます。ダウンロード後は、Movable Type の themes フォルダに、brilliant フォルダをコピーしてください。

なお、このテーマは無償でご提供しておりますが、カンパを受け付けております。特に企業でご利用の場合は是非数千円のカンパをお願いいたします。

カンパ先:

PayPal : AVALON STUDIO (paypal.com)
Bitcoin : 3Q6S6wVax4SCPLTqrapCd9LDQaipsFdLYy

 

BRILLI@NT のカスタマイズ方法

brilliant customize keyvisual
グローバルメニューの画像

こちらは、 テンプレート > グローバル NAVI の中の以下の 4 行目、以下の赤字部分を書き換えてください。

<img src="<$mt:BlogURL encode_html="1"$>/img/logo.png" alt="BRILLI@NT" class="img-fluid" width="190" height="36">
トップページの画像

こちらは、 テンプレート > トップページ の中の以下の 16 行目からの DIV で定義されています。以下の赤字部分を書き換えてください。

<div class="keyvisual-title-logo"><img src="/img/brilliant.svg" width="600" height="115" alt="BRILLI@NT" class="img-fluid"></div>

キービジュアル背景画像

この部分の背景は CSS で定義されていますので、背景を変更するには テンプレート > top.css の以下を変更してください。

.keyvisual {
  background: linear-gradient(135deg, rgba(250,220,0,1) 5%, rgba(250,85,225,1) 50%, rgba(0,255,250,1) 95%);
  color: #fff;
  min-height:640px;
 }
brilliant customize articles

記事に投稿を追加すると、この「ニュース」エリアに表示されます。初期値では最新 5 件が表示されます。

記事のアイコン

記事のアイコンは Bootstrap Icon で表示しています。アイコンを変更するには テンプレート > トップページ の 44 行目、赤字の部分を変更してください。

<i class="bi bi-newspaper fs-4 lh-sm me-2"></i>

※このテンプレートでは Bootstrap Icon を CSS で指定できるようアイコンフォントを読み込んでいます。

カテゴリ表示

記事にカテゴリが設定されている場合、図のようにカテゴリ名が表示されます。

バナー表示エリア

Jungfrau 同様、画像に @BANNER タグをつけるとバナー表示エリアに最大3件までバナーが表示されます。

brilliant customize banneritem

アセット > 一覧 より該当画像をクリックし、アセットの編集にて「説明」の箇所にリンク先 URL、「タグ」に @BANNER という文字列を記入するとバナーが表示されます。

ページ表示エリア

バナー同様、「ウェブページ」の編集時に「タグ」に「@TOP」という文字列を記入することで、最大4件までトップページ下部にリンクを表示させることができます。

そのほか、詳細なカスタマイズ方法は順次このページに追加していく予定です。