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

テーマ

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

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

 

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

公式サイトは以下です。

 

 

新着記事・ピックアップウィジェット

4536オリジナルウィジェットのサムネイル付新着記事ウィジェットと、ピックアップ記事ウィジェットです。

クラス名

新着記事 widget_new_post
ピックアップ記事 widget_pickup_post

 

初期デザイン

 

 

 

カスタマイズサンプル

アイキャッチの角を丸めて、タイトルに装飾。

 

 

サンプルのCSS

コードを表示
/************************/
/* 新着記事ウィジェット */
/************************/
.widget_new_post img{
border-radius: 8px;
}
.widget-post-title {
font-size: 16px;
padding: 10px;
border-bottom:3px double  #779dc4;
}
/************************/
/* ピックアップ記事ウィジェット */
/************************/
.widget_pickup_post img{
border-radius: 8px;
}

 

カスタマイズサンプル

アイキャッチの角を丸めて、立体枠を付ける。

4536:新着記事ウィジェット

 

サンプルのCSS

コードを表示
.widget_new_post img{
border-radius: 8px;
border: outset #9dceff;
}

 

タグクラウドウィジェット

初期デザイン

4536:タグクラウド

 

カスタマイズサンプル

4536:タグクラウド

 

サンプルのCSS

コードを表示
/************************/
/*タグクラウドのデザイン*/
/************************/
.widget_tag_cloud .tagcloud a{
padding:5px;
font-size:12px;
border: solid 1px rgba(157,206,255,0.8);
border-radius:5px;
flex: 0 1 auto;
}
.widget_tag_cloud .tagcloud a:hover{
background: radial-gradient(rgba(157,206,255,1), rgba(157,206,255,0.7));
color:#fff;
}

 

ヘッダーナビ

ヘッダーナビはヘッダーの左上に表示されるため、
カラーは、テーマデザインで設定している「サブカラー(セカンダリー)」です。

 

初期デザイン

4536:ヘッダーナビ

 

カスタマイズサンプル

各メニューの横幅を広げ、ホバーアクションを設定。

4536:ヘッダーナビ

 

サンプルのCSS

コードを表示
/************************/
/* ヘッダーナビ */
/************************/
#header-nav ul li{
width:150px;
}
#header-nav ul li a:hover, #header-nav ul li ul li a:hover {
border-bottom: 3px solid #555;
background: #fff; /*背景色*/
color:#555;
}

 

Next/Prev

 

初期デザイン

4536:Next/Prev

 

カスタマイズサンプル

黒いマスクを外して、アイキャッチ画像の角を丸める。

4536:Next/Prev

 

サンプルのCSS

コードを表示
/************************/
/* Next/Prev */
/************************/
#prev-next .mask{display:none;}
#prev-next img{
border-radius:5%;
}

 

 

カスタマイズサンプル

黒いマスクを薄くして、アイキャッチ画像の角を丸める。

4536:Next/Prev

 

サンプルのCSS

コードを表示
/************************/
/* Next/Prev */
/************************/
#prev-next .mask{
opacity:0.5;
border-radius:5%;
}
#prev-next img{
border-radius:5%;
}

 

CTAウィジェット

初期デザイン

4536:CTAウィジェット

 

カスタマイズサンプル

枠を付けて、ボタンのホバーアクション追加。

4536:CTAウィジェット

 

サンプルのCSS

コードを表示
/************************/
/* CTAウィジェット */
/************************/
.widget_cta{
background: #95ccff;
box-shadow: 0px 0px 0px 5px #95ccff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
.widget_cta a:hover{
background: radial-gradient(rgba(157,206,255,1), rgba(157,206,255,0.7)); color:#fff;
}

 

 

その他のカスタマイズ

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

 

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

 

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

 

色を変える

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

 色別カラーコード

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

 

 

関連記事

テーマ

Posted by 綾糸