Design revamp #1

サイトデザインの変更をしました。

Design Concept.

これまで学習目的でDrupalをインストールしてWebサイトを構築して来ましたが、Drupalの使い方を少しですが理解出来て来たのでサイトデザインの変更を行いました。インストールからこれまでは習うより慣れろの意識でDrupalが持つ標準機能を試しながらサイト構築しています。ただ機能の本質の理解が浅いまま使用している部分も多く、形にはなっていますが設定や使用方法が正しくない箇所もあります。

今後修正を行いながらサイトを再構築していこうと考えています。これまで私が取ったアプローチでもDrupalでWebサイトの構築は成り立ちますが、機能本来の利用用途や使用方法を無視したような形も多々あり、作業効率があまり良くないので、原点に帰り、Drupalが持つ機能を理解しながら構築を進めていきたいと考えています。

今回行ったデザインの変更の意図や変更に使用したBootstrapに用意されるクラスやコンポーネンツ、別途書いたCSSなどを簡単にまとめてみたいと考えています。昨今フロントエンドと言われるページデザインにおいて避けては通れないレスポンシブデザインと言われる要素も簡単に取り入れています。

Drupalの標準でもレスポンシブは考慮されていますし、使用テーマであるBootstrapもデフォルトでレスポンシブ対応しています。基本はデフォルトのレスポンシブを使用しながら、もう少し詰めたいと考えた部分をCSSに追加していきました。

CKEditor.

Home > 管理 > 環境設定 > コンテンツ作成 > テキストフォーマットとエディター
// "HTMLコード"などの名前で新規追加
// 設定にて"テキストエディターなし"を選択

私が使用するBootstrap5テーマは、DrupalのカスタムテーマとしてBootstrap5が組み込まれているシンプルな仕様になっています。簡単な使用例は記事を書くPタグは、Bootstrap5が設定しているCSSの全体設定でサイズやウェイトが指定されています。記事で使用するPタグにBootstrapが用意するユーティリティークラスを指定することで簡単にサイズとウエイトの変更を行う事が出来ます。

デフォルト

<p>クラスを指定しないデフォルトのPタグ</p>

クラスを指定しないデフォルトのPタグ。

クラスの追加

<p class="fs-5 fw-bold">クラスで指定したfs-5とfw-boldが反映されています。</p>

クラスで指定したfs-5とfw-boldが反映されています。

このような形で、記事内のHTMLタグにデザイン変更を行いたいユーティリティークラスを追加することで簡単にデザインの変更が行えます。Bootstrap5には各HTMLタグで使用出来るデザインに優れたクラスが多数用意されており、そのクラスをHTMLのタグにクラスで追加すればそのまま反映されます。

Bootstrapにはクラスだけでなくコンポーネンツと言われるページデザインで使用されるデザインパーツが多数用意されています。基本はコンテナを使用しています。このコンテナはDIVタグを使用しさまざまなデザインを構成しています。

私は、テキストに使用するユーティリティークラスだけでなくメニューで使用するナビのコンポーネンツやカードのコンポーネンツ、ページネーションのコンポーネンツなど様々なユーティリティークラスやコンポーネンツを使用しています。

1-1.デフォルト設定の変更

スタイルシートの設定は、scssファイルを変更しコンパイルするとcssファイルが構成されます。

私のスタイルシートの変更項目はそれほど多くないので、デフォルトで用意されるscssやcssに変更を加えずにcssファイルを別途用意し、libraries.ymlで用意したcssファイルを読み込む形で対応しています。

注意点は、別途用意するcssファイルは最後に読み込むように設定します。これはcssの特性でページを読み込む際先に読み込むcssの記述を後で読み込むcssの記述が上書きをします。

デフォルト設定のcssファイルを別途用意するのは以下の要因になります。

PタグやHタグなど、コンテンツで記事を書く際必ず使用するタグにいちいちクラスを追加するのは面倒であり、記述ミスも起きやすいのでフォントサイズや、ウェイト、Bootstrapのデフォルトで用意するコンポーネンツの変更点などを別途用意するcssファイルに記述してしまいます。

Pタグ

一例ですが私はPタグのデフォルトを以下のようにしています。

p {
   font-size: 0.95rem;
   font-weight: 300;
   margin-left: 10%;
   margin-right: 10%;
   line-height: 1.65em;
}

記事の文章を書くPタグですが、デフォルトでは1カラムのレイアウトにすると横長になりすぎてしまい記事が読みにくくなります。これを読みやすくするために左右のマージンを10%ずつ設定することでPタグにて書いている記事の横幅がデフォルトの1700px程度から1300px程度になっています。（PCの画面サイズによります）

この1300px程度の横幅にした意図ですが、サイドメニューを設置すると800px程度となります。800pxの幅の記事も読みやすいのですが1300pxと比べると、行数が増えてしまいスクロールの回数が多くなってしまいます。

私がDrupalを使い記事を書いている中で目が疲れてしまう一番の要因が視点の移動であり、左右上下の視点の移動をなるべく少ないデザインにしたいと考えています。さまざまな方法論があり、フォントサイズを変えたり、記事をもう少し短くしページを分けてしまうなどの方法もあります。これまで作成した記事をそのままで、デザイン変更をなるべく少ない手数で実現すると考えた一つの方法でありこれが一番というものではありません。今後もう少しデザインを詰めていくと今のPタグのサイズやレイアウトがベストではなくなるかもしれません。

Pタグのマージン

上記で設定したPタグのマージンですが、用途によっては両サイドのマージンが不要となるケースもあります。私のケースだとフッター用に作成したブロックでPタグを使用するとデフォルトでマージンが指定されレイアウトが不恰好になってしまいます。このような利用をする場合別途Pタグのマージンを取らないクラスを設定して対応しています。

p.menu {
   font-size: 0.95rem;
   font-weight: 300;
   margin-left: 0%;
   margin-right: 0%;
}

デフォルトのマージンを取りたくない場合作成した.menuクラスをPタグに指定して使用します。

<p class="menu">マージン無しを指定しています。</p>

マージン無しを指定しています。

利用する機会の多いPタグでの説明をしましたが、同様な形でHタグやBootstrapが指定するfs-xクラスなどもサイトに合わせてCSSファイルをサイトデザインに合わせて変更しています。

hタグ

hタグ（見出し）も同様に変更しています。初めてページを作成するとhタグをテキストサイズのパーツと認識してしまいがちです。実際私もそのような認識でいたのですが、htmlの構造化という観点で考えると見出しとして認識されています。(Pタグは文書を書く段落)これは何を意味しているかというとブラウザがhtmlを読み込み表示する際に、書いたタグをどのように認識するかという事に関連しています。

見出しであるHタグはh1からh6までの6段階が用意されています。htmlの構造化でわかりやすいのがSEOで、Googleのページ評価の基準の一つに構造化は取り入れられています。Hタグの構造化の例を挙げると、h1は大見出し（主にページタイトル）、h2は大見出し、h3見出し、h4子見出し、h5注釈、h6子注釈のような形で階層が設定されています。この見出しや階層構造からGoogleがページの内容を確認しインデックスや検索順位のガイドにしています。（評価基準の一つで全てではありません。）

構造化を正しく行おうとすると

h1 : タイトル > h2 : 章 > h3 : 章内のタイトル > h4 : 少ないタイトルの子見出し > h5 : 注釈や強調したい内容

のような形になります。

hタグのフォントサイズなどは一般的に使用テーマで設定さておりフォントサイズが大きい順にh1 > h2 > h3 > h4 > h5> h6 設定されています。実使用する場合、例えばh2タグが大きすぎると感じたりウエイト(太さ)がもう少し軽い方が良いなどページデザインを考えて行くと必ず出てくる問題ではないでしょうか。サイトのデザイン上h5を使いたいが、順序的にh4以下になっていないケースなど結構あると思います。

h1 : タイトル > h2 : 章 > h3 : 章内のタイトル > h5 : 注釈や強調したい内容

実際にフォントサイズの観点からするとh3の見出しから、h4を経由せずh5を使いたいというケースはあると思います。Webサイトを構築当初私もこのhタグの順序より見た目のフォントサイズという観点で考えていましたが、htmlの構造化という観点からするとこの考えはNoとなります。この構成でGoogle Speed Insightsを使い構造化をチェックすると構造化がされていないというメッセージが表示されてしまいます。

このようなケースでもデザインを崩さず構造化であるhタグを順序よく文章に配置していく為に、スタイルを設定していきます。

Bootstrapはこのhタグも用意されPタグ同様サイズやウェイトをユーティリティークラスで変更できます。

<h3>h3のデフォルトになります。</h3>
<h3 class="fs-5">fs-5でサイズを変更してみました。</h3>
<p class="menu fs-3 fw-medium">Pタグで見出しの代わりを作成。</p>

h3のデフォルトになります。

fs-5でサイズを変更してみました。

Pタグで見出しの代わりを作成。

のようにユーティリティークラスを設定する事でサイズの変更が簡単に出来ます。3行目のPタグにユーティリティークラスを使いh3タグと同様に表示される設定をしていますが、見出しではない強調文字を文章内で使用したい場合この形を使用すると構造化を崩さずにページを構成することが出来ます。これをすることで、hタグをフォントサイズのパーツとして使わず純粋に見出しとして使用する事が出来ます。

hタグもPタグ同様いちいちクラスを指定するのは面倒なのでデフォルトの設定を変更します。Bootstrapの初期設定を活かしながら利用したい形に別途cssファイルで変更します。以下はh3タグの設定例になります。デフォルトではモバイルでh3を表示すると大きすぎるのでレスポンシブの対応をしています。この記述はモバイルを起点として、PC表示のh3をPCに合わせたサイズで表示するよう指定しています。

@media (min-width: 1200px) が画面サイズ1200px以上ならフォントサイズを1.6remで表示するという記述になります。

h3,
.h3 {
   font-size: calc(1.1rem + 0.6vw);
   font-weight: 600;
}
@media (min-width: 1200px) {
   h3,
   .h3 {
       font-size: 1.6rem;
       font-weight: 600;
   }
}

構造化=SEOのイメージが強いのですが、構造化とは、Web技術の基準に構築するWebサイトが合致しているかという一つのガイドであり、本質はSEOで検索の上位に出すためのものではなく、Web技術の基準を元に掲載サイトを構築する事であり、その結果が検索サイトに正しくページの情報を伝える事です。

1-2.別途cssファイルを使用可能にする。

Bootstrapはデフォルトのscssファイルを変更し、cssファイルに書き出す事でデザインを変更する事が出来ます。ただBootstrapが用意する優れた設定に変更を入れるのは気が引けますし、もし戻したい場合の作業の面倒さを考えるとなかなか手をつけにくいところでもあります。

そもそも、Bootstrap5のテーマのデザインを構成するスタイルシートはstyle.cssというファイルにまとまっています。このファイルは全てのスタイルが記述されており12000行を超えています。

scssから必要なクラスを抜き出しカスタムcssに設定を書き出す作業も結構面倒です。（本来はこのプロセスを踏むべきです。）大規模なサイトで複数人数でサイトデザインの管理を行うというケースであればBootstrapが標準機能で用意するscssの編集で対応する事が最善であり管理もしやすく作業効率にも優れています。

ただ、私のような個人運営の小規模なサイトでスタイルの一部を変更したいと考えた時にscssからcssを書き出すより、変更をしたいクラスやタグのスタイルを直接cssに書いた方が作業的にも管理上も楽なのでこちらの方法を選択しています。

この別途スタイル変更用のcssを用意し使用するにはtheme.libraries.ymlに以下の記述をします。

追加cssの名前はthemecustom.cssとしています。

theme.libraries.yml

global-styling:
 css:
   theme:
     css/style.css: {}
     css/themecustom.css: {}  < //この行を追加

theme.libraries.ymlに上記の設定を追加する事で、デフォルトで用意されたスタイルシートをいじらずにスタイルの変更が可能になります。

全てのコンポーネンツやクラスを説明すると記事が長くなってしまうので設定例を挙げてみます。

私はBootstrapが用意するコンポーネンツのCardをページ内で良く使用します。cardは罫線を入れたブロックであり記事の整理をする際に視覚的な効果が大きいので記事内で強調したい内容や、記事内の途中でのまとめなどさまざまな箇所で使用しています。

cssの変更は行なっていますが、元のクラスはBootstrapが設定したクラスの変更を行なっています。この理由はBootstrapが用意するコンポーネンツはデフォルトでレスポンシブの設定がかなり細かく設定されています。この設定をいちいちゼロからスタイルシートに書くよりデフォルト設定を活かしながら、表示するデザインの変更のみをスタイルシートに書く方が効率が良く、自分でレスポンシブの設定を行うより優れているのでこの方法をとっています。

ViewやTaxonomyのリスト化したページ一覧にもこのcardコンポーネンツを使用しています。

css

 cardのcss // themecusutom.cssに記述

div.card {
    padding: 2.5% 0% 2.5% 0%;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 6px 6px 6px 6px;
    border-width: 8px 1px 1px 1px;
    border-color: #333333 #cccccc #cccccc #cccccc;
    border-style: solid;
    background-color: #ffffff;
}

html

html // 記事内にhtmlで直接記述

<div class="card">
    <div class="card-body">
        <p class="fs-5 fw-medium">
            CardのHTML
        </p>
        <p>
            このコンポーネンツを良く使用します。
        </p>
        <p class="fs-5 fw-medium">
            <a href="https://getbootstrap.jp/docs/5.3/components/card/" target="_blank">Bootstrap5 Cardドキュメント</a>
        </p>
        <p>
            私はBootstrap5が用意するCardのコンポーネンツを使用しています。Cardコンポーネンツについてはこちらで詳しく解説されていますので参照下さい。
        </p>
    </div>
</div>

 上記の記述は以下のように表示されます。

他にもBootstrapが用意するコンポーネンツのスタイルを変更していますが記事が長くなるので内容は割愛します。

元々、Topメニューは、PCモバイルを同じインターフェースにする為、バーガーメニューにしていました。バーガーメニューの利点は少ない表示スペースにメニューの内容を要約してまとめてしまい通常はメニュー内容を隠して表示し、必要な時に表示を行います。このインターフェースが表示スペースの少ないモバイルのメニューに最適であり、私に限らず世にあるWebサイトのモバイルメニューに採用されていますので、眼にする機会が多いのではないでしょうか。

私は、モバイルもPCも同様のインターフェースにする事で、閲覧された方がサイトを巡回する際に迷わないのでは？と考えてこのバーガーメニューをPCでの表示でも採用していました。

サイトの開設からメニュー構成はこの形を取っていたのですが、PCでメニューからサイト内を巡回しようとすると、通常のテキストリンクのメニューよりバーガーメニューを展開するアクションが一つ増えてしまいます。

私自身が記事のチェックやサイト内のリンクチェックを行う際にもこのアクションが必要で、実際結構煩わしく感じていましたので、今回サイトのデザイン変更のタイミングで、PCのバーガーメニューから通常のテキストメニューに変更しました。

3-1. Drupalの標準メニュー

Drupalにはサイト構築 > メニューと、トップメニューを構成する要素を編集できる機能が標準搭載され、トップメニューはここを編集して構築していきます。ただデザインをいじる場合TWIGにデザイン要素を書いていく必要があります。このプロセスがDrupalの標準のメニュー編集ですが、Drupalの利点に、ブロックとブロックレイアウトの機能があり、設定の自由度が高い事があります。

私は、Drupalが用意するメニューを使わずに、別途メニュー用のブロックを作成して、ブロックレイアウトで呼び出しています。この形の利点は、日本語メニューと英語メニューの切り替えや、記事用のメニューとリストページ用のメニューを切り替えるなど簡単に設定できることがあります。

Drupalの翻訳機能が、内部に設置したテキストなどの翻訳を基本的には行わないので、日本語のメニューと英語のメニューは別途作成する必要があります。このことから、私はDrupalの標準機能であるメニューを使わず、メニューは専用のブロックを用意しブロックレイアウトで切り替える形を取っています。

3-2.Fixed-Top

私はTopメニューのポジションをFixed-Topにしています。Fixed-Topのメニューは、サイトをスクロールしても常時ページTopにメニューが表示されています。このことで、サイトを見ていただいている方が、別の記事や別のページを巡回しやすくなるのでこの形を取っています。このFixed-Topの設定をDrupalの標準メニューに設定したい場合Twigの設定が必要になります。Twigの設定のメリットはDrupal管理画面のメニュー設定項目に反映されますので、メニュー構築がGUI上で簡単に行う事が出来ます。私の場合メニューはhtmlを直接変更する事と、私のサイトが構築途中での公開でもあるのでデザインの変更を頻繁に行う事があり、Drupalの標準メニューをTwigでカスタマイズして使う事は行わず、メニュー用のブロックを別途用意して自由に設定を変更しています。

3-3.バーガーメニュー

過去に使用していたバーガーメニューになります。現在は通常のテキストメニューに変更しています。htmlのソースは長くなるので省略します。詳しくはBootstrapのドキュメントを参照下さい。

<nav class="navbar navbar-dark fixed-top pt-2 pb-0" style="background-color:#333333;">
    <div class="container-md">
// ここでサイトのタイトルを指定
        <p class="menu">
            <a class="navbar-brand fw-bold fs-3" href="/top">Interest.</a>
        </p>
// バーガーメニュー
        <p class="menu">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        </p>
// 展開後のメニュー : offcanvasを指定しています。
        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
            <div class="offcanvas-header">
                <p class="menu">
                    <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </p>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 navbar-nav-scroll">
// 展開後のメニュー : テキストメニュー
                    <li class="nav-item">
                        <a class="nav-link active" href="/top" aria-current="page">Home</a>
                    </li>
// 展開後のメニュー : ドロップダウンメニュー
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">DrupalとWebに関わる記事.</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li>
                                <a class="dropdown-item" href="/article1">記事1.</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/article2">記事2.</a>
                            </li>
// 以下省略
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

 以下のサンプルは本来はfixed-topですが記事に掲載するのでfixed-topの指定はしていません。以下は実際に使用していたメニューバーなので各リンクに飛ぶことができます。記事に戻るにはブラウザ矢印ボタンで戻って下さい。

上記のようなメニューバーが作成されます。

3-4.テキストメニュー

現在使用中のテキストメニューになります。navのクラスに navbar-expand-lgの指定をしています。htmlのソースは長くなるので省略します。詳しくはBootstrapのドキュメントを参照下さい。

<nav class="navbar navbar-expand-lg bg-dark fixed-top" data-bs-theme="dark">
//  navbar-expand-lg の指定をすることでテキストメニューになります。
  <div class="container-md">
// ここでサイトのタイトルを指定
    <a class="navbar-brand fw-bold" href="/top">Interest.</a>
// バーガーメニュー : レスポンシブ設定でPCはテキストメニュー、モバイルはバーガーメニューとなります。
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
// ここからナビバーのテキストメニューになります。
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
// 親要素のフォントカラー白はlink-lightで指定しています。ホバー要素はlink-opacity-75-hoverで指定しています。
        <li class="nav-item">
          <a class="nav-link link-light link-opacity-75-hover fw-bold" href="/top">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-light link-opacity-75-hover fw-bold" href="/creation">Creation</a>
        </li>
 // 子要素のフォントカラー赤はlink-dangerで指定しています。
        <li class="nav-item">
          <a class="nav-link link-danger link-opacity-75-hover" href="/term-article-drupal">Drupal.</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-danger link-opacity-75-hover" href="/term-article-web">Web.</a>
        </li>
// 以下省略
// 言語切り替えはドロップダウンを使用しています。
        <li class="nav-item dropdown">
          <a class="nav-link link-light link-opacity-75-hover dropdown-toggle fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Languege
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/top">Japanese</a></li>
            <li><a class="dropdown-item" href="en/top-en">English</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

 本来はfixed-topですが記事に掲載するのでfixed-topの指定はしていません。以下は実際に使用しているメニューバーなので各リンクに飛ぶことができます。記事に戻るにはブラウザ矢印ボタンで戻って下さい。

上記のようなメニューバーが作成されます。

Bootstrap5が用意するnavをメニューは最初からレスポンシブ対応になっており基本であるul,liタグにメニュー項目を並べる簡単なhtml構造で作成できます。以下にBootstrap5のnavbarのドキュメントを紹介します。Bootstrapを使いメニューバーを作成したいと考えている方にとっては非常に参考になると思います。

Conclude.

今回、デザイン変更を行う際に使用したBootstrap5が用意するクラスやコンポーネンツについて簡単に抜粋して記事にしてみました。もう少し詳しく使用したクラスやコンポーネンツについての解説も考えたのですが必要以上に記事が長くなることや、記事を見た方が私の書いたスタイルをそのまま使用することはないと考え抜粋とBootstrap5のドキュメントを紹介することで、Bootstrap5を使ってみたい方の参考になるような形での紹介にしています。

デザイン思考.

今回の記事にも書きましたが、デザインを考える一番の要素が記事の読みやすさという事を考えています。モダンで優れたデザインを作成する事もデザイン思考の一つですが、私の記事内容がテキスト主体ですのでテキストが見やすいデザインというのが第一にあり現行の形を取っています。私自身のデザインのボキャブラリーやCSSの知識がもう少し豊かになると、また違った形でのデザインとなるかもしれません。

UI / UX.

UI : ユーザーインターフェースと UX : ユーザーエクスペリエンスというWebサイトデザインの基本となる考えがあります。私自身がそれほど意識した事はないのですが、昨今このあたりの言葉が重要視されています。閲覧する方が使いやすく有益な知識を得やすいデザインと考えれば当たり前の事であります。

今回紹介できていませんが、デザイン変更を行うついでに各ページに、日本語/英語の切り替えを入れたり、グローバルナビゲーションの代わりに記事内にアンカーを設置しフッターにナビゲーションを用意しています。この事で私の読みにくい長めの記事を読み返しやすくなるのではないかと考えています。

次項で日本語/英語の切り替えやフッターに設置したナビゲーション、Heroコンテンツについて解説したいと考えています。