(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

【THE THOR】メインビジュアル カルーセルスライダー対応版

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

【広告】

※ 本ページには【広告】が含まれています

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

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

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

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

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

以前、WordPressテーマ THE THOR(ザ・トール)の「メインビジュアル」についてカスタマイズを行いました。

【THE THOR】メインビジュアルのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「メインビジュアル」のカスタマイズについてまとめてみました。今回はメインビジュアル上の【タイトル】【サブタイトル】に対してエフェクト化(アニメーション)を取り入れてみました。

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

【THE THOR】メインビジュアル カルーセルスライダー対応版

この「メインビジュアル」のカスタマイズでは、メインビジュアルの【タイトル】及び【サブタイトル】についてアニメーション動作を設定しました。

この「メインビジュアル」のカスタマイズについて、他機能との動作不具合を確認しました。

「メインビジュアル」自体について動作に問題ありませんが、カルーセルスライダーを設定した場合にカルーセルスライダーが崩れた表示となることを確認しました。

【THE THOR】メインビジュアル カルーセルスライダー対応版

この「メインビジュアル」のカスタマイズを行った時点で、カルーセルスライダーの設定は行っていませんでした。

今回のカスタマイズでは、以前の「メインビジュアル」カスタマイズに対し、カルーセルスライダー対応にしたカスタマイズを行いたいと思います。

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

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

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

カスタマイズ内容

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

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「■メインビジュアル カスタマイズ」に上書きします。

/************************************
** ■メインビジュアル カスタマイズ
************************************/
.swiper-slider .swiper-slide,
.still__box { /*タイトル・サブタイトル表示位置*/
	position: relative;
	display: flex;
	justify-content: left!important; /*左位置*/
	align-items: center;
	text-align: left!important; /*左位置*/
	overflow: hidden;
}
.swiper-content {
	margin-left:10px!important; /*左マージン設定*/
	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: #ff75a7!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】メインビジュアル カルーセルスライダー対応版

表示的には何も変化は無く「メインビジュアル(カスタマイズ済み)」「カルーセルスライダー」共に正常表示されるようになりました。

最後に

WordPressテーマ THE THOR(ザ・トール)の機能については全ての機能を使っておらず、それらの機能についての動作確認を行っていません。

そのためこれから新たに使う機能によっては正常に動作しない可能性があります。

何か不具合があればその都度修正対応を行っていきますので、何かありましたらご連絡ください。

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

シェアする
※ 記事内には【広告】が含まれています
MASAa.net

コメント

【広告】