WordPressテーマ THE THOR（ザ・トール）
別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「メインビジュアル カルーセルスライダー対応版」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）メインビジュアル
以前、WordPressテーマ THE THOR（ザ・トール）の「メインビジュアル」についてカスタマイズを行いました。
現在の「メインビジュアル」のスタイルは、次の様になっています。
この「メインビジュアル」のカスタマイズでは、メインビジュアルの【タイトル】及び【サブタイトル】についてアニメーション動作を設定しました。
この「メインビジュアル」のカスタマイズについて、他機能との動作不具合を確認しました。
「メインビジュアル」自体について動作に問題ありませんが、カルーセルスライダーを設定した場合にカルーセルスライダーが崩れた表示となることを確認しました。
この「メインビジュアル」のカスタマイズを行った時点で、カルーセルスライダーの設定は行っていませんでした。
今回のカスタマイズでは、以前の「メインビジュアル」カスタマイズに対し、カルーセルスライダー対応にしたカスタマイズを行いたいと思います。
メインビジュアル 修正版のカスタマイズ
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 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;
}
修正版カスタマイズ後のメインビジュアル
今回の修正版カスタマイズによって、「メインビジュアル」「カルーセルスライダー」のスタイルは、次の様になりました。
表示的には何も変化は無く「メインビジュアル（カスタマイズ済み）」「カルーセルスライダー」共に正常表示されるようになりました。
最後に
WordPressテーマ THE THOR（ザ・トール）の機能については全ての機能を使っておらず、それらの機能についての動作確認を行っていません。
そのためこれから新たに使う機能によっては正常に動作しない可能性があります。
何か不具合があればその都度修正対応を行っていきますので、何かありましたらご連絡ください。
コメント