ようこそ「アリガトウラス号」へ

パネル内見出し処理テスト用

ストーリー見出し1

見出し2　タブ内で一覧を表示する

• 説明
• 新着
• ブログ一覧
• カラム
• サムネイル
• アラートボックス
• パネル

個数を指定する場合は引数で指定する。
#qblog_list(tile,8)

改修箇所例

かんたんな記述はそのまま
読みやすい文字
見やすい編集画面
関数（旧まじない）の機能修正と改善
画像アップロード画面の改善
設定画面の改善
ログイン画面の改善
カラム利用の改善
従来のままでは表示エラーになってしまう高さや行毎の枠数が自動で調整されます
デザイン面は全面的に改修、大きく改善されました。
従来テーマとの互換性重視を廃止することでカスタマイズ性能が大きく向上
Boostrapの利用見直し
モバイル端末や高解像度に対応
従来はバイル端末や高解像度への対応が十分できていませんでした。これをモバイル画面サイズ4種類、768px、992ｐｘ,1200ｐｘ,1500px,2Kサイズの2560ピクセル、4Kサイズも含めて、10種類の解像度に細かく対応しました。
文字の大きさ、色などを全面的に改修
従来は小さい画面では読めなかった文字の大きさや行間、編集画面の文字の大きさ、配色を全て改修しました。
サムネイル枠で画像毎にリンクを貼らなくてもいいようになり、記述の視認性とメンテナンス性が大幅に改善されました
マウス反応を枠いっぱいに指定できるようになりました
小さくて見づらかった編集画面を見直しました。モニターを縦にしても編集しやすくなりました。
その他多数

互換性を廃止
従来のテーマや編集プログラムとの互換性を重視する事を見送った理由を説明します。
よくこれで販売できたなと思うくらい継ぎ接ぎがひどかったためです。最初は互換性を持たせる事を検討しましたが、ひどくなるのでやめました。

サムネイル・カラム表示

かんたんな記述はそのまま
従来は表示が崩れて使えなかった高さや行毎の枠数が自動で可変します
モバイル端末や高解像度ディスプレイなど9種類の解像度へのきめ細かい対応を実現。また、画面を拡大してもストレスが少なくなるように設計しました。
マウス反応を枠いっぱいに指定できるようになりました
サムネイル内に複数リンクを設置できるようになりました。
マウス操作を枠いっぱいにしたい場合は別の記述を追加します（サムネイルの逆バージョンです）

【注意】
サムネイル画像にはリンクを貼らない方が良いです。
自動リンクが動くと<br>タグが自動でついてしまう仕様なのでつけない方が見やすくなります。

サムネイル・カラム新機能説明

【新機能：自動リンク付与】説明

サムネイルの画像や文字にリンクがあるとクリック反応範囲が自動的に枠いっぱいに付与され、操作性が向上しています。さらにリンクが自動で太字になります。
従来は操作性を向上するため、サムネイルに画像、リンクタイトル、ボタンに最低でも３つのリンク記述が必要でした。さらにリンクタイトルを太字にしないとわかりませんでした。
この工夫によって、文字にリンクを指定するだけで他のリンクを記述しなくて済むようになりました。記述が少なくなったことで費やす作業時間が従来の10分の1以下になりました。

【新機能：サムネイル枠固定】説明

追記する形でサムネイル枠のアニメーションを固定できます。

#html2(<div class="thumbnail_no_hover">)
#thumbnails(++++){{{{
ここに内容が入ります。
++++
ここに内容が入ります。
}}}}
#html2(</div>)

実装例をみましょう。
これを見ているのがパソコンであれば、マウスカーソルをリンクのある枠とそうでない枠の上に載せるとカーソルの形が違うことがわかります。

【新機能：レイアウト改修】説明

サムネイル・カラムは全て改修され、現在必須のレスポンシブデザインに完全対応しました。画像入りカードの作成もできるようになりました。

HAIKでセット販売されていたテーマはBoostrap3の機能を使っていたものの、細かい所には対応しておらず、お粗末な内容でした。

おそらくBoostrap3のスタイルシート生成機能を使って作成したのだと思いますが、ご丁寧にエラーも作り込んでいました。

HAIKに限った話ではありませんが、市販の安価なCMSのテーマではスタイルシートなどの細かい作り込みはユーザーが自力で行う事が前提になっています。これはスタイルシートを作り込むと、制作費用が高くなるためです。しかし、見やすいWEBサイトを作成するにはスタイルシートを作り込まないと文字が小さすぎて見てもらえません。

HAIKでは期待されながらも「使えないワースト機能」と言われてきたサムネイルのカード表示では「レイアウト崩れ」などの課題があり、サムネイルの高さも制限されて、画像の可変など全部を手動で調整する必要がありました。

他CMSでBoostrapを使っているテーマもありますが、解決はどうしても複雑になってしまいます。これらの問題を全自動で揃えるように解決しました。

しかし、仕様が不明な所からやらねばならず、非常に難解でした。

最大で12桁のサムネイル並びに対応しました。画像の大きさも自動で調整しています。枠の個数は1個～無制限です。多すぎると記述がわからなくなるので12個までにした方がいいでしょう。

非常に手間がかかっていたのが改修によって使えるようになりました。しかも記述はほとんどそのままです。
　
画像そのものはあらかじめファイルサイズを小さくする工夫が必要ですが、一度小さくして、画像管理機能でアップロード、ラベルなどを設定すれば、柔軟な使い回しができるようになります。

また、自動で行ごとにサムネイルの高さを揃えるようにようになり、これによってインデックスカードをグリッド表示（グリッドデザイン）で見栄えのいい状態で表示できるようになりました。ブログ等のインデックスもこれが使われています。
　
ブログで概要も表示されるリスト表示（リストデザイン）もレスポンシブ対応しました。システム仕様上、グリッドデザインと同時に利用できない難点はありますが、カード毎に画像、日付、概要配置を改修して、使いやすくなりました。大きさなどは別途オプションで変えられます。

この大きな改修の結果、従来のサムネイル・カラム利用に比べて、万倍以上の価値を生み出せるようになったといっても過言ではありません。

【見出し1（h2）　タイトル】 折り返しテスト用文字◇◇◇◇◇◇◇◇

【見出し2（h3）　タイトル】 折り返しテスト用文字◇◇◇◇◇◇◇◇

【見出し3（h4）　タイトル】 折り返しテスト用文字◇◇◇◇◇◇◇◇

【見出し1（h2）書式テスト】【サブ見出しテスト】

【見出し2（h3）書式テスト】【サブ見出しテスト】

【見出し3（h4）書式テスト】【サブ見出しテスト】###

セクション表示テスト

セクションを使って背景を変えた表示もできます。
従来は見出し1～3を表示すると装飾がそのまま出るので不自然でしたが、自動的に装飾を外すようにしました。セクション内で見出しを出したい場合に使えるなど応用が広がりました。

セクション内でパネルやアコーディオンパネルを記述すると自動的にセクションにあった書式、半透明のアコーディオンパネルが出るように調整しました。
ただ、万能なものではないのでパネルは明るい背景写真が多用されるようであればカスタマイズ調整が必要になるかもしれません。

セクションを続けて記述すると、自動的に一体になるように調整しました。

ポイントセクションの背景に見出しや段落を適切なスタイルで表示できるようになりました。

新スタイルについて

このページ専用のスタイルを組み込んで、読みやすさを優先して、見出しの上下、段落間を大きく開けて、読者が読みやすいようにしました。編集時、行を空けることで、自動的に段落と見なされるようにしています。

• 見やすくするため、自動的に見出し2と本文の間を空けるようしています。目次からジャンプする時、本文が固定メニューに隠れてしまうのを防ぐねらいもあります。

• 編集モードで意図的に節の境目を広げると視認しやすくなります。これによって、ソースの方も読みやすくしています。

これら空白があることで脳がひと息つくことができて、内容なども頭に入りやすくなります。とくにスマホやタブレットの小さい画面では脳が緊張しているので多用することをお勧めします。

ルビ機能

• ルビが読めないとの要望にお答えしました。

バリアフリー対応

小さすぎたルビ文字の大きさ、段落の行高とレイアウトが大きく改修され、大きく読みやすくなりました。

前：表示されている書体の50%（常時10ピクセル）老眼の方だと楽に読めません。
↓
改良：表示されている書体の70%へ（大きさに比例して可変、段落で14～20ピクセル程）
小さい文字が見えないという方でも楽に読めるようになりました。

ルビをふる文字列(もじれつ)

• 田子(たご)の浦(うら)に　うち出(い)でてみれば　白妙(しろたえ)の　富士(ふじ)の高嶺(たかね)に　雪は降りつつ

• 今来むと　言ひしばかりに　長月(ながつき)の　有明(ありあけ)の月を　待ち出で(まちいで)つるかな

--&ruby(たご){田子};の&ruby(うら){浦};に　うち&ruby(い){出};でてみれば　&ruby(しろたえ){白妙};の　&ruby(ふじ){富士};の&ruby(たかね){高嶺};に　雪は降りつつ

--今来むと　言ひしばかりに　&ruby(ながつき){長月};の　&ruby(ありあけ){有明};の月を　&ruby(まちいで){待ち出で};つるかな

アコーディオンパネル

従来は下線がある以外はアコーディオンパネルとわかりにくく、パネルをそのまま使っているので、デザイン的にもパネル類と区別できないので不便でした。
修正して、アコーディオンパネルと区別できるアイコンがつき、クリツク可能な範囲が枠いっぱいになり、操作性が大きく改善されました。

さらに色が一色に統合されますが、メニューでアコーディオンパネルを使って、折りたたみメニューを実現しました。

デフォルト

#bs_accordion(){{
-詳しい説明
====
情報
説明を書く
}}

アコーディオンパネル

通常

#bs_accordion(nocolor){{
-nocolor 透明
====
詳しい説明を書く
}}

#bs_accordion(){{
-色記述なし
====
詳しい説明を書く
}}

#bs_accordion(default){{
-default
====
詳しい説明を書く
}}

#bs_accordion(secondary){{
-secondary
====
詳しい説明を書く
}}

#bs_accordion(info){{
-info
====
詳しい説明を書く
}}

#bs_accordion(danger){{
-danger
====
詳しい説明を書く
}}

#bs_accordion(primary){{
-primary
====
詳しい説明を書く
}}

#bs_accordion(success){{
-success
====
詳しい説明を書く
}}

#bs_accordion(warning){{
-warning
====
詳しい説明を書く
}}

#bs_accordion(light){{
-light
====
詳しい説明を書く
}}

#bs_accordion(dark){{
-dark
====
詳しい説明を書く
}}

透明なアコーディオンパネル(nocolor)

#bs_accordion(nocolor)

アコーディオンパネルの背景が透明色になる「nocolor」を用意しました。セクションで濃い画像を背景にした時に使えるようにしました。

グループ形式のアコーディオンパネル

bs_accordionをクラスで囲む方法をグループ形式（タブ形式）のアコーディオンパネルで実装してみましょう。

#bs_accordion(success){{
-詳しい説明1
-詳しい説明2
-詳しい説明3
====
詳しい説明1
詳しい説明を書く
====
詳しい説明2
詳しい説明を書く
====
詳しい説明3
詳しい説明を書く
}}

枠（パネル）、見出し付枠（パネル）

枠

#bs_box(panel,info){{
panel,info系統枠
本文が入ります。
}}

線付きの枠

デフォルト

色つきパネル ヘッダフッタがない

記述

#panel(nocolor){{
 nocolor　透明
}}

#panel(default){{
default
}}

#panel(secondary){{
secondary
}}

#panel(info){{
info
}}

#panel(primary){{
primary
}}

#panel(success){{
success
}}

#panel(warning){{
warning
}}

#panel(light){{
light
}}

#panel(dark){{
dark
}}

色つきパネル　パネル上下に見出しがある例

見出しつきパネル　パネル上下に見出しがある例

文中での備考や補足説明など、目立たせたい所に使います。
見出しは上もしくは下だけにすることもできます。見た目だけでなく内部の書式も大きく変わっています。

デフォルト

#panel{{
ヘッダー：パネル上下に見出しがある例
====

田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟

====
フッター
}}

記述

#panel(secondary){{
secondary
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(default){{
default
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(primary){{
primary
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(success){{
success
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(info){{
info
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(danger){{
danger
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(warning){{
warning
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(light){{
light
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

#panel(dark){{
dark
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

新機能　パネル内の見出し表示（2020/07/11）

パネル内で見出しを自動的に整形して表示できるようになりました。

#panel{{
ヘッダー：パネル上下に見出しがある例
====
*見出し1###サブ見出しテスト###
**見出し2###サブ見出しテスト###
***見出し3###サブ見出しテスト###
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

新機能　パネル見出し表示（2020/07/11）

パネルの見出し欄で従来は書式が崩れていた見出しを自動的に整形して綺麗に表示できるようになりました。
ヘッダーはともかく、フッターに見出しを出す意味があるかはわかりませんが、使い方次第で面白い見せ方にできるでしょう。

アコーディオンパネルでも使えるのではないかと思いましたが、プラグイン内でパネルヘッダ文字列の処理方法が異なるためできませんでした。

#panel(info){{
*ヘッダー：パネル上下に見出しがある例
====
*見出し1###サブ見出しテスト###
**見出し2###サブ見出しテスト###
***見出し3###サブ見出しテスト###
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
*フッター
}}

#panel(info){{
*見出し1ヘッダー###サブ見出しテスト###
====
**見出し2###サブ見出しテスト###
***見出し3###サブ見出しテスト###
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
}}

**見出し2###サブ見出しテスト###
====
***見出し3###サブ見出しテスト###
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
}}

#panel(info){{
***見出し3###サブ見出しテスト###
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
}}

色つきパネル　パネル上下に見出しがある例 記述ミス・該当なしの場合

#panel(non){~}

#panel(non){~}

色つきパネル　パネル上だけに見出しがある例

色つきパネル　タイトルがなく、パネル下だけに見出しがある例

panel関数自体の見出しのチェックが不十分なため、noheaderオプションを入れて回避します。

#panel(noheader){{
本文がはいります
====
見出し
｝｝

使い道としては以下のように画像キャプションとしても使えます。

明るい色調のパネル例

上のは目がチカチカする人もいるので色彩を抑えてありますが、オプションで明るい色の方も用意してあります。

線付きの枠

デフォルト

色つきパネル ヘッダフッタがない

色つきパネル　パネル上下に見出しがある例

色つきパネル　パネル上下に見出しがある例 記述ミス・該当なしの場合

記述ミスまたは該当なしの場合、デフォルトで出る

#panel(non){{
ヘッダー：パネル上下に見出しがある例
====
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
====
フッター
}}

色つきパネル　パネル上だけに見出しがある例

色つきパネル　タイトルがなく、パネル下だけに見出しがある例

panel関数では見出しの上下の区別がプログラム単体では区別できない欠点があります。フッターをタイトルにしたい場合、

#panel(info){{
本文
====
フッター見出し
}}

と書いたつもりでも、本文がヘッダーとされてしまいます。

panel関数を改造して「noheader」を指定する事でフッター見出しを意図的に知らせるようにしました。

#panel(noheader,info){{
本文
====
フッター見出し
}}

これによってフッターのみがタイトルになる場合に記述できます。

枠の外に見出しがついたパネル

枠の外に見出しがついたタブのようなデザインのパネルの実現は困難でした。改修でデザイン的にもかなりよくなりましたが、行全体に背景色がついた見出しつきパネルは色がある背景が邪魔になる場合がありました。

これをpanel関数の引数の改修によって実現できるようになりました。しかも下の見出しが右寄りになるよう自動的に調整されます。

従来のパネルの見出しと使い分ける事で洗練されたデザインの枠が実現できるようになりました。

#panel(panel-title-outer){{
見出し
====
内容が入ります
====
CENTER:見出し
}}

#panel(panel-title-outer default){{
見出し
====
内容が入ります
====
CENTER:見出し
}}

#panel(panel-title-outer secondary){{
見出し
====
内容が入ります
====
CENTER:見出し
}}

#panel(panel-title-outer info,++++){{
見出し
++++
CENTER:内容が入ります
++++
見出し
}}

#panel(panel-title-outer primary,----){{
見出し
----
内容が入ります
----
見出し
}}

#panel(panel-title-outer success,@@@@){{
見出し
@@@@
内容が入ります
@@@@
見出し
}}

#panel(panel-title-outer danger,~~~~){{
見出し
~~~~
内容が入ります
~~~~
見出し
}}

#panel(panel-title-outer warning,####){{
見出し
####
内容が入ります
####
見出し
}}

#panel(panel-title-outer danger){{
見出し
====
内容が入ります
====
見出し
}}

#panel(panel-title-outer light){{
見出し
====
内容が入ります
====
見出し
}}

#panel(panel-title-outer dark){{
見出し
====
内容が入ります
====
見出し
}}

nocolorは仕様上使えません。

見出しと枠線を分けてスタイルシートを指定しているため、nocolorは使えません。

#panel(panel-title-outer nocolor){{
見出し
====
nocolor 
内容が入ります
====
見出し
}}

bs_box　well系統枠

アイキャッチで使っているのでCSSで手を加えないこと

bs_box　jumbotron系統枠

bs_box　枠（alert）背景色つき

Boostrap4で追加された新しい色4色を追加しています。
また、close[×]ボタンをクリックするとフェードアウト効果が入るように修正しています。音声読み上げに対応するよう「role="alert"」も追加されるようにしました。

送信フォームなどの背景パネルで使われている事が多いので、色などは見やすく調整しています。

追加された色

書き方
#bs_box(alert,info){{
色：info
}}
#bs_box(alert,danger){{
色：danger
}}
#bs_box(alert,success){{
色：success
}}
#bs_box(alert,warning){{
色：warning
}}
追加された色
#bs_box(primary,alert,close){{
色：primary
}}
#bs_box(secondary,alert,close){{
色：secondary
}}
#bs_box(light,alert,close){{
色：light
}}
#bs_box(dark,alert,close){{
色：dark
}}

アラートボックスの中にパネルを入れる

アラートボックスの中にパネルを入れることもできるようになりました。記述でカッコ「{~}」で囲む可読性からして、二階層までにした方がいいです。

#bs_box(alert,primary){{
アラートボックス
#panel(info){{{
パネル
}}}
}}

パネルの中にアラートボックスを入れる

反対にパネルの中にアラートボックスを入れることもできるようになりました。記述でカッコ「{~}」で囲む可読性からして、二階層までにした方がいいです。

#panel(info){{
パネル
#bs_box(alert,primary,close){{{
アラートボックス
}}}
}}

【応用】bs_boxのデザインを変える

bs_box　枠（alert）背景色つきの書き方や色がわかりにくい事でパネルを使って色を替えたスタイルを用意しました。

クラス　panel

bs_box関数のクラス指定でパネルタイプ「panel」と色名を組み合わせます。

次のように記述します。
パネルのタイプと色名の間は空白が入ります。

#bs_box(class=[パネルのタイプ] [色名]){{
本文が入ります
}}

記述

#bs_box(class=panel nocolor){{
nocolor
透明枠です
}}

#bs_box(class=panel default){{
default
グレーの枠です
}}

#bs_box(class=panel secondary){{
secondary
グレーの枠です
}}

#bs_box(class=panel info){{
info　水色の枠です
}}

#bs_box(class=panel primary){{
primary　青色の枠です
}}

#bs_box(class=panel success){{
success　緑色の枠です
}}

#bs_box(class=panel warning){{
warning　黄色の枠です
}}

#bs_box(class=panel danger){{
danger　赤色の枠です
}}

#bs_box(class=panel light){{
light　白色の枠です
}}

#bs_box(class=panel dark){{
dark
黒の枠です
}}

クラス　panel-bright

背景色が薄くがかかった色つきパネルを出します。
bs_box関数のクラス指定でパネルタイプ「panel-bright」と色名を組み合わせます。

次のように記述します。
[パネルのタイプ]と[色名]の間はに空白が入ります。

#bs_box(class=[パネルのタイプ] [色名]){{
本文が入ります
}}

背景が薄く色がかかっている。文字が黒い。

panel-brightクラスは明るい目の彩度になっています。

記述

#bs_box(class=panel-bright){{
指定なし
グレーの枠です
}}

#bs_box(class=panel-bright info){{
info　水色の枠です
}}

#bs_box(class=panel-bright primary){{
primary　青色の枠です
}}

#bs_box(class=panel-bright success){{
success　緑色の枠です
}}

#bs_box(class=panel-bright warning){{
warning　黄色の枠です
}}

#bs_box(class=panel-bright danger){{
danger　赤色の枠です
}}

#bs_box(class=panel-bright light){{
light　白色の枠です
}}

#bs_box(class=panel-bright dark){{
dark
黒の枠です
}}

箇条書き例

箇条書きのアイコンは他に更新履歴などでも使われている。

• 箇条書き
  • 箇条書き
    • 箇条書き
• 箇条書き
• 箇条書き

箇条書き見出しテスト

• 箇条書き
  • 箇条書き
    • 箇条書き
• 箇条書き
• 箇条書き
• 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
    • 箇条書き
    • 箇条書き
    • 箇条書き
• 箇条書き
• 箇条書き
• 箇条書き（1段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
• 箇条書き（1段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
• 箇条書き（1段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
  • 箇条書き（2段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
  • 箇条書き（2段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
  • 箇条書き（2段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
    • 箇条書き（3段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章

箇条書き見出しテスト

段落本文がここに入ります。段落本文がここに入ります。段落本文がここに入ります。段落本文がここに入ります。

• 箇条書き
  • 箇条書き
    • 箇条書き
• 箇条書き
• 箇条書き
• 箇条書き（1段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
  • 箇条書き（2段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
    • 箇条書き（3段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章

記述

- 箇条書き
-- 箇条書き
--- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き（1段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
-- 箇条書き（2段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
--- 箇条書き（3段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章

bs_box(alert,info)番号付箇条書き例

オリジナルの和風の枠で実装

試作したオリジナルの和風の枠を使っています。

記述内容

#bs_box(class=japan_box_azuki){{
+難波潟　みじかき芦の　ふしの間も　逢はでこの世を　過ぐしてよとや
+わびぬれば　今はた同じ　難波なる　みをつくしても　逢はむとぞ思ふ
+わびぬれば　今はた同じ　難波なる　みをつくしても　逢はむとぞ思ふ
+吹くからに　秋の草木の　しをるれば　むべ山風を　嵐といふらむ
+月見れば　ちぢにものこそ　悲しけれ　わが身一つの　秋にはあらねど
+このたびは　ぬさもとりあへず　手向山　紅葉の錦　神のまにまに
+名にしおはば　逢坂山の　さねかづら　人にしられで　くるよしもがな
+小倉山　峰のもみぢ葉　心あらば　今ひとたびの　みゆき待たなむ
+みかの原　わきて流るる　泉川　いつ見きとてか　恋しかるらむ
+山里は　冬ぞさびしさ　まさりける　人目も草も　かれぬと思へば
+心あてに　折らばや折らむ　初霜の　置きまどはせる　白菊の花
+有明の　つれなく見えし　別れより　あかつきばかり　憂きものはなし
その他多数
}}

【参考】従来のbs_box

デザインが画一的だったのが変わります。

【記述】

#bs_box(alert,info){{
+吹くからに　秋の草木の　しをるれば　むべ山風を　嵐といふらむ
+月見れば　ちぢにものこそ　悲しけれ　わが身一つの　秋にはあらねど
+このたびは　ぬさもとりあへず　手向山　紅葉の錦　神のまにまに
+名にしおはば　逢坂山の　さねかづら　人にしられで　くるよしもがな
}}

【参考】#html2でタグを書いてクラスを呼び出してみる

#html2(<div class="japan_box_azuki">)
+吹くからに　秋の草木の　しをるれば　むべ山風を　嵐といふらむ
+月見れば　ちぢにものこそ　悲しけれ　わが身一つの　秋にはあらねど
+このたびは　ぬさもとりあへず　手向山　紅葉の錦　神のまにまに
+名にしおはば　逢坂山の　さねかづら　人にしられで　くるよしもがな
#html2(</div>)

#html2(<div class="japan_box_azuki sumi">)
+吹くからに　秋の草木の　しをるれば　むべ山風を　嵐といふらむ
+月見れば　ちぢにものこそ　悲しけれ　わが身一つの　秋にはあらねど
+このたびは　ぬさもとりあへず　手向山　紅葉の錦　神のまにまに
+名にしおはば　逢坂山の　さねかづら　人にしられで　くるよしもがな
#html2(</div>)

見出し装飾のクリアclass=text_h2h3h4_clear

bs_box(class=text_h2h3h4_clear)を使って見出しの下線などの飾りをクリアできます。書体の大きさやマージンなどはそのままで見出しの下線や枠飾りを使いたくない場合などに使います。

【記述】

#bs_box(class=text_h2h3h4_clear){{{
*ようこそ「トーラスポイント」へ　ｈ2
**ようこそ「トーラスポイント」へ　ｈ3
***ようこそ「トーラスポイント」へ　ｈ4
}}}

【実行結果】

テーマにもよりますが、装飾が消えて書体のみになります。

パネル内での見出しクリア

パネル内で見出し1～3を記述すると自動的に書式を調整するようになっています。

#bs_box(class=panel){{
*ようこそ「トーラスポイント」へ　ｈ2
**ようこそ「トーラスポイント」へ　ｈ3
***ようこそ「トーラスポイント」へ　ｈ4
}}

引用スタイル

最近の検索エンジンはパクリ問題についてもチェックするようになっています。そのため引用を明示しないと検索順位が下がることになります。以下の引用枠はそのために使います。
haik の引用はそのままでは引用とわからないので、改修しています。

引用

記述

>最後の行で引用を明示するので、斜め太字になる。
>わたしは貧に処する道を知っており、富におる道も知っている。わたしは、飽くことにも飢えることにも、富むことにも乏しいことにも、ありとあらゆる境遇に処する秘けつを心得ている。
>（ピリピ人への手紙　4:12）

実装

最後の行で引用を明示するので、斜め太字になる。

わたしは貧に処する道を知っており、富におる道も知っている。わたしは、飽くことにも飢えることにも、富むことにも乏しいことにも、ありとあらゆる境遇に処する秘けつを心得ている。

（ピリピ人への手紙　4:12）

商品案内

販売中、発売予定の商品を紹介します。

thumbnails　テスト例　商品一覧

記述

#bs_box(panel){{
#cols(){{{{
&show(IMG_20190317_123342.jpg,,ダミー画像);
====
#bs_box(class=txt_h234_clr){{{{{{
**商品名
}}}}}}
商品説明が入ります。
}}}}
}}

#bs_box(panel){{
#cols(){{{{
&show(IMG_20190317_123342.jpg,,ダミー画像);
====
#bs_box(class=txt_h234_clr){{{{{{
**商品名
}}}}}}
商品説明が入ります。
}}}}
}}

チェックマーク

チェックマークを使い分ける

旧い方は画像をよみこんでいましたが、デザインがもっさりした感じなので他のサイトのチェックマーク画像を参考に描いてみました。気に入った画像があればそれを使うのも手です。

チェックマーク

✓チェックマーク

image/face/check.pngファイルを新しく置き換えています。

タグの例

Tag: 長岡京健康みらい研究所 スタイルシート改修

更新日：2021-09-19 (日) 12:36:08