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

【THE THOR】投稿記事一覧ページのヘッダーのカスタマイズ

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

【広告】

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

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】投稿記事一覧ページのヘッダーのカスタマイズ

SNSボタンにホバーするとアンダーラインが表示されているのも気になります。

【THE THOR】投稿記事一覧ページのヘッダーのカスタマイズ

これまで「投稿記事一覧ページのヘッダー」は手付かずでした。

そこで改めて見てみると気になる箇所が幾つかあるので、それらのカスタマイズを行います。

投稿記事一覧ページのヘッダーのカスタマイズ

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; /*不透明度*/
}

カスタマイズ後の投稿記事一覧ページのヘッダー

今回のカスタマイズによって、「投稿記事一覧ページのヘッダー」のスタイルは、次の様になりました。

【THE THOR】投稿記事一覧ページのヘッダーのカスタマイズ

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

  1. SNSボタンのサイズ調整
  2. プロフィール写真のアニメーション化
  3. プロフィール情報を表示範囲に合わせて改行
  4. プロフィール情報にアンダーラインを表示
  5. 上下マージンの調整

について行いました。

最後に

これまでは記事一覧の方がどうしても目が行ってしまうのですが、今回のカスタマイズによって、投稿記事一覧ページのヘッダーがかなり見やすく目立つようになりました。

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

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

コメント

【広告】