THE THOR(ザ・トール)ピックアップ3記事のカスタマイズ

THE THOR カスタマイズ

当サイトのキャッチ画像はカスタマイズで角を丸くしています。

THE THOR キャッチ画像の角を丸くする

あわせて読みたい

THE THOR プチカスタム キャッチ画像の角がトゲトゲしくて心を痛めていました。 繊細なからあげ棒です。 今回も簡単3分カスタマイズ! ※時間は個人差があります。 (adsbygoogle = window.adsb[…]

 

キャッチ画像を角丸にしたら一緒にピックアップ3記事の背景も角丸に統一しましょう。

※現在の当サイトではピックアップ3記事を採用していません。



ピックアップ3記事の背景を角丸にする

ピックアップ3記事カスタマイズ

追加CSSにコードを挿入します。

外観 → カスタマイズ → 追加CSS

 

挿入するコードは以下の通り。

/*ピックアップ記事角丸*/
.pickup3__item {
    border-radius: 8px;
}

数字が角丸の半径になるので大きくすると大きな角丸になります。今回は8pxでキャッチ画像の角丸と大きさをあわせました。

 

角丸の大きさはパーセンテージ(%)でも指定が可能

border-radius: 5%;

 

角ごとに丸みを変更することも可能

border-radius: 10px 20px 30px 40px;

左上、右上、右下、左下の順番です。どんな角丸ができるかは試してみてください。面白いカタチができますよ。

ピックアップ3記事について

当サイトではピックアップ3記事のうまい使い方が思いつかず採用していません。

ピックアップ3記事の役割

ピックアップというぐらいなので目立たせたい、読んでもらいたい、今が旬、というような記事をこの場所に表示するものだと思います。同じような役割のカルーセルスライダーを導入済みなので役割が被ってしまいます。

3記事ということでランキング的な役割もできると思いますが、それは別でランキング表示をしています。

どう使うのが正解なのか悩み中です。

しかし折角の機能ですし、カルーセルスライダーより目立つので導入したいとは思っています。その時はさらにカスタムして搭載したいと思います。


あとがき

使ってもいないのにカスタマイズしてみました。

のちのち本格的に使うであろうピックアップ3記事なのでキャッチ画像にあわせ角丸にしました。表示はしていませんが実装済みです。ピックアップ3記事のカスタマイズに関してはこちらの記事に追記して行く予定。

ちょこちょこカスタムしていくのでTHE THOR ユーザーのみなさん仲良くしてください!

THE THOR カスタマイズ