今回はイベントページを見やすくするための見出しのスタイリングテクニックをご紹介します。
新しいイベントをはじめて作った後、「マイイベント」ー「イベントページを編集管理」からイベントページの情報をたくさん追加していきます。
「イベント情報管理」から「イベント情報を編集」を選択すると、イベントの情報を追加することができます。
その中でもイベント概要文を作る際に、見出しを少し整えるととても見やすいイベント概要文になりますので、そのやり方をご説明します。
イベント概要文とは、下記のエリアに表示される情報です。
さらに詳しく見ていきます。このサンプルイベントページでは、見出しの下に説明文という文章構成になっています。
概要文の入力エディタの標準フォントサイズは14pxですので、説明文に対して見出しを少し大きめのフォントサイズにするには「見出し4」を選択します。
さらに見出しに対して余白を与え背景色やボーダー色をつけることで、より見やすくすることができます。
今回は見出しの背景色に薄いグレーを敷き、文字の上下に少し余白を与えて左側に太めのボーダーを引きます。
下記のスタイルシートを「イベント情報管理」から「イベントページのデザイン編集」の独自スタイルシートに入力することで、見出しの表示を変更します。
.SDEvent1 .eventDetailBlock {
padding: 20px;
}
.SDEvent1 .eventDetailBlock h4 {
background-color: #eee;
border-left: 5px solid #999;
font-size: 18px;
line-height: 1.3;
margin: 20px 0;
padding: 10px;
}
すると下記のような見た目に変わりました！
このように見出しに少しスタイルを加えると、全体的に読みやすくなりますよね。
イベントページを少し装飾することで、イメージがぐっとよくなりますので是非見出しスタイリングの参考にしてみてください。