テスト用トップページ

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

ストーリー見出し1

ストーリー見出し2

• 説明
• 新着
• ブログ一覧
• カラム
• サムネイル

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

カラムテスト用 4桁（文字だけにリンクあり）

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

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

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

会社案内【見出し1（h2）自動リンク書式テスト】

【見出し2（h3）自動リンク書式テスト】会社案内

会社案内【見出し2（h4）自動リンク書式テスト】

新スタイルについて

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

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

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

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

ルビ機能

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

前のルビをふれない行高さとレイアウトも改善されました。

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

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

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

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

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

アコーディオン例

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

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

デフォルト

#bs_accordion(){{
-詳しい説明
====
情報
説明を書く
&show(stock_photo_0006560.jpg,,サンプル画像);
}}

アコーディオンパネル

#bs_accordion(non)

アコーディオンパネルで元からないオプションで「non」などと書くと、従来は背景色が出ないエラーが起こっていました。これを修正して、別の色を任意で追加しました。

アコーディオンパネル

標準　背景色あり

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

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

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

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

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

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

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

上のアコーディオンパネルは長時間見ていると目が疲れる人もいることから色彩を抑えてありますが、オプションで明るい色も用意してあります。
　#html2(<div class="orgm-accordion-bright ">)～#html2(</div>)で囲む事でもっと明るい色調のアコーディオンパネルを呼び出せます。

枠の薄いクラスを指定してみる

通常のorgm-accordionクラスを継承して文字と背景色を替えた新しいクラス。

orgm-accordion-nobackgroundcolor

を作成、これを呼び出す形で使って見る。
「まじない」html2を使って、クラスを指定する形で使えるようにしました。
　
「nobackgroundcolor」とあるのは最初はもっと薄い色で作成していたのですが、人によっては色が見えないことがわかったため、見えるように濃くしためです。

#html2(<div class="orgm-accordion-nobackgroundcolor ">)
～ここに対象となるアコーディオンパネルを書く～
#html2(</div>)

はじまりは以下のように書きます。

#html2(<div class="orgm-accordion-nobackgroundcolor ">)

最後を必ず以下の記述で閉じます。
閉じないと別の場所でアコーディオンパネルの色が意図しない色に変わります。

#html2(</div>)

#html2(<div class="orgm-accordion-nobackgroundcolor">)
#bs_accordion(non){{
-詳しい説明
====
詳しい説明を書く
}}

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

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

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

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

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

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

#html2(</div>)

先の【新しい方法】bs_accordionをクラスで囲む方法を複数タブ形式のアコーディオンパネルで実装してみる。

通常のアコーディオンパネルではこうなります。

オリジナルのクラス「orgm-accordion-nobackgroundcolor」を使うとこうなります。

従来は多くても6種類まででしたが、この拡張によって21種類も使えるようになりました。

記述

通常の記述

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

【応用】枠

枠

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

線付きの枠

デフォルト

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

#panel(non){}

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

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

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

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

#panel(non){{
記述ミス・該当なしの場合、デフォルトで出る
 #panel(non){}
田子の浦に　うち出でてみれば　白妙の　富士の高嶺に　雪は降りつつ
わたの原　八十島かけて　漕ぎ出でぬと　人には告げよ　海人の釣舟
}}

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

デフォルト

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

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

====
フッター
}}

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

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

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

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

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

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

#panel(non){~}

#panel(non){~}

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

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

明るい色調のパネル例

上のは目がチカチカする人もいるので色彩を抑えてありますが、オプションで明るい色の方も用意してあります。
　#html2(<div class="panel-bright ">)～#html2(</div>)で囲む事でもっと明るい色調のパネルを呼び出せます。

#panel(non){}

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

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

bs_box　well系統枠

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

bs_box　jumbotron系統枠

bs_box　枠（alert）背景色つき

送信フォームで使われている事が多く、互換性を重視して色を変えないようにすること。

※紺色の背景の枠はありません
→わかりにくい！

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

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

クラス　.panel-light

枠のデザインを変える
背景が薄く色がかかっている。文字が黒い。

ユニバーサルデザイン対応として、目がチカチカする人のために彩度を抑えてあります。

記述

 #html2(<div class="panel-light" )
 
 #bs_box(panel){{
 指定なし
 グレーの枠です
 }}
 
 #bs_box(panel,info){{
 info　水色の枠です
 }}
 
 #bs_box(panel,primary){{
 primary　青色の枠です
 }}
 
 #bs_box(panel,success){{
 success　緑色の枠です
 }}
 
 #bs_box(panel,warning){{
 warning　黄色の枠です
 }}
 
 #bs_box(panel,danger){{
 danger　赤色の枠です
 }}
 
 #html2(</div )

箇条書き例

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

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

箇条書き見出しテスト

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

箇条書き見出しテスト

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

箇条書き見出しテスト

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

箇条書き見出しテスト

• 箇条書き
  • 箇条書き
    • 箇条書き
• 箇条書き
• 箇条書き
• 箇条書き（1段）行送りテスト用文章行送りテスト用文章行送りテスト用文章行送りテスト用文章
  • 箇条書き（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 color_sumi">)
+吹くからに　秋の草木の　しをるれば　むべ山風を　嵐といふらむ
+月見れば　ちぢにものこそ　悲しけれ　わが身一つの　秋にはあらねど
+このたびは　ぬさもとりあへず　手向山　紅葉の錦　神のまにまに
+名にしおはば　逢坂山の　さねかづら　人にしられで　くるよしもがな
#html2(</div>)

bs_box(class=text_h2h3h4_clear)を使った見出しの書式のクリア

bs_box(class=text_h2h3h4_clear)を使って見出しの下線などの書式をクリアしてみる

テーマにもよるが、下線などの飾りがないことに注意

bs_box(class=text_h2h3h4_clear)を使った見出しの書式のクリア応用例

bs_box(class=text_h2h3h4_clear)を使って見出し書式をクリアしたものをさらに別のクラスbs_box(class=panel)で囲んでみる。

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

bs_box(class=text_h2h3h4_clear)を使っていないもの

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

引用スタイル

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

引用

記述

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

実装

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

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

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

タグの例