THE THOR ザ・トール サイトカードをカスタマイズ ショートコードの内部リンクを大きく表示

THE THOR はショートコードで内部リンクを表示できます。

便利で頻繁に使います。


    ショートコードが便利↓

ただ標準の見た目は地味です。さらりと表示するには良いですが単独でリンクをアピールするには少し弱いかなと感じます。

※あくまで個人的感想です。

THE THOR サイトカードをカスタマイズ

もともとのショートコードを使った内部リンクの表示は以下のようになります。

THOR サイトカード


後述のcssを適用すると以下のように見た目が変わります。

THOR サイトカードをカスタマイズ

 

※サイズの関係でPC表示のときは標準のデザインでスマホ表示のみデザインを変更しています。
※当サイトではアイキャッチ画像のサイズを16:9で設定しています。

css サイトカードをカスタマイズ

カスタマイズはcssを使います。コピペでokです。

※アイキャッチ画像が16:9以外の場合は変更が必要になります。
※カスタマイズは自己責任でお願いします。

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

追加するcssは以下の通り。

/* 内部リンクカスタマイズ */
@media only screen and (max-width: 480px){
.content .sitecard {
    position: relative;
    border: none; 
    padding: 0;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 2px 6px #ccc;
    display: flex;
    flex-direction: column;
}
.content .sitecard__subtitle {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 0px;
    text-align: center;
    background: #af1a1a;
    font-size: 1.2rem;
    order: 1;
    color: #ffffff;
    font-weight: 600;
    letter-spacing:0.5rem;
    padding-right: 0.5rem;
}
.content .sitecard__contents {
    clear: both;
    width: 100%;
    max-width: calc(100% - 30px);
    margin:.5em 1em .5em ;
    order: 3;
}
.content .sitecard .eyecatch {
    clear: both;
    width: 100%;
    padding: 0;
    margin: 0;
    order: 2;
}
.eyecatch-11:before {
    padding-top: 56.25%;
}
}

以上です。

内部リンクのパーツを並び変える

追加したcssのorderという部分の数値を変更すると並び順を変更することができます。好みで変えてみてください。

  1. 一言コメント
  2. アイキャッチ画像
  3. 記事タイトル

というように並んでいます。上から数値1-2-3となっています。数値を変更すると一言コメントを真ん中にしたり、アイキャッチを一番最後にしたりすることができます。

※変更する場合は必ず全ての数値を変更・使用してください。

アイキャッチが一番下でも面白いな〜と思いました。装飾も変更すれば自分だけのサイトカードが完成します。

あとがき

見た目を変更して回遊率が上がったということは当サイトでは起きませんでした。あくまで自己満足なカスタマイズです。新着記事などのデザインと合わせてあるので本人的には大満足です。

THE THOR サイトカードをカスタマイズ
呟くのよ・・・私の棒ストが