【THE THOR】サイドカラムのピックアップ記事のカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

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

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③

今回は、WordPressテーマ THE THOR(ザ・トール)での「サイドカラムのピックアップ記事」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) サイドカラムのピックアップ記事

過去に「サイドカラムにピックアップ記事設置のカスタマイズ」のエントリー記事を掲載しました。

これは、サイドカラムにウィジェットとしてピックアップ記事を掲載するためのカスタマイズです。

【THE THOR】サイドカラムにピックアップ記事設置のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「サイドカラムにピックアップ記事設置」のカスタマイズについてまとめてみました。今回は「[THE]タブコンテンツ」ウィジェットを使ってサイドカラムにピックアップ記事を表示しました。

そのサイドカラムに設置したウィジェットのピックアップ記事のスタイルは次の様になっています。

【THE THOR】サイドカラムのピックアップ記事のカスタマイズ

前回のエントリー記事で、ブログカードとサイトカードのカスタマイズを行いました。

その中で、アイキャッチ画像とタイトル(説明)の表示位置の入れ替えを行いました。

404 NOT FOUND | MASAa.net
WordPress blog site specialized in PC produce by masaa

今回、そのカスタマイズを「サイドカラムのピックアップ記事」にも取り入れたいと思います。

サイドカラムのピックアップ記事のカスタマイズ

「サイドカラムのピックアップ記事」のカスタマイズを行います。

カスタマイズ内容

「サイドカラムのピックアップ記事」のカスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

なお、以前「サイドカラムにピックアップ記事設置のカスタマイズ」を行った箇所に上書きする形で貼り付ける必要があります。

/************************************
** ■サイドカラムエリア サイトカードカスタマイズ
************************************/
.l-sidebar .sitecard .phrase.phrase-tertiary { /*メタディスクリプション*/
	display: none;
}
.l-sidebar .sitecard .heading.heading-secondary { /*タイトル*/
	font-size:14px;
	width: 100%;
	line-height: 19px; /*行の高さ*/
}
@media only screen and (max-width: 1280px) { /*iPad縦表示対応*/
	.l-sidebar .sitecard .heading.heading-secondary {
		font-size: 12px; /*フォントサイズ*/
	}
}
.l-sidebar .sitecard .heading.heading-secondary a:hover { /*タイトルホバー時*/
    text-decoration: underline; /*アンダーライン*/
}
.l-sidebar .sitecard { /*サイトカード*/
	padding: 2px 5px;
	margin: 0 0 4px 0;
}
.l-sidebar .sitecard__subtitle { /*サブタイトル(関連記事)*/
	display: none;
}
.l-sidebar .sitecard .sitecard__contents a { /*タイトル横幅調整*/
	max-width: 100%;
}
.l-sidebar .sitecard .sitecard__contents { /*タイトル間隔調整*/
	float: right;  /*タイトル右側表示*/
	width: 80%;
	max-width: calc(100% - 127px);
	margin: 3px 0 0 0;
}
.l-sidebar .sitecard .eyecatch { /*アイキャッチ画像調整*/
	float: left;  /*アイキャッチ画像左側表示*/
	width: 117px;
	max-width: 117px;
	max-height: 65px;
	margin: 5px 0;
}
.l-sidebar .sitecard .eyecatch img:hover { /*アイキャッチ画像ホバー時拡大無し*/
	transform: none;
}
.l-sidebar .sitecard__subtitle:before { /*サブタイトルアイコン削除*/
	display: none;
}

/************************************
** ■サイドカラムエリア ブログカードカスタマイズ(ピックアップ記事)
************************************/
.l-sidebar .blogcard .phrase.phrase-tertiary { /*メタディスクリプション*/
	display: none;
}
.l-sidebar .blogcard .heading.heading-secondary { /*タイトル*/
	font-size:14px;
	width: 100%;
	line-height: 19px; /*行の高さ*/
}
@media only screen and (max-width: 1280px) { /*iPad縦表示対応*/
	.l-sidebar .blogcard .heading.heading-secondary {
		font-size: 12px; /*フォントサイズ*/
	}
}
.l-sidebar .blogcard .heading.heading-secondary a:hover { /*タイトルホバー時*/
    text-decoration: underline; /*アンダーライン*/
}
.l-sidebar .blogcard { /*ブログカード*/
	padding: 8px 5px;
	margin: 0 0 4px 0;
}
.l-sidebar .blogcard__subtitle { /*サブタイトル(ブログ名)*/
	padding: 0px 6px;
	font-size: 1.1rem;
}
.l-sidebar .blogcard .blogcard__contents a { /*タイトル横幅調整*/
	max-width: 100%;
}
.l-sidebar .blogcard .blogcard__contents { /*タイトル間隔調整*/
	float: right;  /*タイトル右側表示*/
	width: 80%;
	max-width: calc(100% - 125px);
	margin: 15px 0 0 0;
}
.l-sidebar .blogcard .eyecatch { /*アイキャッチ画像調整*/
	float: left;  /*アイキャッチ画像左側表示*/
	width: 117px;
	max-width: 117px;
	max-height: 65px;
	margin: 18px 0 0 0;
}
.l-sidebar .blogcard .eyecatch img:hover { /*アイキャッチ画像ホバー時拡大無し*/
	transform: none;
}
.l-sidebar .blogcard__subtitle:before { /*サブタイトルアイコン削除*/
	display: none;
}

カスタマイズ後のサイドカラムのピックアップ記事

今回のカスタマイズによって、「サイドカラムのピックアップ記事」のスタイルは次の様になりました。

【THE THOR】サイドカラムのピックアップ記事のカスタマイズ

今回の「サイドカラムのピックアップ記事」のカスタマイズでは下記の項目について行いました。

  1. アイキャッチ画像とタイトル(説明)の表示位置の入れ替え
  2. アイキャッチ画像のサイズ調整
  3. 各表示間隔調整

最後に

やはり自分的にはアイキャッチ画像が左側に表示されている方がバランス的に良い感じがします。

また、アイキャッチ画像のサイズ調整を行ったことで、スマートフォンなどのガジェットで表示した場合も窮屈感がだいぶ少なくなりました。

なお、WordPressテーマ THE THOR(ザ・トール)には元々サイドカラムにピックアップ記事を掲載する機能はありません。

サイドカラムにピックアップ記事を掲載したい場合は、エントリー記事「サイドカラムにピックアップ記事設置のカスタマイズ」をご参照下さい。

【THE THOR】サイドカラムにピックアップ記事設置のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「サイドカラムにピックアップ記事設置」のカスタマイズについてまとめてみました。今回は「[THE]タブコンテンツ」ウィジェットを使ってサイドカラムにピックアップ記事を表示しました。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール