CSSカスタマイズでWebページの見栄えと読みやすさを向上する

ユーザーに好ましいUXを与える様々な要素のうち、「見た目の美しさ」は即効性のある要素です。しばらく使い続ければ利便性と使いやすさに優れているとわかるアプリであっても、見た目の美しさが足りなければ、ユーザーは良さに気づく前にアンインストールしてしまうかもしれません。また、Webサイトの見た目の美しさは文字の読みやすさや意味の理解しやすさにも貢献します。

この記事では、この記事をホストしている無料ホームページサービス「Ameba Ownd」を例に、CSSカスタマイズによる見た目の美しさ改善の方法をご紹介します。

具体的なデザイン事例については以下の記事を合わせてご参照ください。

CSSカスタマイズの基本

CSSとは

CSSとは「カスケーディングスタイルシート」の略で、Webページ上の各パーツの見栄えに関する設定を一覧として一箇所にまとめたものです。昔はWebページの各パーツごとに見栄えに関する設定を書き込んでいましたが、現在ではCSSとしてひとまとめにするのが一般的です。

CSSはプログラム言語に似た専用の言語で記述するという決まりがあり、これをスタイルシート言語またはCSS言語と呼びます。

CSSによって見栄えを設定されたHTML文章の例

HTML

1. <p>文章中の強調したい箇所を<strong>文字の太さや文字色</strong>で表現できます。</p>
   

CSS

1. p{
2.     font-size: 20px;
3. }
4. strong{
5.     font-weight: bold; 
6.     color:red; 
7. }

結果

備考

『p』は「パラグラフ（段落）」、『strong』は「強調」を意味します。<strong>と</storong>で囲まれた文字列は「強調して表示したい箇所」と言う意味です。ですが、ひとくちに強調といっても様々な方法があるはずです。どのように強調するのか具体的に指定するのがCSSになります。上の例では太文字と文字色の両方で強調しました。

WebページのCSSを調べる方法

CSSカスタマイズは、古い設定を新しい設定で上書きする形で行います。したがって、まず現状のCSSを知る必要があります。ほとんどのWebブラウザには、現在表示しているWebページのCSSを表示する機能があります。

Chromeの場合

Webページを表示した状態で、メニューより「表示＞開発/管理＞デベロッパーツール」を選択する

Edgeの場合

Webページを表示した状態で、F12キーを押す

Safari(MacOS) の場合

まず環境設定画面で設定項目「メニューバーに開発メニューを表示」にチェックの入っていることを確認し、Webページを表示した状態で、メニューより「開発＞Webインスペクタを表示する」を選択する

Ameba OwndにおけるCSSカスタマイズ

Ameba Owndでは、あらかじめ用意されたデザインテーマ（デザインテンプレート）を選択することで、HTML言語やCSS言語などの専門知識なしにホームページを開設・運営することができますが、細部のデザインを変更したいユーザーのためにCSSカスタマイズ機能も用意されています。

Ameba OwndのCSSカスタマイズの手順

Ameba OwndにおけるCSSカスタマイズは、以下の手順で行います。

1. Webブラウザで、現状のWebページのCSSを開く
   
2. 見栄えを変更したいパーツに関する記述を探し出す
   
3. 該当箇所をコピーする
   
4. Ameba OwndのCSSカスタマイズ画面にペーストする
   
5. 値を書き換える
   
6. 設定を保存する

Ameba OwndのCSSカスタマイズ画面

Ameba OwndのCSSカスタマイズ画面は以下の手順で呼び出すことができます。

1. 管理画面を開く
   
2. 管理画面左の「カスタマイズ」をクリック→サブアイテムが表示される
   
3. 「CSSカスタマイズ」をクリック→CSSカスタマイズ画面が開く

プレビュー切替ボタン

PCビューとスマートフォンビューとを切り替えます。

「全体」欄

見栄えに関する設定を記入する欄です。設定はCSS言語で記述します。
ここに書き込まれた設定は、デザインテーマ本来の設定よりも優先されます。
ここに書き込まれた設定は、全てのページと投稿記事に適用されます。

「スマートフォン」欄

見栄えに関する設定を記入する欄です。設定はCSS言語で記述します。
ここに書き込まれた設定は、画面幅800ピクセル以下の表示デバイスにおいてのみ有効になります。
ここに書き込まれた設定は、デザインテーマ本来の設定および「全体」欄の設定よりも優先されます。

画像をアップロード

背景画像を使用したい場合に使います。
過去に投稿記事用にアップロードした画像を選ぶことも可能です。

リセット

「全体」欄「スマートフォン」欄の記述を、最後に保存した内容に戻します。

保存

「全体」欄「スマートフォン」欄の記述を保存します。

プレビュー

画面の中央から右にかけてプレビュー画面が表示されます。

変更はただちにプレビューに反映されます。

プレビュー画面の上にあるボタン類やリンク文字列は、内部リンクのみ操作可能です。

見出し文字サイズを変更する

ここから個別に気になった箇所を修正していきます。

UX Yokohama ホームページはデザインテーマ「CELL」を使用しています。「CELL」は記事タイトルよりも本文中の見出しの方が文字サイズが大きく不自然です。

デザインテーマ「CELL」のCSSを読みこんだところ、CELLの記事タイトルの文字サイズは2.6 rem（スマートフォンの場合 2.0 rem）でした。ですので、CSSをカスタマイズして見出しをそれ以下のサイズにします。ついでに見出しh1〜h4それぞれの見た目を文字サイズ以外でも違いがわかるよう修正します。

追記したCSS（全体用）

1. .blog-body__text h1, .txt h1 {
2.   font-size: 2.4rem; 
3.   margin:9.6rem 0 2.0rem 0; 
4.   padding:0.2rem; 
5. } 
6. .blog-body__text h2, .txt h2 {
7.   font-size: 2.4rem; 
8.   margin:9.6rem 0 2.0rem 0; 
9.   padding:0.1rem 0;
10. } 
11. .blog-body__text h3, .txt h3 {
12.   font-size: 2.0rem; 
13.   margin:6.0rem 0 2.0rem 0;
14. } 
15. .blog-body__text h4, .txt h4 {
16.   font-size: 1.6rem; 
17.   margin:1.6rem 0 0 0;
18. }
19. .blog-body__text h1, .txt h1 {
20.   color:#ffffff; 
21.   background-color:#000000;
22. }
23. .blog-body__text h2, .txt h2 {
24.   border-top:1px solid #000000; 
25.   border-bottom:1px solid #000000;
26. } 
27. .blog-body__text h4, .txt h4 {font-weight:bold; }
28. .blog-body__text h4::before, .txt h4:before{ 
29.   content: "≫"; 
30.   color: #999999;
31.   padding-right : 5px; }

追記したCSS（スマートフォン用）

1. @media only screen and (max-width: 800px){
2.   .blog-body__text h1, .txt h1 {
3.     font-size: 2.0rem; 
4.     margin:8.0rem 0 1.6rem 0;
5.   } 
6.   .blog-body__text h2, .txt h2 {
7.     font-size: 2.0rem; 
8.     margin:8.0rem 0 1.6rem 0;
9.   } 
10.   .blog-body__text h3, .txt h3 {
11.     font-size: 1.6rem; 
12.     margin:4.8rem 0 1.6rem 0;
13.   } 
14.   .blog-body__text h4, .txt h4 {
15.     font-size: 1.6rem; 
16.     margin:1.6rem 0 0 0;
17.   }
18. }

追記した結果

備考

見出しh4は自動的に行頭記号「≫」が入るようにしています。before擬似要素とcontentプロパティで実現しています。

文章の両端を揃える

文章中に半角文字が混在すると、文章の右端が縦一列に揃わなくなります。CSSカスタマイズにより文字間隔を微調整して文章の両端ともきれいに揃えることができます。

追記したCSS

1. .blog-body__text p, .txt p, .blog-body__text blockquote, .txt blockquote{
   
2.     text-align: justify; 
   
3.     text-justify: inter-ideograph; 
   
4. }
   

追記した結果

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

備考

『text-align』属性は文字寄せ（左寄せや右寄せなど）を指定するための属性で、値『justify』は「両端揃え」を意味しています。『text-justify』属性は両端揃えの方法をさらに詳しく指定するための属性で、値『inter-ideograph』は「日本語・中国語・韓国語向けに最適化された方法」を意味しています。

引用箇所の見た目を変更する

Owndのブログエディタでは文章中の「引用」部分を指定することができますが、この見た目を変えてみましょう。HTML引用と同じく四方を線で囲みます。また引用らしく左側の余白を多めに取ります。

追記したCSS

1. blog-body__text blockquote, .txt blockquote {
   
2.     border:1px solid #eeeeee;
   
3.     padding: 0.8em 0.8em 0.8em 3.2em; 
   
4.     margin: 30px 0;
   
5. }
   

追記した結果

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

ボタンの見た目を変更する

ボタンの見た目をGoogleマテリアルデザイン風にしてみます。

追記したCSS

1. .btn__item {
2.     color:#ffffff;    /* 文字色 */
3.     background-color:#000000;    /* 背景色 */
4.     border-radius: 3px; /* 角の丸み */
5.     box-shadow: 
6.         0 2px 2px 0 rgba(0,0,0,0.14), 
7.         0 1px 5px 0 rgba(0,0,0,0.12), 
8.         0 3px 1px -2px rgba(0,0,0,0.2);    /* 影の表現 */
9.     -webkit-tap-highlight-color: transparent;    /* ボタンタップ時のハイライト効果を消す */
10.     transition: .3s ease-out;    /* ゆっくりと変化させる */
11. } 
12. .btn__item:hover { 
13.     color:#ffffff; 
14.     background-color:#0000a0; 
15.     box-shadow: 
16.         0 4px 4px 0 rgba(0,0,0,0.14), 
17.         0 1px 7px 0 rgba(0,0,0,0.12), 
18.         0 3px 1px -1px rgba(0,0,0,0.2);
19. }

追記した結果

備考

『box-shadow』属性の変数がとても多いですが、これは影を３枚重ねることでリアルな影を表現するためです。６行目の『0 2px 2px 0 rgba(0,0,0,0.14)』は「水平ずらし量0、垂直ずらし量2px、ぼかし距離2px、広がり距離0、rgba(赤0, 緑0、青0、不透明度14%)」を意味しています。

ソースコードを引用する

ここまで見た目を変更するためのCSSのソースコードを紹介してきましたが、ソースコード引用部分が表組のような見た目になっていました。これもCSSカスタマイズで実現しています。

Owndのブログエディタには＜ソースコードの引用＞などという機能はありません。ではどうやっているのかというと『もしも見出しh4の直後に番号付リストolがあれば、その番号付リストolはソースコードの引用とみなして、見た目を変える』というプログラムめいた処理を行なっています。また、読みやすさ向上のために『番号付リストolの奇数行と偶数行で背景色を変える』処理も行なっています。

追記したCSS

1. .blog-body__text h4+ol, .txt h4+ol{
2.     background-color: #eeeeee; 
3.     border: 1px solid #eeeeee; 
4.     padding-left: 50px;
5. } 
6. .blog-body__text h4+ol li, .txt h4+ol li{
7.     font-family: monospace ;
8.     font-size: small; 
9.     line-height: 120%; 
10.     padding: 5px;
11. }
12. .blog-body__text h4+ol li:nth-child(2n), .txt h4+ol li:nth-child(2n){
13.     background-color: #ffffff;
14. }
15. .blog-body__text h4+ol li:nth-child(2n+1), .txt h4+ol li:nth-child(2n+1){
16.     background-color: #f6f6f6;
17. }

備考

隣接セレクタ「+」と構造擬似クラス「:nth-child()」を使用しています。
1行目その他の『h4+ol』は「見出しh4の直後にある数字リストol」を意味しています。12行目『li:nth-child(2n)』15行目『li:nth-child(2n+1)』は「同じリストに含まれるリスト項目のうち偶数番目の項目」「おなじく奇数番目の項目」を意味しています。

Ameba Ownd のデザインテーマはどれも素晴らしいデザインで、通常の使用においては見た目の美しさの改善を検討する必要はありません。ごくまれに発生する、デザインテーマのCSSでは実現できない表現が必要な場合に、CSSカスタマイズ機能が使えることを覚えておいてください。