テーマを一新してリニューアルOPENです!これからも、よろしくお願い致します。

ブログカードの不満解消!リンク表示にこだわる

サイトカードの画像比率を変える

 

Masayoshi大ブログカードとは、内部リンクや外部リンクを画像付きで表示するカード状の表示です。リンク先のタイトルと、内容抜粋、画像にはアイキャッチ画像が使われます。

特に内部リンクは、訪問者にサイト内回遊を即し、長く滞在してもらう為のものなので、表示状態や内容にこだわりを持ちたいところです。

ブログカード(内部リンク)は、wordpressの標準機能として存在するものと、テーマで用意されているものもあり、THE THORでは、

  • 内部リンク用:サイトカード
  • 外部リンク用:ブログカード

という呼び方で分けて用意されています。

使い方は、どれも簡単なのですが、表示状態や記載内容にいろいろと不満があります。
不満点の共有と、解決出来た内容の紹介です。

 

wordpress標準内部リンクブログカード

まずは、wordpress標準機能の内部リンクブログカードから見ていきます。

表示の方法

wordpressでは、内部リンクのURLを記事内に入れるだけで、以下の様なブログカードが出来ます。

https://satopi72.com/resize-power-point-sheet/ ←この様に内部リンクURLを入れると・・・

簡単ですね。(↓キャプチャー画像です)

wordpress標準サイトカード

不満なところ

見ての通り、とても大きく表示されます。しかもサムネイル画像を使っているので、画像が粗い。
かなり、残念な表示です。せめて大きさが調整出来ればと思うのですが・・・
この状態は誰が使うのでしょう?

Masayoshiたじたじ
Masayoshi
やたら大きくて、画像が粗く、このままでは使えないですね・・・

対策

対策として、子テーマのfanction.phpに以下のコードをいれると、

function set_thumbnail_image_shape() { return 'square'; } add_filter( 'embed_thumbnail_image_shape', 'set_thumbnail_image_shape' );
Masayoshiポイント
Masayoshi
↓結構良い感じになります。(キャプチャー画像です)

wordpressサイトカードカスタム

最初からこうして欲しいですね。

良いところ

  • 抜粋文が記事の上から数行を引き抜くのではなく、抜粋欄に記載したものが載る
  • 入力が非常に簡単。(内部リンクURLを貼るだけで表示される)

 

抜粋欄とは
抜粋欄とは、投稿編集画面の下の方に表示されるもので、枠内に記事の要約を書くと、トップページなどの記事紹介欄のコメント文に反映されます。
抜粋欄
※表示されない場合は、右上の「表示オプション」を開き、「抜粋」をチェックしましょう。
表示オプション

 

残念なところ

  • そんなに残念では無いのですが、THE THOR専用サイトカードより、1秒程度、表示が遅い

下記動画は、上段がwordpress標準、下段がTHE THORのサイトカードです。
投稿画面で記載した状態から、プレビューボタンを押して、表示が出るまでの比較です。
後半スロー再生が流れます。
スローで初めて分かったのですが、wordpress標準は、最初に文字が出て、その後図が出る、2段階表示であることが分かりました。
THE THORは、画面が表示された瞬間に表示されています。

 

  • モバイル表示でも、フルに全内容を表示する。

↓こんな感じ。全画面表示になってしまいます。

wpサイトカードスマホ表示

 

THE THORサイトカード・ブログカード

つづいて、THE THORのサイトカード・ブログカードです。基本的に使い方はどちらも同じなので、内部リンクのサイトカードで説明していきます。

表示の方法

投稿メニューにある「ショートコード」から、「サイトカード」を選ぶと、以下のようになり、

サイトカードのショートコード

 

「url=」の部分に内部リンク先のURLを入れます。

ショートコードにURLを入れた状態

 

↓こんな感じです。(キャプチャー画像です)

サイトカード表示状態

 

不満なところ

THE THORの場合、アイキャッチ画像の縦横比は、16:9がデフォルトです。

各記事のタイトル画像を16:9で作り、この画像をそのままアイキャッチ画像に指定しています。
タイトル画像には、タイトル文字を入れることが多く、16:9全域を使って表現するのですが、これが1:1の正方形に切り取られると、何の画像だか分からなくなることがあります。

比率の違い

 

Masayoshiため息
Masayoshi
トップページのアーカイブ記事一覧や、サイドバーに設定する最新記事などのアイキャッチ画像は、16:9が選べるのに、なぜか、サイトカードだけが、1:1固定という状態です。
Piko疑問
Piko
なんで16:9が選択出来ないのかなぁ?

対策

THE THORのサイトカード画像の縦横比を1:1から16:9に変更する方法です。
以下のコードを追加CSSにコピペして下さい。

/* サイトカードアイキャッチ */
.eyecatch:before {
display: block;
padding-top: 56.25%;
}
@media only screen and (min-width: 768px)
{.content .sitecard .eyecatch
{
width: calc(37% - 15px);
}}

@media only screen and (min-width: 768px)
{.content .sitecard__contents {
width: 63%;

}}

 

これで、16:9になったと思います。↓こんな感じです。(キャプチャー画像です)

THE THOR画像16:9に変更

 

このコードは、画像を16:9にして、横の抜粋文領域と画像領域の割合を調整しています。
(画像を少し大きくしています。)

コードの以下の数値を変えるとバランスを変えることが出来ます。
画像幅 : width・・・37%
抜粋文幅: width・・・63%

合わせて100%になるようにしています。

モバイル表示は↓こんな感じです。(キャプチャー画像です)

スマホ表示

良いところ

  • 表示がとても速い。
  • モバイル表示では、内容抜粋表示が消えて、コンパクト。
  • 画像にカーソルを合わせると、回転拡大表示する。
    外観⇒カスタマイズ⇒基本設定⇒アイキャッチ画像の設定⇒アイキャッチホバーエフェクトの設定から「マスクズーム回転」を選択

(キャプチャー画像です)

画像の回転拡大表示

 

残念なところ

  • 抜粋文が、記事の上から数行を引き抜いたものになる。(かなり残念)
Piko疑問
Piko
トップページのアーカイブ一覧表示では、抜粋欄に記載した文が載るのに、何故かサイトカードだけ、記事の上から引き抜かれています。この不思議な仕様は、バグでしょうか?
Masayoshiため息
Masayoshi
いろいろ試しましたが、残念ながら、抜粋文の読み込み先を変更することは、出来ませんでした。
今後のアップデートで直ることを期待します。

 

おまけ(枠の色変更)

THE THORのサイトカードは、枠の色変更も実施しています。
参考までに、コードは以下です。
同じく追加CSSにコピペでOKです。

サイトカード枠色変更

/*サイトカード(内部記事リンク)色変更*/

.content .sitecard {
border: 2px solid #b2384e;
}

.content .sitecard__subtitle{
color: #ffffff;
background-color: #b2384e;
}

◆コードの意味

  • border 枠線は2pxの実線で色は、#b2384e(えんじ色)
  • color サブタイトル「関連記事」の文字色は、#ffffff(白)
  • background-color サブタイトルの背景色は、#b2384e

 

ブログカード枠色変更

外部サイトリンク用の、ブログカードも同様に変更できます。

/*ブログカード(外部サイトリンク)色変更*/

.content .blogcard {
border: 2px solid #2000af;
}

.content .blogcard__subtitle{
color: #ffffff;
background-color: #2000af;
}

仕上がりは、↓こんな感じです。色は以下のサイトから選んでみてください。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

 

サブタイトルに隙間が出る件

モニターの表示設定とブラウザの表示倍率により、サブタイトルと枠線の間に隙間が出ることがあります。

  • モニターの表示設定:拡大縮小150%(推奨)、ディスプレイの解像度、両方が関係します。
  • ブラウザの表示倍率:通常100%だと思います。

これらは、訪問者のパソコンにより異なり、制御出来ません。
表示不具合例は、こんな↓感じです。

表示不具合例

 

色変更の注意点
隙間が出来る現象は、対処が出来ません。ある意味仕様です。
だから、色が目立たないグレーに固定されているのだと推測されます。
色を変えると、PC環境によっては、隙間が出ることを知っておいて下さい。

 

最近のフルHDノートPCで拡大150%(推奨)にして、Chromeで表示倍率100%で見る分には、隙間は出ないようです。
外付けディスプレイ(拡大率125%)で見ると、隙間が見えます(汗)。

 

まとめ

Masayoshi大wordpress標準と、THE TOHRのブログカードの不満と対策について紹介しました。
どちらを使うかは、実は今でも迷いがあります。悩ましいところです。

Before Afterのまとめは、タイトル画像になります。
右上か右下のどちらを選ぶか?

サイトカードの画像比率を変える

wordpress標準機能も捨てがたいのですが、

  • 表示速度が速い
  • モバイル表示がシンプル

を取って、今は、THE THORのサイトカードを使っています。
気が変わるかも知れませんが、しばらくは、これでいくつもりです。

最後までご覧頂きありがとうございました。

スポンサーリンク