【備忘録】WordPressの基本的なカスタマイズCSSコード一覧

2019年11月10日

段落・本文のカスタマイズ

.content p {
     margin-top: 1.5em;
     margin-bottom: 1.5em;
     font-size: 17px;
     line-height: 2;
 }@media screen and (max-width: 768px){
 .content p {
     margin-top: 1.25em;
     margin-bottom: 1.7em;
     font-size: 16px;
     line-height: 1.7;
 }
 }

目次のカスタマイズ

 .content .outline {
     border: dotted 1px #228b22;
     border-radius: 20px 0px;
     margin-top: 4em!important;
 }

見出しのカスタマイズ

  .content h2 {
     margin-top: 4em;
 }
 .content h3 {
     margin-top: 3.5em;
 }
 .content h4 {
     margin-top: 3em;
 }
 .content h5 {
     margin-top: 2.5em;
 }

整形済みブロックのカスタマイズ

  .content pre{
     margin-top:40px;
     margin-bottom: 40px;
     font-size: 16px;
     background-color: #f0f6da;
 }

引用ブロックのカスタマイズ

 .content blockquote{
     margin-top:40px;
     margin-bottom: 40px;
     background-color: #f0f6da;
     border-radius: 20px 20px 20px 0px;
     border: 1px dotted #228b22;
 }
 .content blockquote:before{
     color: #228b22!important;
 }

画像のカスタマイズ

  .content img {
     margin-top: 1em;
     margin-bottom: 1em;
     border-style: solid;
     border-width: 1px;
     border-color: #696969;
 }

リンクのカスタマイズ

  a hover {
     text-decoration: none;
 }

カスタムHTMLブロックのカスタマイズ

.content table td {
     padding-top:20px;
     padding-bottom:20px;
 }       

header画像のデバイスごとのサイズ変更

.info{
padding-top: 30px;
padding-bottom: 180px;
}
@media screen and (max-width: 768px){
.info{
padding-top: 30px;
padding-bottom: 140px;
}
}
@media screen and (max-width: 375px){
.info{
padding-top: 20px;
padding-bottom: 70px;
}
}

Luxeritasヘッダー上のボタンのホバー色

div[id*="head-band"] .snsf a:hover {
color: #fff;
background-color: #24b795;
}

ページネーションボタンを丸くする

.pagination > li > a, .pagination > li > span {
border-radius: 40%;
}

ページネーション現在のページのボタン色

.pagination > .active > span, .pagination > li > a:hover {
    background: #008484;
}

目次の開く・閉じるボタンを丸くする

toc_container {
    margin-top: 4em;
    border-radius: 15px;
}
.toc_toggle::before {
    border-radius: 8px;
}

h2タイトルのカスタマイズ

.post h2 {
    margin-top: 3.5em;
    font-weight: bold;
    background-color: #cbdbce;
    border-color: #cbdbce; 
    border-radius: 15px;
}
.post h2:before {
    content: "● ";
    color: #fff;
}

h3タイトルのカスタマイズ

.post h3 {
    border-left: solid 5px #cbdbce;
    font-weight: bold;
}

引用ブロックのフォントサイズ

blockquote, .wp-blockquote {
    font-size: 16px!important;
}

記事タイトルのホバー色

.entry-title a:hover {
    color: #24b795;
}

画像ホバー時フチ線色

.term img:hover {
    border-color: #fff;
}

前へ戻る・先へ進むボタンのホバー色

pnavi .next a:hover {
    color: #24b795;
}
pnavi .prev a:hover {
    color: #24b795;
}

関連記事タイトルのホバー色

related h3 a:hover {
    color: #24b795;
}

コメントを投稿するボタンの色

comments [type="submit"] {
    background-color: #008484;
    border-radius: 15px;
}
comments [type="submit"]:hover{
    background-color: #24b795;
}

コメントを入力する欄を丸くする

commentform input, #comments textarea, [class^=comment-form-] {
    border-radius: 15px;
}

SNSでシェアするボタンを丸くする

.snsf-c .snsfb li a {
    border-radius: 13px;
}
.sns-msg h2 {
    border-color: #cbdbce;
}

この記事のトラックバックの欄を丸くする

trackback input {
    border-radius: 15px;
}

検索窓を丸くする

.search-field{
    border-radius: 10px;
}
[type="submit"] .search-submit {
    border-radius: 10px;
}