【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

【THE THOR】メインビジュアルのカスタマイズ

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

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

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)
パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)

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

WordPressテーマ THE THOR(ザ・トール)メインビジュアル

元々、当サイトにはシンプルをコンセプトとして作成しているので、メインビジュアルを使っていませんでした。

先日、Twitterフォロワーの方からWordPressテーマ THE THOR(ザ・トール)の「メインビジュアル」のカスタマイズについて相談が有り着手してみました。

現在の「メインビジュアル」のスタイルは、次の様になっています。

【THE THOR】メインビジュアルのカスタマイズ

メインビジュアルの背景画像についてはカスタマイズ出来そうもないので、メインビジュアルの【タイトル】及び【サブタイトル】についてカスタマイズを行いたいと思います。

WordPressテーマ THE THOR(ザ・トール)メインビジュアル設定箇所
【TOPページ設定[THE]】-【メインビジュアル設定】

メインビジュアルのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「メインビジュアル」のカスタマイズを行います。

カスタマイズ内容

「メインビジュアル」のカスタマイズ内容は、下記の通りです。

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

/************************************
** ■メインビジュアル カスタマイズ
************************************/
.swiper-slide,
.still__box { /*タイトル・サブタイトル表示位置*/
	position: relative;
	display: flex;
	justify-content: left!important; /*左位置*/
	align-items: center;
	text-align: left!important; /*左位置*/
	overflow: hidden;
}
.swiper-content {
	margin-bottom: 10px!important; /*下マージン設定*/
}
.phrase-slider,
.heading-slider { /*文字表示*/
	position: relative;
	opacity: 0;
	text-align: left; /*文字左位置指定*/
	font-family: "ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-animation: mvtitle-txt 5s ease 0s 1 normal forwards;
	animation:mvtitle-txt 5s ease 0s 1 normal forwards;
	margin-left: 35px; /*左マージン*/
}
.phrase-slider:before,
.heading-slider:before { /*ベタ塗り表示*/
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fff; /*ベタ塗りカラー*/
	-webkit-animation: mvtitle-bar 5s ease 0s 1 normal forwards;
	animation: mvtitle-bar 5s ease 0s 1 normal forwards;
	text-align: left; /*文字左位置指定*/
}
.heading-slider { /*タイトル*/
	font-size: 26px; /*文字サイズ*/
	color: #fff; /*文字カラー*/
	text-shadow: 2px 1px 3px #aaa; /*フォント影*/
}
.phrase-slider { /*サブタイトル*/
	font-size: 16px; /*文字サイズ*/
	color: #fff; /*文字カラー*/
	text-shadow: 2px 1px 3px #aaa; /*フォント影*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.heading-slider { /*タイトル*/
		font-size: 18px; /*文字サイズ*/
		margin-left: 0; /*左マージンクリア*/
	}
	.phrase-slider { /*サブタイトル*/
		font-size: 10px; /*文字サイズ*/
		margin-left: 0; /*左サイズクリア*/
	}
}

/*パターン1*/
@keyframes mvtitle-txt{
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0.4;
	}
	60% {
		opacity: 0.6;
	}
	80% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}
@keyframes mvtitle-bar{
	0% {
		left: 0;
		width: 100%;
	}
	40% {
		left: 0;
		width: 100%;
	}

	41% {
		left: 0;
		width: 100%;
	}
	60% {
		left: 100%;
		width: 0;
	}

	61% {
		left: 100%;
		width: 0;
	}
	80% {
		left: 0;
		width: 100%;
	}
	
	81% {
		left: 0;
		width: 100%;
	}
	100% { 
		left: 100%;
		width: 0;
	}
}

/*パターン2*/
/*@keyframes mvtitle-txt{
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes mvtitle-bar{
	0% {
		left: 0;
		width: 100%;
		}
	60% {
		left: 0;
		width: 100%;
		}
	61% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
		}
}*/

.swiper-pagination-bullet { /*スライダショー ページ付け弾丸設定*/
	background: #ffddee!important;
	opacity: 0.6;
}
.swiper-pagination-bullet-active { /*スライダショー ページ付けアクティブ弾丸設定*/
	background: #fe619a!important;
	opacity: 1;
}

.still .btn__link-primary:hover, 
.still .btn__link-primary { /*メインビジュアル ボタン設定*/
	background: none!important;
	padding: 0 20px 0 0;
	margin: 0 10px 0 0;
	box-shadow: none;
	font-weight:400!important;
	transform: none;
	border: none;
	opacity: 0.6;
	border-radius: 0;
}

カスタマイズ後のメインビジュアル

今回のカスタマイズによって、「メインビジュアル」のスタイルは、次の様になりました。

【THE THOR】メインビジュアルのカスタマイズ

【THE THOR】メインビジュアルのカスタマイズ

【THE THOR】メインビジュアルのカスタマイズ

今回のカスタマイズでは、

  1. 【タイトル】【サブタイトル】を左寄せに設定
  2. 【タイトル】【サブタイトル】のフォントサイズ調整
  3. 【タイトル】【サブタイトル】の位置調整
  4. 【タイトル】【サブタイトル】のフォント影追加
  5. 【タイトル】【サブタイトル】にエフェクト(アニメーション)導入
  6. スライダショー ページ付け弾丸カラー調整(スライドショー設定時に表示)
  7. メインビジュアルのボタンのフォント調整

を行いました。

【タイトル】【サブタイトル】のエフェクト(アニメーション)については、往復する【パターン1】とシンプルな【パターン2】の2通り用意しています。

なお、エフェクト(アニメーション)の長さは同じです。

上記カスタマイズ内容では、【パターン1】として設定しています。

【パターン2】にする場合には、【パターン2】のコメントアウトを解除し【パターン1】をコメントアウトするか削除して下さい。

今回のカスタマイズは、メインビジュアルの表示モード設定の【静止画(default)】【スライドショー】にて動作確認を行っています。

【YouTube背景動画】設定は未確認となります。

今回のカスタマイズを行った場合、カルーセルスライダーの表示が崩れるためカルーセルスライダーと併用することができません。もしカルーセルスライダーを使いたい場合には、ソース先頭部分の【.swiper-slide,】を削除して下さい。タイトル・サブタイトルが左寄せから中央寄せになりますが、カルーセルスライダーを正常に表示することができます。

最後に

最初はメインビジュアル導入することでシンプルさが損なわれるため躊躇していました。

実際にカスタマイズしたメインビジュアを導入したことで、サイトについて分かりやすくアピールすることができ気に入りました。

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

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

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



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

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

MASAa.net

コメント