THE THOR では 内部リンク をカード形式で表示するサイトカードという機能があります。
サイトカードは記事内にショートコードを使い表示します。
THE THOR 公式SEOに強く上位表示されやすい THE THOR
サイトカードの使い方
使い方は簡単です。
ビジュアルエディタのメニュー → ショートコード → サイトカード
- メニューのショートコードからサイトカード(内部記事リンク)を選ぶ
- 出てきたショートコードのurl=のあとにリンクしたい記事のURL
- 関連記事の部分を変更するとサイトカードのタイトルが変更可能
- target=のあとにselfを入力すると現在のタブでリンクを表示。blankを入力すると新しいタブでリンクを表示します。
targetは未入力で現在のタブでリンクを開く(self)になるので内部リンクの場合は基本的に未入力でOK
例. sitecard subtitle=こちらもオススメ url=リンクのURL target=
THE THOR サイトカードをカスタマイズ
標準の見た目はシンプルです。
さらりと表示するには良いですが単独でリンクをアピールするには少し弱いと感じたので派手にしました。
※当サイトのデザインは頻繁に変更しています。
※PC表示のときは標準のデザインでスマホ表示のみデザインを変更。
もともとのショートコードを使った内部リンクの表示は以下のようになります。
後述のcssを適用すると以下のように見た目が変わります。
サイトカードをカスタマイズする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となっています。数値を変更すると一言コメントを真ん中にしたり、アイキャッチを一番最後にしたりすることができます。
※変更する場合は必ず全ての数値を変更・使用してください。
アイキャッチが一番下でも面白いな〜と思いました。装飾も変更すれば自分だけのサイトカードが完成します。
あとがき
見た目を変更して回遊率が上がったということは当サイトでは起きませんでした。あくまで自己満足なカスタマイズです。新着記事などのデザインと合わせてあるので本人的には大満足です。