デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8サムネイル画像を大きくして、スマホのレイアウト調整してみた。 [WordPress]

投稿日:

Stinger8のサムネイル画像のサイズは、100×100pxと小さくアイキャッチとしてはちょっと弱いので少し大きくしてみました。
そのままだとスマホのレイアウトが崩れてしまうのでそちらも調整。


今回はいじるのは、style.css、itiran.php、kanren.php。
あと、Wordpressの管理画面からも設定が必要。
おまけでsidebar.php。

コピペで使えますが、子テーマ内のファイルをカスタマイズしましょう。

目次

  1. サムネイルの画像を大きくする。
  2. 「NO IMAGE」の設定。
  3. スマホのレイアウト調整。
  4. おまけ
  5. まとめ

サムネイルの画像を大きくする。

今回サムネイル画像のサイズを大きくしたのは、トップページ、カテゴリー、タグ一覧表示と記事下の関連記事。
対象はメイン(st-aside)側のサムネイル画像です。右カラム(#side)のサムネイル画像はそのまま

サムネイルサイズの大小の基準は「抜粋文」の有無

スマホで見たときにサムネイル画像と抜粋文が横並びにあると改行が多くて読みずらい

右カラムの新着はサムネイル画像と記事タイトルだけなので横並びにしてもおかしくはない。

それにPCの場合は、メインと右カラムでメリハリつけないとアイキャッチの意味がボケてしまうので、右カラム側はそのままにしています。

作業の考え方は、全体のサムネイルを大きくして、右カラムのサムネイルを小さくする。です。

サムネイルサイズは「width: 200px」のアスペクト比は「16:9」にしてみました。

style.cssに追加。

[crayon-5f678ff6c9b80764257128/]

サムネイル生成サイズを変更。

サムネイル生成サイズの変更を管理画面から行います。

設定 > メディア

サムネイルのサイズを150pxから300pxに変更

サムネイルの設定はこれで終了。

注意
過去記事でサムネイルを設定しているものは150×150pxで登録されているので、一度削除し再登録が必要となります。
そうしないと解像度が荒くボケた感じになってしまうので、要注意です。

「NO IMAGE」の設定。

「NO IMAGE」の作成。

上記「注意」同様、デフォルトの「NO IMAGE」画像のサイズは150×150pxしかないので、300×300pxで新たに作成し画像をアップロードします。

itiran.php、kanren.phpを修正。

「itiran.php」と「kanren.php」にある以下の部分を

[crayon-5f678ff6c9b89788795533/]

先ほどアップした「NO IMAGE」画像のURLに書き換えます。

[crayon-5f678ff6c9b8c109778038/]

「NO IMAGE」の設定はこれで終了。

スマホのレイアウト調整。

サムネイルの表示サイズが200×113pxなのに対して、サムネイル生成の設定を300pxにしたり、「NO IMAGE」のサイズを300×300pxで設定してきたかというと、スマホのレイアウトを縦にする場合、サムネイルの表示サイズを300×169pxにしたかったので、サムネイルサイズが300px必要だったわけです。

style.cssに追加。

スマホ設定の箇所に以下を追加。

[crayon-5f678ff6c9b8d244643233/]

おまけ

トップページ右カラムの新着はメインの一覧とかぶるので、トップページだけ右カラムから新着を外しました。

sidebar.phpに追記。

11行目あたりにあります。

[crayon-5f678ff6c9b90122067563/]

これをこんな感じに。

[crayon-5f678ff6c9b91447146997/]

まとめ

今回のカスタマイズは、PC版のサムネイルを大きくすることもあったんですけど、スマホ版でのレイアウト調整のほうが比重は大きかったかな。

スマホでの閲覧率は高いので、今後もスマホの閲覧のしやすさは意識していきたい。

それと今回サムネイルのサイズを300×300pxにしたことで、PCの一覧表示をスマホと同じように縦レイアウトにするのも容易にできるのではないかと。

それはまたの機会に。

スポンサーリンク

-WordPress
-, , , ,

関連記事

no image

STINGER8の執筆者とコメントを非表示にしてみた。 [WordPress]

スパムが多いので、コメント欄を非表示にしてみた。 STINGER5は、CSSで非表示にできたんですけど、STINGER8はPHPをいじります。 single.php にある [crayon-5f678 …

no image

Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 [crayon-5f678ff6d6f8c0231 …

no image

Stinger8よく使う「h」タグを装飾してみた。 [WordPress]

ブログを書く上で、よく使うタグの一つが「h」タグではないでしょうか。 なので、カスタマイズしたくもなります。 デフォルトだとこんな感じです。 今回手を入れたのは、「h2」タグと「h3」タグ。 「h4」 …

ソネブロからワードプレスへ。

So-netで「デジモノ大好き」をやっていましたが、ワードプレスで再出発です。 何かと話題のSTINGER。 アフィリエイター向けの無料テーマとして有名ですが、さらにアフィリエイトに特化したAFFIN …

no image

STINGER8の幅を広げてみた。 [WordPress]

記事下広告のAdsenceをダブルレクタングルにしたかったので気持ち幅を広げてみました。 ただ単に広げればいいってもんでもないので、世間一般的なモニター解像度から目標となる幅を決めてみました。 国内に …