THE THOR のサイトカード（サイト内の関連記事リンク）とブログカード（外部リンク）が大きすぎてあまり好みじゃなかったので、シュッとさせてみました。
記事抜粋を非表示にして、PCから見た時は幅70％の大きさに、それ以下の画面サイズの端末から見た時は幅100％（デフォルトと同じ幅）で表示させています。
もくじ
実装するとこんな感じになります
サイトカード
関連記事
THE THOR の見出し・ボックス・ボタン等、記事部分で使用するパーツは、親テーマの CSS で指定されているスタイルを組み合わせて適用するようになっています。ビジュアルエディタも少し触ってみたのですが、思い通りのデザインにするのがな[…]
ブログカード
カスタマイズする方法
WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
に以下のCSSをコピペしてください。
サイトカード（サイト内関連記事リンク）
style-user.css
.content .sitecard__contents .phrase {
display: none;
}
.content .sitecard__subtitle {
font-size: 1rem;
padding: 2px 10px;
}
.content .sitecard__contents {
margin-top: 2rem;
}
.content .sitecard .eyecatch {
margin-top: 0;
max-width: 120px;
}
.content .sitecard {
padding: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
border-radius: 2px;
}
.heading-secondary a {
font-size: 1.5rem;
}
@media only screen and (min-width: 992px){
.content .sitecard {
max-width: 70%;
margin: 2rem auto;
}
}ブログカード（外部リンク）
style-user.css
.content .blogcard__contents .phrase {
display: none;
}
.content .blogcard__subtitle {
font-size: 1rem;
padding: 2px 10px;
}
.content .blogcard__contents {
margin-top: 2rem;
}
.content .blogcard .eyecatch {
margin-top: 0;
max-width: 120px;
}
.content .blogcard {
padding: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
border-radius: 2px;
}
.heading-secondary a {
font-size: 1.5rem;
}
@media only screen and (min-width: 992px){
.content .blogcard {
max-width: 70%;
margin: 2rem auto;
}
}両方まとめて
style-user.css
.content .blogcard__contents .phrase, .content .sitecard__contents .phrase {
display: none;
}
.content .blogcard__subtitle, .content .sitecard__subtitle {
font-size: 1rem;
padding: 2px 10px;
}
.content .blogcard__contents, .content .sitecard__contents {
margin-top: 2rem;
}
.content .blogcard .eyecatch, .content .sitecard .eyecatch {
margin-top: 0;
max-width: 120px;
}
.content .blogcard, .content .sitecard {
padding: 10px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
border-radius: 2px;
}
.heading-secondary a {
font-size: 1.5rem;
}
@media only screen and (min-width: 992px){
.content .blogcard, .content .sitecard {
max-width: 70%;
margin: 2rem auto;
}
}