WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「サイドカラムのピックアップ記事」のカスタマイズについてまとめてみました。
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%;
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]タブコンテンツカスタマイズ
************************************/
.menuBtn__content .widgetTab__content,
.l-sidebar .widgetTab__content {
margin: 0 0;
padding: 0 0;
}
.menuBtn__content .widgetTab,
.l-sidebar .widgetTab {
border: none;
}
.menuBtn__content .widgetTab__menu,
.l-sidebar .widgetTab__menu {
margin-bottom: 0px;
}
カスタマイズ後のサイドカラムのピックアップ記事
今回のカスタマイズによって、「サイドカラムのピックアップ記事」のスタイルは次の様になりました。
今回の「サイドカラムのピックアップ記事」のカスタマイズでは下記の項目について行いました。
- アイキャッチ画像とタイトル（説明）の表示位置の入れ替え
- アイキャッチ画像のサイズ調整
- 各表示間隔調整
最後に
やはり自分的にはアイキャッチ画像が左側に表示されている方がバランス的に良い感じがします。
また、アイキャッチ画像のサイズ調整を行ったことで、スマートフォンなどのガジェットで表示した場合も窮屈感がだいぶ少なくなりました。
なお、WordPressテーマ THE THOR（ザ・トール）には元々サイドカラムにピックアップ記事を掲載する機能はありません。
サイドカラムにピックアップ記事を掲載したい場合は、エントリー記事「サイドカラムにピックアップ記事設置のカスタマイズ」をご参照下さい。
コメント