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

テーマ

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

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

 

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

公式サイトは以下です。

 

記事上アイキャッチ画像

初期デザイン

記事上アイキャッチ

 

カスタマイズサンプル

角を丸め、立体枠を付けてみます。

記事上アイキャッチ

 

サンプルのCSS

コードを表示
/*記事上アイキャッチ画像*/
.post-thumbnail img{
border-radius:5%;
border: outset 10px #9dceff;
}

 

 

テーブルデザイン

カスタマイザーから偶数番目の行に色を付ける事が出来ます。
「外観」→「カスタマイズ」から「色」を開きます。

4536:メインカラー・サブカラー

好きな色に設定可能です。

4536:テーブル

テーブルサンプル

4536:テーブル

 

タイトル(<TH>タグ)に装飾を付ける

4536:テーブル

 

サンプルのCSS

コードを表示
/************************/
/* テーブル タイトル */
/************************/
.article-body table th {
padding: 10px;
font-weight: bold;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 3px solid #779dc4;
background: #555;
font-size: 18px;
color:#fff;
}

 

ブログカード・エントリーカード

ブログカードは以下の設定を。
「外観」→「カスタマイズ」から「その他」を開きます。

4536:ブログカード

 

ブログカード表示切り替え」にチェック。

4536:ブログカード

 

初期デザイン

 

カスタマイズサンプル

角を丸めて影をつけ、「もっと見る」ボタンも角丸め。ホバー時には背景色を変更。

 

サンプルのCSS

コードを表示
/************************/
/* ブログカード */
/************************/
.card-wrap{
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
border-radius:10px;
}
.card-wrap:hover {
background:rgba(102,153,255,0.5);
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 10px 10px 10px rgba(102,153,255,0.3);
}
.card-meta a{
border-radius:10px;
}

 

プロフィールボックス

初期デザイン

4536:プロフィールボックス

 

色の変更は、キーカラー変更やデザインテーマ選択から行います。

 

カスタマイズサンプル

4536:プロフィールボックス

 

サンプルのCSS

コードを表示
/*プロフィールボックス*/
.author-card {
background: #95ccff;
box-shadow: 0px 0px 0px 5px #95ccff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
.author-card:after{
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #65adf0 #fff #65adf0;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

 

プロフィールボックスを非表示に

.author-card{display:none;}

 

その他のカスタマイズ

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

 

見出し・ウィジェットタイトル・記事装飾

 

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

 

色を変える

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

 色別カラーコード

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

 

関連記事

テーマ

Posted by 綾糸