よく使うスタイルシートのカスタマイズ

2021年8月16日

クローバ PAGEでサイトをもうちょっといい感じにしたいときはスタイルシートの出番となるわけですが、なかなか初心者には敷居が高いところもあると思います。今回はよく使う定番カスタマイズを５つ紹介します。

※スタイルシートのカスタマイズはクローバ PAGEのプレミアムプラン以上でご利用いただけます。

ボタンをカスタマイズする

ボタンはテーマごとに複数種類のスタイルが用意されていますが、色などを調整したい場合はスタイルシートを適用することで対応できます。:hoverも忘れずに設定してください。

サイドバーのボタン(CSS)

.sidebar__entry-form:nth-child(1) .sidebar__entry-form-btn {
    border-radius: 0;
    color: #fff;
    border: 1px solid #fff;
    background-color: rgba(0,0,0,.3);
}
.sidebar__entry-form:nth-child(1) .sidebar__entry-form-btn:hover {
    color: #fff;
    border: 1px solid #fff;
    background-color: rgba(0,0,0,.6);
}

ボタン・リンクパーツのボタン(CSS)

#button-1 .button__button {
    border-radius: 0;
    color: #fff;
    border: 1px solid #fff;
    background-color: rgba(0,0,0,.3);
}
#button-1 .button__button:hover {
    color: #fff;
    border: 1px solid #fff;
    background-color: rgba(0,0,0,.6);
}

ヘッダーを非表示にする

記事一覧やコミュニティへのリンクが不要な場合は、以下のスタイルを適用することでヘッダーを非表示にすることができます。

CSS

nav.site-header__container {
  display: none;
}

ログインボタンを非表示にする

モバイルメニューのログインボタンや、お気に入りに追加のリンクも非表示になります。

CSS

a[href*=_auth] {
  display: none;
}

テーブルをレスポンシブにする

テーブルをスマートフォンで縦並びに表示します。複雑な表の場合は、セクションをPC用とスマートフォン用とに分けて作成し、セクションの設定でそれぞれのデバイスでのみ表示する方法も検討してみてください。

HTML

<table class="custom-table">
<tbody>
  <tr>
    <td>場所</td>
    <td>東京駅広場</td>
  </tr>
  <tr>
    <td>日時</td>
    <td>2021年11月14日（土）11時〜21時</td>
  </tr>
  <tr>
    <td>入場料</td>
    <td>無料</td>
  </tr>
  <tr>
    <td>雨天</td>
    <td>雨天決行、荒天の場合は中止（前夜や当日早朝に判断します）</td>
  </tr>
</tbody>
</table>

CSS

.custom-table tr {
  border-top: 1px solid #b5bfc2;
  border-bottom: 1px solid #b5bfc2;
}
.custom-table td {
  display: block;
  padding: 1rem;
  border: none;
}
.custom-table td:nth-child(1) {
  font-weight: 600;
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .custom-table {
    width: 100%;
  }
  .custom-table td {
    display: table-cell;
  }
  .custom-table td:nth-child(2) {
    width: 80%;
  }
  .custom-table td:nth-child(1) {
    width: 20%;
    padding-bottom: 1rem;
  }
}

横並びのリンクを作成する

HTML

<ul class="custom-links">
  <li><a href="https://example.com/link1" target="_blank">お問い合わせ</a></li>
  <li><a href="https://example.com/link2" target="_blank">プライバシーポリシー</a></li>
  <li><a href="https://example.com/link3" target="_blank">よくある質問</a></li>
</ul>

CSS

.custom-links {
 list-style-type: none !important;
    font-size: 14px;
}
.custom-links > li {
 font-weight: bold;
 padding-left: 8px;
 padding-right: 8px;
}
/* PCでは横並びにする */
@media (min-width: 768px) {
  .custom-links {
    display: flex;
  }
}

以上、定番のスタイルシートカスタマイズでした。がっつりCSSを使う方はひな形として使っていただくもよし、そのままコピペしていただくもよし、CSSを使ってオリジナリティのあるサイトを作ってみてくださいね！

こちらもあわせてご覧ください。

カスタマイズ