Shopifyの無料テーマであるDebut。
私もよく使っていますが、いくつかのセクションは少し調整すればもっと使いやすいかと思うのがあります。
その中で今回はロゴリストを修正してみたいと思います。
デフォルトのロゴリストを使う場合、２行になると下記の様に２行目のロゴが真ん中になって崩れている様に見えることやモバイルで見る際には１列に表示されるため無駄に縦スクロールが長くなる。個人的には左整列の方が安定感があるのでその方法を記載します。
ちなみにロゴリストの列と行まで管理者がカスタマイズしたい場合はsectionにある「logo-bar.liquid」を一緒に修正すれば良いが、今回は決まった列で表現するだけなのでCSSのみの修正をします。
修正する対象は「class=”logo-bar”」になります。普通にリストで表示していますが、基本的にはこれを「display: grid」に変更すれば良いです。あとは微調整ですね。
/* 変更前 */
.logo-bar {
list-style: none;
text-align: center;
margin-bottom: -35px;
}
.logo-bar__item {
display: inline-block;
vertical-align: middle;
max-width: 160px;
margin: 0 27.5px 35px;
}/* 変更後 */
.logo-bar {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
justify-items: center;
gap: 30px;
}
/* モバイルの表示を２列に変更 */
@media screen and (max-width: 767px) {
.logo-bar {
grid-template-columns: 1fr 1fr;
}
}
/* 全て削除
.logo-bar__item {
display: inline-block;
vertical-align: middle;
max-width: 160px;
margin: 0 27.5px 35px;
}
*/
微調整はどんなフラットフォームであっても必要ですが、Shopifyは調整できる範囲が広いし管理しやすいのが魅力の一つかと思います。
