>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

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

WordPress・テーマ
この記事は約6分で読めます。

高速で高機能な無料テーマ「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;
}

 

カスタマイズサンプル

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

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;
}

 

 

その他のカスタマイズ

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

WordPress無料テーマ「4536」の簡単カスタマイズ!カスタマイザー編
高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。 今回は「カスタマイザー」や「管理メニュー」から設定で行えるものになります。 「4536」については、以下にまとめています。 公式サイトは以下です。 4536公式サイト 管理...

 

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

WordPress無料テーマ「4536」の簡単カスタマイズ!CSS編(その1)
高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。 今回は「CSS追記」で行えるものになります。 「4536」については、以下にまとめています。 公式サイトは以下です。 見出し H2~H4の見出しのデザインは10種用意されて...

 

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

WordPress無料テーマ「4536」の簡単カスタマイズ!CSS編(その2)
高速で高機能な無料テーマ「4536」のカスタマイズをご紹介します。 今回は「CSS追記」で行えるものになります。 「4536」については、以下にまとめています。 公式サイトは以下です。 記事上アイキャッチ画像 初期デザイン カスタマイズサン...

 

色を変える

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

 色別カラーコード

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

 

 

コメント

タイトルとURLをコピーしました