THE THORの「ピックアップ3記事」がPCから見た時に大きすぎるので、3記事が同じサイズで横並びになるようにカスタマイズしてみました。
実装するとこんな感じになります
当サイトのピックアップ3記事はこんな感じ。これから紹介するカスタマイズに加え、「PICK UP!」というタイトル部分の背景も消してコンパクトにしています。
iPad 以上の画面サイズの端末から見た時には同サイズの3記事が横並びに、それ以下の画面サイズで見た時にはデフォルトと同じレイアウトになります。
カスタマイズする方法
編集するファイル
子テーマの「style-user.css」にコピペするだけです。
WordPress ＞ 外観 ＞ テーマの編集 から編集できます。
追加するCSS
style-user.css
@media only screen and (min-width: 768px){
.pickup3__item-first {
width: calc(33.3% - 40px);
margin-right: 20px;
margin-left: 20px;
}
.pickup3__box {
width: 66%;
}
.pickup3__item-second, .pickup3__item-third {
width: calc(50% - 40px);
margin: 0 20px;
}
.pickup3__item-first .heading.heading-pickup3, .heading-pickup3 {
font-size: 100%;
padding: 10px 20px 20px;
}
.pickup3__item-first .eyecatch__cat a {
font-size: 1rem;
}
}アレンジ色々
タイトル部分の背景を消したり、スマホやタブレットから見た時のレイアウトを変更したい場合は、以下のCSSを上記のカスタマイズに追加してください。
背景を消してタイトルをセンタリングする
このままstyle-user.css に追記すると、タブレット・モバイルから見た時も背景が消えます。PCから見た時のみレイアウトを変更したい場合は、上のCSSの20行目の後に以下をコピペしてください。
「PICK UP」と補足部分の文字色を指定している所にはコメントが入っているので、サイトに合わせて変更してください。
style-user.css
.pickup3 {
text-align: center;
padding-top: 30px;
}
.pickup3__bg img {
display: none;
}
.pickup3 .pickup3__bg{
background-color: transparent;
}
.pickup3 h2.heading-main{
margin-bottom: 15px;
color: #191919;/*「PICK UP」部分の文字色*/
}
.pickup3 .heading-main span {
color: #ccc;/*「PICK UP」補足部分の文字色*/
}
/*記事タイトルも中央寄せしたい場合は以下を削除して下さい*/
h3.heading-pickup3{
text-align: left;
}PCから見た時だけ3記事横並びにしたい場合
iPadの縦画面で見た時はデフオルトのままの表示にしておきたいという方は、「追加するCSS」の1行目にあるメディアクエリを以下のように変更してください。（※メディアクエリは THE THOR で使われているブレイクポイントに合わせています）
style-user.css
@media only screen and (min-width: 992px){スマホから見た時は3記事縦並びにしたい場合
スマホから見た時に 2記事目・3記事目の大きさを幅100％にして縦に3記事並べたい場合は、以下のCSSを子テーマの「style-user.css」に追加してください。
記事カード間の余白を広げて、数字部分の大きさも少し大きくしてあります。
style-user.css
@media only screen and (max-width: 480px){
.pickup3__item-first{
margin-bottom:30px;
}
.pickup3__item-second, .pickup3__item-third {
width: 100%;
margin-bottom: 30px;
}
.pickup3__item:before {
font-size: 1.8rem;
height: 40px;
width: 40px;
line-height: 40px;
}
}