備忘録7

↑変更前

↑変更後

授業時間で行ったこと

・自己紹介のprofile.htmlを作成していたprofフォルダをupし、ブロックを配置し、適用した。
・

余った時間で、
Drupalのテーマ「Basic (3.0.0-alpha4)」において、デフォルトで縦並びになっていたメインメニューとユーザーアカウントメニューを横並びにし、さらにユーザーアカウントメニューのみを画面右端に寄せるレイアウト調整を行った。
ファイルパス: themes/custom/basic/css/components/menu.css
CSSファイルを編集して対応した。
HTML上の <ul class="menu"> に対してFlexboxを適用し、縦並びから横並びへと変更した。余計なマージンやリストの点をリセットし、メニュー項目間に20pxの余白を設定した。

menu.css の最下部に以下のコードを追記した。

CSS
.menu {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 padding: 0;
 margin: 0;
 gap: 20px;
}

#block-basic-account-menu .menu {
 justify-content: flex-end;
}
これによって、メインメニューの左並びを維持したまま、アカウントメニューのみをピンポイントで右寄せにすることに成功した。

・注意点・留意事項
Drupalキャッシュのクリアを行うこと
CSSファイルを書き換えただけでは画面にデザインが反映されないため、コード変更後は必ずDrupalの管理画面（「環境設定」>「開発」>「パフォーマンス」）に移動し、「すべてのキャッシュをクリア」を実行する必要がある。