記事の入力例

記事の入力例

公開日： 2025年07月01日（火）

更新日：2025年09月04日（木）

この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

見出し２が入ります

見出し３が入ります。

見出し4が入ります。

インライン系のHTMLタグ

この文章はダミーです。太字B。この文章はダミーです。

この文章はダミーです。イタリックI。この文章はダミーです。

この文章はダミーです。~~取り消し線T。~~この文章はダミーです。

この文章はダミーです。コード acms-margin-top-small この文章はダミーです。

この文章はダミーです。リンク（https://www.appleple.com/）。この文章はダミーです。

テキスト配置

左寄せ短め。

左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。

中央寄せ短め。

中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。

右寄せ短め。

右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。

リスト表示

リストが入ります
リストが入ります
- リストが入ります
- リストが入ります
リストが入ります

番号付きリストが入ります
番号付きリストが入ります
1. 番号付きリストが入ります
2. 番号付きリストが入ります
番号付きリストが入ります

引用文

引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。

コード

.tag-wrapper {
  margin: 0 0 1.5rem;
}

.tag-title-inline {
  margin: 0 0 1rem;
  font-size: map.get(global.$font-scales, body-m);
}

.tag-box {
  padding: 1rem 0.5rem 0.25rem;
  background: global.$color-gray20;
}

リンクボタン

ファイル

sample.pdf

テーブル

スクロールを促すテーブル		見出し	見出し	見出し	見出し
見出し	テスト	テストテスト	テストテストテスト	テストテスト	テストテストテストテスト
見出し	テスト	テストテスト	テストテスト	テストテスト	テスト
見出し	テスト	テストテスト	テストテストテストテスト	テストテスト	テスト

マルチカラム

テキストがテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

developテーマ使い方ガイド

CMS Ver. 3.2 より、新しい公式テーマ「develop」が追加されました。このテーマは、現代的なWeb開発のスタイルに合わせて設計されており、拡張・カスタマイズのベースとしても最適です。採用技術・特徴Twigテンプレートによる実装Viteによる高速ビルドTailwind CSS によるスタイル実装htmx による部分的なインタラクションPrettierによるコード整形V2モジュールについて新しく追加された、V2モジュールは twigテンプレートのみで使用できるモジュールです。 twigテンプレートによるテーマ実装では、基本的に V2モジュールを使って実装していきます。V2モジュールのスニペット管理者でログインしている状態で Ctl + K （⌘K）を押すことで、クイックサーチ機能が開きます。ここで ;v2 と入力することにより、V2モジュールのスニペット一覧を表示できます。クイックサーチからスニペット表示V2モジュールの変数表の見方V2モジュールでは、変数表が用意されていません。代わりにテンプレートでモジュールを読み込んだ状態で、クイックサーチから利用できる変数を確認できるようになっています。モジュールの記述例{% set blogField = module('V2_Blog_Field', null, { bid: RBID }) %}管理者でログインしている状態で Ctl + K （⌘K）を押すことで、クイックサーチ機能が開きます。この時デバックモード状態であれば # を入力することで、読み込んでいる V２モジュールの変数表を表示することができます。クイックサーチから変数表を表示実際の値が入った変数表が確認できるバンドル環境の使い方インストールthemes/develop に移動して、下記のコマンドを実行します。実行することでビルドに必要なツールなどがインストールされます。$ npm install本番用ビルドcssのbuildとjsのbuildを行います。納品時にはこのコマンドを実行して納品してください。 JavaScriptが productionビルドとなります。$ npm run build開発用ビルド以下のコマンドを実行すると、cssとjsの変更をwatchしてビルドを行います。スムーズにビルド・確認ができるため、開発中はこちらのコマンドをご利用ください。$ npm run dev組み込みJSについてJavaScriptは include/head/js.twig で読んでいます。developテーマではパフォーマンス向上のために、Touch_SessionWithContributionを使って、投稿者以上の場合だけ読み込むようにしています。{% if touch('Touch_SessionWithContribution') %} <script src="jquery-.min.js" charset="UTF-8"></script> <script src="acms.js" charset="UTF-8" id="acms-js"></script> {% endif %}組み込みJSを読まないようにすると、スライダーや、画像ビューワーなどの組み込みJSが動作しなくなりますが、一部のよく利用する組み込みJSを src/js/lib/buildIn/ に実装しsrc/js/main.js で読み込んでいます。import { // 組み込みJS } from './lib/buildIn/';これ以外に必要な機能やライブラリは、自分でインストール、実装する必要があります。バンドル環境が整っていますので、 npm経由でライブラリをもってきて、 importする方式をお勧めします。以下 lazy load を実装する例になります。$ npm i vanilla-lazyloadimport LazyLoad from 'vanilla-lazyload'; domContentLoaded(() => { new LazyLoad({elements_selector: '.js-lazy-load'}); });