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

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）ウィジェット
サイドカラムにピックアップ記事設置のカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のサイドカラムにピックアップ記事設置
最後に

WordPressテーマ THE THOR（ザ・トール）

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

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

WordPressテーマ THE THOR（ザ・トール）ウィジェット

現状、WordPressテーマ THE THOR（ザ・トール）には、ピックアップ記事掲載についてのウィジェットはありません。

サイドカラムにピックアップ記事掲載を行うには、「カスタムHTML」や「[THE]スタイルテキスト」などのウィジェットを使って表示させる必要があります。

「カスタムHTML」のウィジェットを使ってピックアップ記事を掲載しても良いのですが、記述が面倒なので今一歩やる気が起きません。

そこで「[THE]スタイルテキスト」のウィジェットを使って、ショートコードの「ブログカード」及び「サイトカード」を記述しピックアップ記事として表示する方法を行うことにしました。

これだと頻繁にピックアップ記事を更新してもすぐに対応することができます。

しかし、ここでWordPressテーマ THE THOR（ザ・トール）の大きな欠点を発見してしまいました。

それは「[THE]スタイルテキスト」のウィジェットには、タイトル設定の項目がありません。

これはWordPressテーマ THE THOR（ザ・トール）側のミスだとしか思えません。

タイトル設定が不要の場合は何も設定しなければ良いので、タイトル設定の項目が有るべきだでしょう。

しかも「[THE]タブコンテンツ」のウィジェットには、タイトル設定の項目が用意されています。

そして検討した結果、「[THE]タブコンテンツ」のウィジェットを使って「サイドカラムにピックアップ記事設置」のカスタマイズを行いたいと思います。

なお、既に「[THE]タブコンテンツ」のウィジェットを使っている場合は、その設定されている「[THE]タブコンテンツ」の表示が崩れるため、今回の「サイドカラムにピックアップ記事設置」のカスタマイズが出来ないと思います。

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

WordPressテーマ THE THOR（ザ・トール）での「サイドカラムにピックアップ記事設置」のカスタマイズを行います。

カスタマイズ内容

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

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

/************************************
** ■サイドカラムエリア サイトカードカスタマイズ
************************************/
.l-sidebar .sitecard .phrase.phrase-tertiary { /*メタディスクリプション*/
	display: none;
}
.l-sidebar .sitecard .heading.heading-secondary { /*タイトル*/
	font-size:14px;
	width: 100%;
}
@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: 8px 8px;
	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 { /*タイトル間隔調整*/
	margin: 0 0 0 0;
}
.l-sidebar .sitecard .eyecatch { /*アイキャッチ画像調整*/
	margin: 0;
	max-width: 130px;
	max-height: 68px;
}
.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%;
}
@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 8px;
	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 { /*タイトル間隔調整*/
	margin: 15px 0 0 0;
}
.l-sidebar .blogcard .eyecatch { /*アイキャッチ画像調整*/
	margin: 14px 0 0 0;
	max-width: 130px;
	max-height: 68px;
}
.l-sidebar .blogcard .eyecatch img:hover { /*アイキャッチ画像ホバー時拡大無し*/
	transform: none;
}
.l-sidebar .blogcard__subtitle:before { /*サブタイトルアイコン削除*/
	display: none;
}

/************************************
** ■サイドカラムエリア [THE]タブコンテンツカスタマイズ
************************************/
.l-sidebar .widgetTab__content {
	margin: 0 0;
	padding: 0 0;
}
.l-sidebar .widgetTab {
	border: none;
}
.l-sidebar .widgetTab__menu {
	margin-bottom: 0px;
}