【コピペ可能】TCDテーマAMOREで使えるCSSコード集【WordPressカスタマイズ】

2022 5/12

2022年5月12日 2022年5月12日

TCDテーマAMOREで使用できる便利なCSSをご紹介します。

CSSの記載場所について

①サイト全体に反映させたい場合

→外観＞基本設定＞カスタム CSS」に記載（外観＞カスタマイズ＞追加CSSでもOK）

②特定のページに反映させたい場合

編集画面下のカスタム CSS 欄に記載する

以降に各事例を示す。

下層ページの見出しの装飾

/* 見出しh2 */
:not(.home) .amore-inner-container h2{
  border-top: 2px solid #f78da7;
  border-bottom: 2px solid #f78da7;
  padding:1.5rem 0 1.3rem;
  margin:3rem 0 3rem;
}

スマホ版ロゴのサイズ修正

ロゴのサイズを少し大きくする場合は下記コードで対処します。

/* スマホのロゴの位置調整 */
@media only screen and (max-width: 771px){
  #logo_image h1#logo img {
    height: 48px !important;
  }
  #logo_image h1#logo, #logo_image #logo {
    top: 6px !important;
  }
}

改行位置の調整

あまり改行されたくない部分を次のようにspanで囲いCSSを適用させます。

<span class=”ib”>改行されたくない部分</span>

.ib{
  display:inline-block;
}

内部リンクのジャンプ先が固定ヘッダーで隠れる問題対処

内部リンクのジャンプ先が固定ヘッダーで隠れる場合は下記コードで対処します。これはAMOREに限らずさまざまなサイトで使用可能です。

html {
 scroll-padding-top: 100px; /* 固定ヘッダの高さ分 */
}
@media screen and (max-width:767px) {
 html {
 scroll-padding-top: 60px; /* 固定ヘッダの高さ分 */
 }
}

メインビジュアル1枚目を常に表示する

公式ではPHPを編集する方法が紹介されていますが、PHPを触わらずにCSSで対処することも可能です。

/* メインビジュアル 1 枚目を常に表示する */
.parallax-mirror[data-order="0"] ,.slider[data-order="0"] {
  display:block!important;
  opacity:1!important;
}

トップページ第5ブロック非表示

/* 第 5 ブロック非表示 */
.main-content>section:nth-of-type(5) {
 display:none;
}

「5」の部分を第○ブロックの数字に置き換えることでそのブロックを非表示にできます。

フッターお問い合わせボタンを中央にする

デフォルトではなぜか左に寄っているので下記CSSコードで中央になるように修正します。

/* フッターお問い合わせボタンを中央にする */
@media only screen and (max-width: 771px){
  .footer_btn a {
    width: 180px;
  }
  .footer_btn {
    margin: 10px 0;
  }
}
@media screen and (min-width: 768px) {
  #footer .container{
    position: relative;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #footer .row .col-xs-offset-20 {
    width: 100%;
    margin-left:0;
  }
  #footer .container .row .col-xs-40{
    position: absolute;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  #footer div.container{
    padding:0px 15px!important;
  }
}

画像中央寄せが効かない場合の対処

/* 画像中央寄せ */
.entry-content .aligncenter, .single-page .aligncenter {
 text-align: center;
}

リストの点を塗りつぶす

TCDはデフォルトで白丸なので黒丸に変更したい場合は下記コードをお試しください。

/* リストの点を塗りつぶす */
.entry-content ul, .single-page ul {
 list-style-type: disc;
}

ボタンリンクの下線を無しにする

下層ページにブロックエディタのボタンを使用すると、ボタンにマウスカーソルを合わせた時（ホバーする時）下線が出てしまうのですがこれをCSSでなくせます。ついでにopacityを指定することでマウスカーソルを合わせたときに色を少し（.7だと70%に）透かすことができます。

/* ボタンリンクの下線を無しに */
.wp-block-button a:hover, .button:hover{
  text-decoration: none;
  opacity:.7;
}

お問い合わせページの幅調整（ContactForm7を使用）

ContactForm７でお問い合わせフォームを実装する際にデフォルトだと崩れているのでCSSで整えます。

/* お問い合わせページの幅調整*/
.wpcf7 label{
  width: 100%;
}
.wpcf7-form-control-wrap {
  width: 100%;
}
.wp-block-contact-form-7-contact-form-selector{
  max-width: 600px;
  margin: 0 auto;
}

フッターのお問い合わせボタン非表示

お問い合わせページや手動でボタンを設置した際にフッターのボタンは不要となるのでCSSで消したいというケースがあると思います。

/* フッターのお問い合わせボタン非表示*/
#footer .button {
  display: none;
}
@media screen and (min-width: 768px) {
#footer div.container .row .col-xs-40 {
  width: 100%;
  position: static;
}
}

WordPressのカスタマイズで分からなくなったら、
SenriWebにお任せください

SenriWebはこれまでにさまざまなサイトの改善を担当してまいりました。「カスタマイズ方法が分からない…」「テーマの機能では痒い所に手が届かない…」といった場合は是非SenriWebにお任せください。

＼メール問い合わせ24時間受付中／

SenriWebに相談する

よかったらシェアしてね！