表示サンプル

このページは、文字や画像の表示サンプルです。

このボタンを押すとどうなるんだろう?と思ったときにはこのページで、どんな感じに表示されるのかお確かめください。


見出し2(h2)

見出し3(h3)

見出し4(h4)

h2は投稿ページ内で使用できる1番大きな見出しです。

※見出し1(h1)は使用しないでください。

h3やh4は単に小さい見出しというだけでなく、h2に続いて利用すると目次内でh2を親に子、孫とツリー表示されます。

詳しくは上部の目次内でご確認ください。

 

 

段落(本文テキスト)

段落(18pt)。h2と同じサイズになってしまうので使わない方がいいでしょう。

段落(14pt)。h3と同じサイズです。文章内で強調したい部分は、このサイズがオススメです。

段落(12pt)。デフォルトのサイズ。もっとも読みやすいと言われているサイズです。

段落(10pt)。やや小さいサイズ。小さい文字はこのサイズが読みやすいです。

段落(8pt)webで使用する最小サイズと言われています。かなり読みにくくなります。

段落(文字色レッド)。ポジティブな感情を表すのに使われることが多い色です。

段落(文字色ブルー)。ネガティブな感情を表すのに使われることが多い色です。

段落(背景色イエロー)。イエロー系の文字色は視認性が悪いため、一般的にイエローはラインで使われます。

段落(アンダーライン)。リンクとの混同を避けるため、あまり利用されません。

段落(太字)。Bのアイコンで太字にできます。主に強調したい文字列に利用されます。

段落(イタリック)。Iのアイコンで斜め文字になります。欧文では強調に使用されますが、日本語では強調されているように見えないため、ほとんど利用されることがありません。

※文字装飾に「文字色ブルー、アンダーライン付き」は設定しないほうがいい理由。一般的なリンク文字が「文字色ブルー、アンダーライン付き」なので、この文字装飾はオススメしません。

 

引用文

他のウェブサイトや文献などから引用する場合に用います。可能な限り、引用元の表記(ウェブサイトの場合はURLも)をするようにしましょう。

引用元:群馬県ウェブサイト

 

文字装飾まとめ

文字色背景色便利な機能ですが、多用しすぎると読みにくくなります。

ココぞ!という強調したい箇所に使用した方が効果的です。

 

リスト表示

  • 番号なしリスト表示
  • 番号なしリスト表示
  • 番号なしリスト表示

 

  1. 番号付きリスト表示
  2. 番号付きリスト表示
  3. 番号付きリスト表示

 

リンク文字

このワードプレステーマのリンク文字は「文字色ブラウン、アンダーラインなし」の設定になっています。

オシャレ系webサイトでよく見られるデザインでステキなのですが、アンダーラインなしのリンク文字は「リンクだと気づきにくい」という欠点があります。

リンクだと気づかせたい場合には、アンダーラインを設定してあげると気づきやすくなります。

リンク文字(アンダーラインなし)

リンク文字(アンダーライン)

 

背景色と組み合わせて、簡易的なボタンのように表示することも可能です。

 群馬県自閉症協会オフィシャルサイト 

 

テーブル

表をかんたんに作ることができます。

横幅いっぱいで作ってしまうと、スマートフォンで見た時には幅がせまくなり、テキストが複数行で表示されるため、読みにくくなります。

セルの結合もかんたんにできます。 PCなら1行で見えるセルも スマートフォンでは2行 になってしまいます。
     
       

 

画像-フルサイズ

画像-フルサイズ

 

画像-大

画像-大

 

画像-中

画像-中

 

画像-サムネイル

画像-サムネイル

 

リンクボタン

CSSを利用してボタンを配置できます。

html <a href="ここにURLをコピペします" class="btn02">詳しくはこちら</a>

詳しくはこちら

この記事をSNSでシェアしよう!