WordPressTHE THOR

【THE THOR】メインエリアのウィジェットタイトルのカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。
MASAa.blog│パズドラ日記と製品レビューの記事を掲載するmasaaの元祖WordPressブログサイト
このMASAa.blogは、パズドラ好きmasaaのWordPressブログサイトです。パズル&ドラゴンズ(パズドラ)を始めスマホアプリについてやレビュー記事等を掲載していきます。

今回は、WordPressテーマ THE THOR(ザ・トール)で「メインエリアでのウィジェットのタイトル」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) メインエリアでのウィジェットのタイトル

現在のWordPressテーマ THE THOR(ザ・トール)で「メインエリアでのウィジェットのタイトル」のスタイルは、次の様になっています。

【THE THOR】メインエリアのウィジェットタイトルのカスタマイズ

メインエリアに【ZMASAa.blog おすすめカテゴリー】【ZMASAa.blog 注目ワード】を設置した際に、現在の「メインエリアでのウィジェットのタイトル」のスタイルになってしまったようです。

今回は「メインエリアでのウィジェットのタイトル」をサイトデザインにあったスタイルにカスタマイズしたいと思います。

メインエリアでのウィジェットのタイトル カスタマイズ

「メインエリアでのウィジェットのタイトル」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

なお、既に「メインエリアでのウィジェットのタイトル」についてカスタマイズを行っている場合は、そのカスタマイズ箇所に上書きする必要があります。

/************************************
** ■メインエリア ウィジェットタイトル設定
************************************/
.l-main .widget-main .heading.heading-widget {
	margin-bottom: 4px;
	position: relative;
	background:linear-gradient(160deg, #fe619a, #fe619a, #ffddee); /*タイトル背景カラー*/
	padding-left: 24px; /*左内側余白設定*/
}
.l-main .widget-main .heading.heading-widget::after {
	position: absolute;
	top: 0.4em;
	left: 0.6em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 0.8em);
	height: calc(100% - 0.8em);
	background-color: #fff;
	border-radius: 6px;
}

左端の縦ラインを点滅させたい場合は下記の処理を追加します。

.l-main .widget-main .heading.heading-widget::after { /*メインエリアのウィジェットタイトル*/
	animation:blink 1.8s ease-in-out infinite alternate!important; /*アニメーション点滅間隔1.8秒設定*/
}
@keyframes blink {
	0% {
		opacity: 0.2;
	}
	81% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

カスタマイズ後のメインエリアでのウィジェットのタイトル

今回のカスタマイズによって、「メインエリアでのウィジェットのタイトル」のスタイルは次の様になりました。

【THE THOR】メインエリアのウィジェットタイトルのカスタマイズ

今回の「メインエリアでのウィジェットのタイトル」のカスタマイズでは、

  1. サイトカラーを採用したタイトル
  2. タイトルのグラデーション化
  3. タイトルの左端に縦ライン(点滅)設置

について行いました。

最後に

メインエリアでのウィジェット採用は広告表示ぐらいなので、すっかり「メインエリアでのウィジェットのタイトル」を見落としていました。

これで対象存在感のある「メインエリアでのウィジェットのタイトル」になったと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ナナリズムダッシュ
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント