WPtouchの関連記事でサムネイル画像の横にタイトル文字を表示する

目安時間:約 6分
  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング
IMG_0294

IMG_0294

ワードプレスに「WPtouch」を導入している人は、
「Similar Posts」を使って
関連記事を表示させている人も多いと思います。

関連記事を表示させた方が、ページビューや滞在時間が上がって、
ブログの評価を上げる事にもつながりますよね。

今回はイマイチ画像とタイトルが、
綺麗に表示されない時の対処法について書いてみました。

 

WPtouchの関連記事の表示を変えるには?

 

ブログの滞在時間やPVを延ばすために、
スマホの関連記事を表示させたはいいのですが、

下記のように画像の下に文字が来てしまい、
見にくくなってしまう場合もあると思います。

kanre3

 

どうせならこんな感じで、

IMG_0294

画像の横に表示させた方が、
スペースを無駄にしなくて済みますよね。

 

こう言う場合は、

サムネイル(アイキャッチ)画像の大きさや、
タイトルや説明文の文字の大きさを変える

事で、表示を改善する事が出来ます。

上の画像の場合はタイトルと説明文の文字が大きいので、
文字の大きさを改善していくと、見やすくなります。

 

タイトルや説明文の文字の大きさを変える

 

それではタイトルや説明文の文字の大きさを、変えて行きたいと思います。

まずは自分のサーバーにある、

wp-content/plugins/wptouch/themes/bauhaus/default/style.css

を開いて、そのページの一番下に下記のコードを貼り付けます。

 

 

.wp-post-image {
border:solid 1px #ccc;
padding: 4px;
float: left;
margin-right: 5px;
/*      vertical-align: text-top; */
}
.similar_posts {
padding: 3px;
margin-top: 3px;
margin-left: 0px;
}
.similar_posts_title {
margin:2px;
font-size: 14px; /* テキストリンクのサイズ */
}
.similar_posts_snippet {
margin:2px auto;
font-size: 12px; /* 抜粋文字のサイズ */
color: #0f0f0f; /* 抜粋文字の色 */
}

 

このコードのテキストリンクのサイズ(上のコードは14px)
の部分を変えるとタイトルの文字サイズが、

日本語で抜粋文字のサイズ(上のコードでは12px)
の文字を変えると、説明文の文字サイズが変更できます。

適当な大きさに変えたあとは、いったん「デスクトップに保存」してから、
もう一度「サーバーの同じ場所にアップロード」して上書きします。

これで何度か文字数を変えて、調整してみてください。

 

最初の画像では、両方とも10pxに修正してみたところ、
画像の横に、きれいにタイトルと説明文が表示されるようになりました。

kanre4

 

サムネイル(アイキャッチ)画像の大きさを変える場合

 

次にサムネイル画像の大きさを変えて、調整する場合です。

WPtouchに関連記事を表示させている人は、
「Similar Posts 」→「Output template」の中に、
下記のようなコードを入れていると思います。

kanre

 

<div>
<a href="{url}">
{php: echo get_the_post_thumbnail( {postid}, array(80,80), array('title' => ' {title}' )); }</a>
<div>
<a href="{url}">{title} </a></div>
<p>{snippet:60}…</p>
</div>
<div style="clear: both"></div>

 

このコードのarray(80,80)の部分を変更すると、
画像の大きさを変える事が出来ます。

(60,60)、(100,100)などに変更してみてください。

 

それでも画像の大きさが変更されない場合は、
ワードプレス画面の「設定」→「メディア」から、
「サムネイル画像のサイズ」を変更してみてください。

kanre1

 

これで画像の大きさも変更できると思います。

以上になります、ぜひ参考にしてみて下さい。

  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

この記事に関連する記事一覧

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 
おすすめ商材

プロフィール:ユウキ

アドセンスを使ったアフィリエイトで主に稼いでいます。
トレンドアフィリで初めて月収10万円を突破。

その後は特化型やブロガー的なブログなど、さまざまな方法を実践中。
物販や情報商材もやってますが、主にアドセンスのノウハウをこのブログでは書いてます。
詳しいプロフィールはこちらをご覧ください。

カテゴリー
人気ブログランキング

ページの先頭へ