WordPressテーマ THE THOR（ザ・トール）
別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
ZMASAa.blog │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト
PC･ガジェット･デジモノ･車好きのmasaaが情報を発信するサイト
wp.masaa.net
MASAa.blog │ PC･ガジェット･車･パズドラ好きのmasaaの情報発信サイト
PC･ガジェット･車･パズドラ好きのmasaaが情報を発信するサイト
wp.masaa.me
今回は、WordPressテーマ THE THOR（ザ・トール）での「投稿記事一覧ページのヘッダー」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）投稿記事一覧ページのヘッダー
WordPressテーマ THE THOR（ザ・トール）での「投稿記事一覧ページのヘッダー」のスタイルは、次の様になっています。
SNSボタンにホバーするとアンダーラインが表示されているのも気になります。
これまで「投稿記事一覧ページのヘッダー」は手付かずでした。
そこで改めて見てみると気になる箇所が幾つかあるので、それらのカスタマイズを行います。
投稿記事一覧ページのヘッダーのカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「投稿記事一覧ページのヘッダー」のカスタマイズを行います。
カスタマイズ内容
「投稿記事一覧ページのヘッダー」のカスタマイズ内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。
/************************************
** ■投稿記事一覧ヘッダー カスタマイズ
************************************/
.archiveHead__slink {
text-decoration:none!important; /*ホバー時アンダーライン無し*/
font-size:16px;
width: 120px;
}
@media only screen and (max-width: 1280px) { /*iPad縦表示対応*/
.archiveHead__slink {
width: 70px;
font-size:18px;
padding-top:4px;
}
}
.archiveHead__slink.icon-instagram { /*Instagramボタン調整*/
height: 32px;
line-height: 32px;
margin-top: -1px;
}
.phrase.phrase-secondary.archiveHead__authorDescription {
margin-top: 10px;
margin-bottom: 40px;
text-decoration: underline dotted #333; /*アンダーライン*/
word-break: break-all; /*表示範囲に合わせて改行*/
}
/************************************
** ■イメージ画像を回転させるカスタマイズ
************************************/
.archiveHead__authorImg img { /*投稿記事一覧のプロフィールアイコン*/
animation: kaiten 8s linear infinite; /*アニメーション*/
}
@keyframes kaiten {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-50deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(50deg);
}
100% {
transform: rotate(0deg);
}
}
.archiveHead__authorImg img:hover { /*投稿記事一覧のプロフィールアイコン ホバー時*/
animation: kaiten 0s linear infinite; /*回転中止*/
opacity: 1.0; /*不透明度*/
}
カスタマイズ後の投稿記事一覧ページのヘッダー
今回のカスタマイズによって、「投稿記事一覧ページのヘッダー」のスタイルは、次の様になりました。
今回のカスタマイズでは、
- SNSボタンのサイズ調整
- プロフィール写真のアニメーション化
- プロフィール情報を表示範囲に合わせて改行
- プロフィール情報にアンダーラインを表示
- 上下マージンの調整
について行いました。
最後に
これまでは記事一覧の方がどうしても目が行ってしまうのですが、今回のカスタマイズによって、投稿記事一覧ページのヘッダーがかなり見やすく目立つようになりました。
コメント