新告知ページに使用できるスタイル（ビジュアルエディタ）

2021.03.01
未分類

1. 新告知ページのスタイル機能
2. 使えるスタイル
3. スタイルの使用ルール
4. リストの作成とスタイルの解除
5. 番号付きリストについて

新告知ページのスタイル機能

2021年2月現在の新告知ページには、追加機能として「スタイル」の機能が導入されています。
少し使い方にクセのようなものがあるので、後述するルールを念頭に入れてからお使いください。

使えるスタイル

マーカー（黄） class名 marker

↓ビジュアルエディタでテキストを選択後、スタイル設定

↓テキストエディタ上はこうなります。

プレビュー

要望に応じて色を変えるなど調整してください。（告知なので基本はあまり応じずで良いです）

div(70%枠） class名 box_center

横幅を70%の枠を作り、中央寄せにします（テキストの中央寄せではなく箱自体の中央寄せです）。テキストのボリュームが少なく、内容が読みづらい際などに使用します。

↓先に適用したい範囲を選択して、スタイルを選択します。

↓テキストエディタで確認するとdivが選択範囲の外側に適用されています。

プレビュー（緑の枠内が適用部分です。枠は付きません。）

※使用する場所によっては親の要素を引き継いでテキストがセンタリングになる場所があります。

div(文字数少用) class名 tbl_auto

テキストの横幅を一番広い場所に合わせます。少量の文章で折り返しの無いものなどに使用します。箇条書きなどで、タイトルよりもかなり左に内容が寄ってしまう場合に使用することが多いです。設定方法は上記のdiv(70%枠)と同じです。
幅は70%を超えているパターンで、改行は入れずにPCでは中央寄せ、スマホでは左寄せにしたい文章などを調整する場合にも有効です。

プレビュー（1行目が一番長いので、1行目の幅の枠になった状態でテキストが左寄せのままセンタリングされています。）

※使用する場所によっては親の要素を引き継いでテキストがセンタリングになる場所があります。

リスト（囲み）　class名　list_medical

※リスト関連のスタイルはリストを先に作っておく必要があります。リストの設定方法については後述していますので参考にしてください。
↓リスト部分を選択します。

↓スタイルを選びます。※リストのスタイルを選択しなおす際は一度リストを解除して再度作り直すか、適用しているスタイルを先に外しておく必要があります。スタイルは再度選択すると外れますが、選択範囲が正しくないと動作しないことがあります。

↓テキストエディタだとこうなっています。

プレビュー　（リストの中でボールドをかけたり、Shift+Enterで同項目として補足文などを入れることが可能です）

▼[一言メモ]あれ？うまくならない…

※囲みのスタイルは、横並びで使用します。同じリスト内に一つでも改行される項目があると左寄せになり、センタリングが難しくなります。（div(70%枠)は当たります。)）

リスト（チェック縦並） class名　list10

※リスト関連のスタイルはリストを先に作っておく必要があります。リストの設定方法については別途下の方に記述していますので参考にしてください。
※スタイルの適用方法は上のリスト（囲み）と同じです。

プレビュー　（縦並びのリスト向けのスタイルです）

▼[一言メモ]あれ？うまくならない…

※リストにするテキスト部分で大きなフォントサイズを使用する場合、クラスの設定箇所でtopの位置調整が必要です。

リスト（チェック横並） class名　list08

↓まず色味を調整しましょう。デフォルトカラーは水色です。他のリストとは違って画像が使用されています。
テーマエディター内のテーマファイルにimagesの▼を押すとcheck.svgがありますので、その6行目部分を変更します。下記画像を参考にしてください。

プレビュー　（横並びになるリスト向けのスタイルです）

▼[一言メモ]あれ？うまくならない…

※リストにするテキスト部分で大きなフォントサイズを使用する場合、クラスの設定箇所でtopの位置調整が必要です。

リスト（アンダーライン）class名　list02

プレビュー

リスト（点）class名　list03

プレビュー

▼[一言メモ]あれ？うまくならない…

※リストにするテキスト部分で大きなフォントサイズを使用する場合、クラスの設定箇所でtopの位置調整が必要です。

文字（中）　class名　txt20

※common.cssが入っていない画面では使えません。当たらない場合はヘッダー情報を確認してください。

基本理念などで「患者第一！」など非常に短いキーワードがあると、文字の大きさを変更したくなることもあります。そんな場合の為に3段階で大きくできるスタイルを入れています。（基本の文字サイズは16pxです。）テキストを選択し、スタイルを適用すると簡単に使用できます。

↓テキストエディタで確認するとこういう感じです。

プレビュー

▼[一言メモ]スマホだと大きすぎ？

※スマホの場合フォントサイズが20px→18pxになります。

文字（中大）　class名　txt23

※common.cssが入っていない画面では使えません。当たらない場合はヘッダー情報を確認してください。

プレビュー

▼[一言メモ]スマホだと大きすぎ？

※スマホの場合フォントサイズが23px→21pxになります。

文字（大）　class名　txt26

※common.cssが入っていない画面では使えません。当たらない場合はヘッダー情報を確認してください。

プレビュー

▼[一言メモ]スマホだと大きすぎ？

※スマホの場合フォントサイズが26px→23pxになります。

破線枠　class名　box_style01

プレビュー

補足枠　class名　box_style02

プレビュー

見出し３（下線）　class名　tit01

プレビュー　（生活習慣病は普通のh3、フレイル…の部分が見出し3（下線）を適用したh3です）

※見出し3（下線）のスタイルは文字部分だけでなく見出し行全体に当たります。

ボタン（枠あり）　class名　btn01

テキストリンクの外側にdiv枠を付けてボタンのように表示できます。先にテキストリンクを作成し、そのテキストを選択する形で適用させます。

プレビュー　（上は普通のテキストリンクで下の■に囲まれているものがスタイルを当てたものです）

▼[一言メモ]よくある小技

フリーエリアなどで枠付きボタンを適用させる時によく行うのがボタンのセンタリングです。
ボタンのセンタリングにはdiv(文字数少用)も設定します。

手順は、
リンクテキストを記述　＞　div(文字数少用)を設定　＞　リンクテキストにリンクを設定　＞　ボタン枠を設定
で作成できます。
(div(文字数少用)を設定とボタン枠設定の順序は反対でも行けますが、記述的に上記の方が正しい形になります）

書式設定をリセット

書式設定をリセットは最終手段です。押すごとに設定がクリアされていきますが、改行なども全てクリアされるので、使いすぎると大変な状態になりかねません。
また、何がリセットされているのか、見た目にわからない為、意図していないものもリセットされている可能性があります。

わかっている範囲であれば、下記の手段の方が良いです。青のボタンを使って前の作業の状態に戻しましょう。

スタイルの使用ルール

外から内側に向かって順番に適用させていくのが良いようです。

例えば、テキスト少なめの縦並びのマーカー付きリストを作る場合、divとマーカー（黄）とリスト（チェック縦並び）などを使うとします。

まずリストにしようとしているテキスト範囲を拾ってdivを設定します。
↓
その後でリストを作り、スタイルを設定します。
↓
マーカーを設定します。（多分マーカーはリスト作成の前に設定していても適用される見込みです）

よく上手くいかなかった時に多いのが、先にリストを生成した後で外枠部分を設定しようとすると、リストのliの中にdiv用のクラスが当たってしまい、正しく表示できなくなるケースでした。
あと、ちゃんと選択しているにも関わらず、リストが上手く当たらない時もあります。（表面上は拾えているようでも、リストに関するソースを拾えていない認識になるのだと思います。）その場合は、一度保存して、その後範囲選択しなおして適用しなおすと当たります。もちろんテキストエディタで追記対応しても問題ありません。