注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

THE THOR(ザ・トール)「いい加減、ブログカードのプラグインなんていやだ😖」と思ったときにおすすめの方法

サイトに来てくださった方には、折角だし他の記事も見て欲しいですよね。サイトの滞在時間を長くしてもらう為に、下記の対策を考えました。

looks_one サイドバーに「同じカテゴリーの記事」を表示
looks_two 記事の終わりに「同じタグの記事」を表示

そして、もうひとつ加えたいのがコレ!

looks_3 特に見て欲しい記事は ブログカード で表示
ブログカードとは、リンク先のアイキャッチ画像や、タイトル、内容の一部をカード形式で表示したものです。

 

ブログカードのプラグインはサイトが重くなるので、辞めました。
THE THORのブログカード機能は格好良い⭐のですが、テーマを変えた時の事を考えて機能は使わずに、テキストリンクにしていましたが、、、コロナで家に閉じこもっているので今回は勉強がてら、funtion.phpとCSSを使う方法(プラグイン無し)で設置してみようかな~と思います。
ブログカードを自作
クリックで拡大

これがTHE THORで用意されているブログカード機能です。こういうのが自作できればいいのだけれど。

内部リンクのブログカードを探す旅、始まり~。ちなみにWordPress独自のブログカードは800px × 800pxの大きなものになります。何故かデカイ。

ブログカードを探す旅

スポンサーリンク

理想はこんな感じ。

looks_one 余白を少なく、コンパクトにしたい
looks_two 画像はアイキャッチの比率のまま(正方形に切り取られない)

あれ・・・すんなりいかない

「プラグイン無し!コピペでOK!」で検索すると結構出てきます。「理想に近い表示を探して、後からCSSで微調整でいいっか♪」と思ってたけれど、微調整出来ない位ズレてしまうものが多数で上手くいきません😢💧

ようやく、6個目位のサイトで理想に近い表示に出会いました。参考にしたのは「 プラグインなしでブログカードを作る方法」。実はこの下の画像からふきだしが出るCSSもこの方を参考にしました。神か!

設置直後の様子

ブログカードを自作

PC表示。下の余白は気になるけれどいい感じ。

ブログカードを自作

携帯表示。いろいろな所の余白が気になる。抜粋を取ろうかしら。

改造した所

一日がかりで頑張った割には、これだけしか変えてないのが自分でも驚きますw。
※ソースコードは魔改造過ぎて載せるのを自粛しました。

CSS

looks_one 「詳細を見る」の表示から「関連記事」に変更。
looks_two 関連記事の場所をタイトルの前に移動。※blog-card-title:before
looks_3 PC表示だと抜粋を取った余白が寂しいので右下に画像を設置w。
looks_4 marginpaddingで位置を微調整。

funtion.php

looks_one 抜粋の行を削除しました。
looks_two リンクを新しいウインドウで開く様にしました。※target="new"を追加。
素人はfuntion.phpをいじっちゃ駄目なんだろうけど大胆に改造(笑)。

完成系(でも仮)

余白は少ないし、画像の表示も良いわね。
どの端末から見てもほぼ同じ見た目になりました🎵

オリジナルブログカード
クリックで拡大 866 X 233

実際のブログカードです

[nlink url="リンク先のURL"]を入力するだけで、ブログカードが表示されます。

みんなも作ってみて!CSSをいじるのは楽しい作業でした。最後に実際にその端末を持っていなくても表示を確認できる方法があるのでご紹介いたします。私的には「iPad」が鬼門なので良くチェックしてます。実際はタブレットなのに表示はPC。画面は小さい。いつも表示がおかしくなります💧

色々な端末からの表示の確認方法

WindowsのChromeブラウザでは、デベロッパーツールで色々な端末からの表示が確認できます。more_vert右上の三点ボッチ その他のツール デベロッパーツール

デベロッパーツールで色々な端末からの表示が確認できます
クリックで拡大 845 X 566

携帯とタブレットの絵文字ボタンをクリック。

Responsive横の三角マークをクリック。表示を確認したい端末が選べます。

0