高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。
今回は「CSS追記」で行えるものになります。
「4536」については、以下にまとめています。
音楽や動画のポートフォリオサイトにも！高速でシンプルなテーマ4536
WordPress無料テーマ「4536」は、音楽特化型のWordPressテーマという位置づけで開発されました。 誰でも簡単に自分の作品を発信できる多機能なメディア制作ツール その後、利便性を追求しあらゆるサイトにも使えるように★ 音楽や動...
公式サイトは以下です。
4536
AMP対応の無料WordPressテーマ「4536」。WordPressテーマとして流体シェイプデザインを採用したのは国内初。ポートフォリオサイトやブログメディアから会社のホームページまで様々なメディアを簡単に作れます。SEO対策やカスタマ...
目次
新着記事・ピックアップウィジェット
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;
}
その他のカスタマイズ
カスタマイザーからのカスタマイズ
WordPress無料テーマ「4536」の簡単カスタマイズ！カスタマイザー編
高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。 今回は「カスタマイザー」や「管理メニュー」から設定で行えるものになります。 「4536」については、以下にまとめています。 公式サイトは以下です。 4536公式サイト 管理...
見出し・ウィジェットタイトル・記事装飾
WordPress無料テーマ「4536」の簡単カスタマイズ！CSS編（その１）
高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。 今回は「CSS追記」で行えるものになります。 「4536」については、以下にまとめています。 公式サイトは以下です。 見出し H2～H4の見出しのデザインは10種用意されて...
記事上アイキャッチ・テーブル・ブログカード・プロフィールボックス
WordPress無料テーマ「4536」の簡単カスタマイズ！CSS編（その２）
高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。 今回は「CSS追記」で行えるものになります。 「4536」については、以下にまとめています。 公式サイトは以下です。 記事上アイキャッチ画像 初期デザイン カスタマイズサン...
色を変える
色変更には以下もご利用下さい。
マカロンビビッドパステル伝統色和色セーフ色名 赤桃青紫黄橙緑茶黒