高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。
「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;
}
カスタマイズサンプル
アイキャッチの角を丸めて、立体枠を付ける。
サンプルのCSS
コードを表示
.widget_new_post img{
border-radius: 8px;
border: outset #9dceff;
}
タグクラウドウィジェット
初期デザイン
カスタマイズサンプル
サンプルの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;
}
ヘッダーナビ
ヘッダーナビはヘッダーの左上に表示されるため、
カラーは、テーマデザインで設定している「サブカラー(セカンダリー)」です。
初期デザイン
カスタマイズサンプル
各メニューの横幅を広げ、ホバーアクションを設定。
サンプルの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
初期デザイン
カスタマイズサンプル
黒いマスクを外して、アイキャッチ画像の角を丸める。
サンプルのCSS
コードを表示
/************************/
/* Next/Prev */
/************************/
#prev-next .mask{display:none;}
#prev-next img{
border-radius:5%;
}
カスタマイズサンプル
黒いマスクを薄くして、アイキャッチ画像の角を丸める。
サンプルのCSS
コードを表示
/************************/
/* Next/Prev */
/************************/
#prev-next .mask{
opacity:0.5;
border-radius:5%;
}
#prev-next img{
border-radius:5%;
}
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;
}
その他のカスタマイズ
カスタマイザーからのカスタマイズ
見出し・ウィジェットタイトル・記事装飾
記事上アイキャッチ・テーブル・ブログカード・プロフィールボックス
色を変える
色変更には以下もご利用下さい。
マカロンビビッドパステル伝統色和色セーフ色名 赤桃青紫黄橙緑茶黒
コメント