OceanWPの記事一覧ページで画像のサイズがバラバラにならないように設定を変える【カスタマイズを触るだけの簡単作業】

2 min 1,453 views
画像が大きすぎて記事一覧がおかしくなっている様子

当ブログでは記事内やヴィジェットに設置しているリンクの一部でアフィリエイト広告とGoogle AdSenseを利用しています。
管理人が得た収益はサーバー代・ドメイン代などにあてております。

OceanWPをこのブログで使っていたのは記事を書いた当時のことであり、現在はここでは違うテーマを使っています。OceanWPは違うブログで使っています。
デザイン面でうまくかみ合わない部分があり、かつて使っていたクラス指定などのCSSは一部外しています。

この記事の前に、文字サイズを変えた記事を書いたのですが
その記事にアイキャッチ画像を設定したところ、なんかすごい大きさでトップページに出てきました。

そういうデザインなのかなと思い、他の記事にもアイキャッチを設定してみることにしたのですが
なんとさらにとんでもない大きさになった画像が…

こちらがその様子です。

画像が大きすぎて記事一覧がおかしくなっている様子
画像が大きすぎて記事一覧がおかしくなっている様子2

実物よりも小さく表示されるカスタマイズ画面の、そこから該当部分と周辺だけ切り取って縮小表示させた画像でも伝わる気がするこの大きさ。
これではまた修正を終えるまで更新したくなくなってしまう…。

改善して数時間後でこれは嫌なので、即調整することにしました。

 

OceanWPの記事一覧ページで画像のサイズがバラバラにならないように設定を変える

これもカスタマイズから触るだけでいいので、プラグインなどを使わずとても簡単にできます。

    作業の手順
    1. 外観→カスタマイズ→ブログ→ブログ投稿リストと進む
    2. ブログスタイルを変更
    3. 選んだスタイルに応じて画像の位置などを変更する
    4. 動作確認

 

1.外観→カスタマイズ→ブログ→ブログ投稿リストと進む

ダッシュボードの左に出ているメニューから、この順番でクリックorタップしていきます。

 

2.ブログスタイルを変更

大きな画像・グリッド・サムネイルの3種類から選びます。
特に触ってない状態では大きな画像となっておりましたので、この症状で困っている方はたぶん大きな画像に設定されているかと思います。

 

3.選んだスタイルに応じて画像の位置などを変更する

ここからは、スタイルに応じて出てくる項目が変わります。

大きな画像が出てくるのを防ぐための調整ですので、
グリッドとサムネイルの2つに絞って見てみます。

 

グリッドの場合

画像が大きすぎておかしいので調整している様子1

画像サイズ・グリッドカラム・グリッドスタイル・ 記事抜粋の長さ・ページ送りを調整できます。
このほか、タイトルなどの要素やカテゴリ名などメタ情報の表示させる・しないを選ぶこともできます。
ここまで設定してる理由であるアイキャッチをそもそも表示させないことも可能です。

グリッドスタイルをレンガ積みにすると、なにも考えてないこの状態ではひどい崩れ方をしたので
おしゃれにカスタマイズできる方向けのカスタマイズかと。

画像が大きすぎて表示がおかしくなっている様子を調整しているところ

見た目を整える目的での調整なら、グリッドスタイルの下にある【同一の高さ】にチェックを入れるといいです。
画像のように高さが違うグリッドを、長いほうに合わせて自動で調整してくれます。

 

サムネイルの場合

画像が大きすぎて表示がおかしいので調整している様子2

画像の位置(左・右)・垂直位置(上・中央・下)・画像の幅・画像の高さを調整できます。
カテゴリやコメントなどの文字色・記事抜粋の長さ・ページ送りスタイルも変えられます。

垂直位置というのが聞き慣れない言葉ですが、
この画像を上寄り・中央・下寄りのどこで表示させるかどうかの調整です。

 

4.動作確認

カスタマイズ画面だけではなく、通常画面からも表示が戻ってるかどうか確認します。

 

終わりに

最初に1記事だけアイキャッチ設定した時には「そういうデザインなのかな?」と思いましたが
そうではないと気付いた時は焦りました…。
プラグインやCSSなど、難しいことをせずにカスタマイズのみで統一できてよかったです。

やり方を知って覚えるまでが大変ですが、1つ1つやっていけばどうにかなるうちは使ってみます。
何かした時には、またこうしてやり方をまとめますね。

雪夏

雪夏

名前:真凛 雪夏(まりん せつか)
V系が好きで、千葉ロッテマリーンズとキミ・ライコネンを応援している
それなりの年齢の、趣味:ゲームとブログな人間。

カテゴリー:
タグ:
関連記事

2 件のコメント

  1. 初めまして!オーシャンWPでサイトを作成しているのですが、
    ブログリストがグリッド、などそれぞれで設定しても
    3記事までしかリストに表示されず残り以降の記事は、ページ送りで飛ばないといけません、、、
    3記事以上ブログリストで表示させることは可能でしょうか?

    • >通りすがりさん
      コメントありがとうございます。返信が遅くなってしまいすみません。

      テーマ側ではなくwordpress側の設定で、「設定→表示設定→1ページに表示する最大投稿数」は確認済みでしょうか?
      ここの数字を『3』に変更していたら
      テーマのカスタマイズで「ブログ→ブログ投稿リスト」からグリッドなどの表示タイプを変更しても3記事しか表示されない、通りすがりさんと同じ状況になりましたので
      「1ページに表示する最大投稿数」の数字を変えてみると表示できるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です