WordPressTHE THOR

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

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

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

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。
MASAa.blog│パズドラ日記と製品レビューの記事を掲載するmasaaの元祖WordPressブログサイト
このMASAa.blogは、パズドラ好きmasaaの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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント