WordPress無料テーマ「4536」の簡単カスタマイズ!CSS編(その1)

2020-06-28テーマ

高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。

今回は「CSS追記」で行えるものになります。

 

「4536」については、以下にまとめています。

 

 

見出し

H2~H4の見出しのデザインは10種用意されており、

それらを利用しない場合は、「装飾なし」にした上でCSSを追記します。
H5に関してはデザインがないので、CSSのみで設定可能です。

 

「外観」→「カスタマイズ」から「見出し」を開きます。

4536:見出し設定

4536:見出し設定

 

なんらかの装飾ありのままでCSS記述した場合のサンプル

4536:見出し

 

装飾なしでCSS記述したサンプル

4536:見出し

 

サンプルのCSS

コードを表示
/************************/
/* 見出しタグ */
/************************/
.article-body h2 {
color: #779dc4 !important;
padding: 5px 10px;
position: relative;
text-shadow: -1px -1px 1px #d1dae3, 1px -1px 1px #d1dae3, -1px 1px 1px #d1dae3, 1px 1px 1px #d1dae3; 
z-index: 0;
text-align:left;
}
.article-body h2:before {
background: repeating-linear-gradient(45deg, #779dc4, #779dc4 8px, #fff 0, #fff 7px);
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
}
.article-body h3 {
color: #fff !important;
font-size: 16px;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #779dc4, #779dc4 8px, #d1dae3 10px, #d1dae3 10px);
text-align:left;
}
.article-body h4{
background-color: #779dc4; 
color: #fff !important;
overflow: hidden;
padding: 10px;
position: relative;
text-align:left;
}
.article-body h4:before{
background-color: #fff;
border-radius: 50%;
content: '';
display: block;
opacity: 0.4;
position: absolute;
top: -20px;
left: 150px;
width: 70px;
height: 70px;
}
.article-body h4::after{
background-color: #fff;
border-radius: 50%;
content: '';
display: block;
opacity: 0.6;
position: absolute;
bottom: -50px;
left: 180px;
width: 100px;
height: 100px;
}
.article-body h5 {
font-size: 16px;
line-height: 20px;
padding: 10px;
position: relative;
}
.article-body h5:after {
content: " ";
width: 100%;
height: 5px;
bottom: 0;
left: 0;
position: absolute;
background: repeating-linear-gradient(45deg, #d1dae3, #d1dae3 3px, #779dc4 3px, #779dc4 6px);
}

 

見出しのデザインは以下にもまとめています。

 

ウィジェットタイトル

カスタマイズサンプル

4536:ウィジェットタイトル

 

サンプルのCSS

コードを表示
/************************/
/* ウィジェットタイトル */
/************************/
.widget-title {
color: #fff !important;
font-size: 16px;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #779dc4, #779dc4 8px, #d1dae3 10px, #d1dae3 10px);
text-align:left;
}

 

カスタマイズサンプル

4536:ウィジェットタイトル

 

サンプルのCSS

コードを表示
/************************/
/* ウィジェットタイトル */
/************************/
.widget-title {
font-size: 18px;
line-height: 20px;
padding: 10px;
border-bottom:3px double  #779dc4;
}

 

記事装飾

注意書き・ワンポイントの囲み枠デザインは、クラシックエディタブロックエディタで挿入されるタグのクラス名が違う為、分けて記述していますが、ご利用のエディタによってどちらか一方で大丈夫かと思います。

 

ビジュアルエディタからの囲み装飾

クラシックエディタ(ビジュアルエディタ)から挿入した場合、アイコンフォントが表示されない不具合があったので、カスタマイズではアイコンフォントを非表示にしています。

注意書き・ワンポイント

初期デザイン

注意書き・ワンポイント

 

カスタマイズサンプル

注意書き・ワンポイント

 

サンプルのCSS

コードを表示
/* 注意書き*/
.frame{
border-radius:10px;
}
.frame.border-red{
box-shadow: 0px 0px 0px 3px #cc0033;
border: dashed 2px white;
}
.border-red .frame-title{
background: #cc0033;
border-radius:10px;
font-style:normal;
font-weight:900;
}
.border-red .frame-title :before{
content:none;
}
/*ワンポイント*/
.frame.border-blue{
border: dashed 2px #6699ff;
}
.border-blue .frame-title{
background: #6699ff;
border-radius:10px;
font-style:normal;
font-weight:900;
}
.border-blue .frame-title :before{
content:none;
}

 

ブロックエディタからの囲み装飾

情報・注意書き・ワンポイント

初期デザイン

情報・注意書き・ワンポイント

 

カスタマイズサンプル

情報・注意書き・ワンポイント

 

 

サンプルのCSS

コードを表示
/* 情報*/
.frame{
border-radius:10px;
}
.frame.frame-yellow{
border: double 3px #ff9966;
}
.frame-yellow .frame-title{
background: #ff9966;
font-style:normal;
font-weight:900;
}
/* 注意書き*/
.frame{
border-radius:10px;
}
.frame.frame-red{
border: solid 2px #cc0033;
}
.frame-red .frame-title{
background: #cc0033;
font-style:normal;
font-weight:900;
}
/*ワンポイント*/
.frame.frame-blue{
border: dotted 2px #6699ff;
}
.frame-blue .frame-title{
background: #6699ff;
font-style:normal;
font-weight:900;
}

 

 

その他のカスタマイズ

カスタマイザーからのカスタマイズ

 

ヘッダーナビ・ウィジェット・Next/Prev

 

記事上アイキャッチ・テーブル・ブログカード・プロフィールボックス

 

色を変える

色変更には以下もご利用下さい。

 色別カラーコード

マカロンビビッドパステル伝統色和色セーフ色名

 

関連記事

テーマ

Posted by 綾糸