WordPressテーマ THE THOR（ザ・トール）
別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「メインビジュアル」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）メインビジュアル
元々、当サイトにはシンプルをコンセプトとして作成しているので、メインビジュアルを使っていませんでした。
先日、Twitterフォロワーの方からWordPressテーマ THE THOR（ザ・トール）の「メインビジュアル」のカスタマイズについて相談が有り着手してみました。
現在の「メインビジュアル」のスタイルは、次の様になっています。
メインビジュアルの背景画像についてはカスタマイズ出来そうもないので、メインビジュアルの【タイトル】及び【サブタイトル】についてカスタマイズを行いたいと思います。
メインビジュアルのカスタマイズ
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 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;
}
カスタマイズ後のメインビジュアル
今回のカスタマイズによって、「メインビジュアル」のスタイルは、次の様になりました。
今回のカスタマイズでは、
- 【タイトル】【サブタイトル】を左寄せに設定
- 【タイトル】【サブタイトル】のフォントサイズ調整
- 【タイトル】【サブタイトル】の位置調整
- 【タイトル】【サブタイトル】のフォント影追加
- 【タイトル】【サブタイトル】にエフェクト（アニメーション）導入
- スライダショー ページ付け弾丸カラー調整（スライドショー設定時に表示）
- メインビジュアルのボタンのフォント調整
を行いました。
【タイトル】【サブタイトル】のエフェクト（アニメーション）については、往復する【パターン1】とシンプルな【パターン2】の2通り用意しています。
なお、エフェクト（アニメーション）の長さは同じです。
上記カスタマイズ内容では、【パターン1】として設定しています。
【パターン2】にする場合には、【パターン2】のコメントアウトを解除し【パターン1】をコメントアウトするか削除して下さい。
今回のカスタマイズは、メインビジュアルの表示モード設定の【静止画(default)】【スライドショー】にて動作確認を行っています。
【YouTube背景動画】設定は未確認となります。
最後に
最初はメインビジュアル導入することでシンプルさが損なわれるため躊躇していました。
実際にカスタマイズしたメインビジュアを導入したことで、サイトについて分かりやすくアピールすることができ気に入りました。
コメント