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

新告知ページに使用できるスタイル(ビジュアルエディタ)
目次

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

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

プレビュー

見出し3(下線) class名 tit01

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

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

ボタン(枠あり) class名 btn01

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

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

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

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

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

書式設定をリセット

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

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

スタイルの使用ルール

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

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

まずリストにしようとしているテキスト範囲を拾ってdivを設定します。

その後でリストを作り、スタイルを設定します。

マーカーを設定します。(多分マーカーはリスト作成の前に設定していても適用される見込みです)

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

リストの作成とスタイルの解除

リストの作成方法ですが、まず、リストにしたいテキストを用意します。リストを作成するときの改行は「普通のEnter」で作成しましょう。「Shift+Enter」を使用した部分は同項目としてまとめられます。
↓では早速テキストを用意しましたら、赤〇部分のボタンを押します。

↓このように簡単にリストが作成されました。

↓テキストエディタ上はこういう感じです。

スタイルはこの状態にしてから当てていきます。(リストが無い場合はグレーアウトして選択できません)

 

次に、下記のようにリストにスタイルが適用されすぎて収拾が付かなくなったとします。

↓テキストエディタをチェックすると、リストの中にdivが入ったりと修正するのもめんどくさい状態になっています。

↓そういう時はひとつずつ消していくよりも、一旦リストを解除してから修正したほうが早いです。リストを選択し、リストボタンを再度押すと解除されます。※先にdivを一括で解除することも可能です。

↓リストが外れましたがdivが残っていますね。

↓同じスタイルがかかっている場所は一気に外すこともできるので、全選択し一括でスタイルの適用している項目をクリックします。(適用されているスタイルは青くなっています。※書式設定をリセットだけは例外で常に青いです)

↓ソースがきれいになりました。

番号付きリストについて

告知ページの番号付きリストは下記のような仕様になっています。(リストの内容にボールドはかかりません。)

使い方は、ビジュアルエディタ上で番号付きリストにしたいテキストを用意し、通常のリストボタンの横にある番号付きリスト作成ボタンを押すだけで適用されます。

 

このスタイルメニューは、HTMLのコーディングにあまり詳しくない人でも扱いやすいものである他に、
うまく使いこなすと、テキストを記述するよりも早く対応できますので、良ければぜひ参考にしてくださいm(_ _)m

その他お気づきの事があったら教えてくださいね!