customizeWordPressテーマのカスタマイズ
WordPressテーマのカスタマイズ

Xeory Baseのアイキャッチ画像のサイズを変更する

こちらの記事は2015年5月ごろに試した情報です。
現在では間違っている可能性がございます。
(記事のアップ日が年末になっているのは、別のブログから移転した関係です)
大変恐縮ですが、ご了承いただけますと幸いです。

xeorybase-eyecatch01
Xeoryで直面するこんな悩み……。
「もうすこしアイキャッチ画像、大きくならないかな……」

アイキャッチ画像(メイン画像)が、微妙なサイズ

Xeoryのアイキャッチ画像。
バズ部は確かにこのサイズで運用していますが、個人的に微妙。
大きく感じても、コンテンツ幅いっぱいにしたいと思ったので、カスタマイズしてみました。

表示位置を変更(single.php)

この部分を

の下に移動。

/xeory_base/lib/functions/setting.php 24行目

のサイズを変更。

/xeory_base/lib/functions/setting.phpは、テーマの編集からは編集できません。
FTPソフト、または、サーバーのFTPツールを使ってサーバーにアクセスしてくださいませ。
/WordPressのディレクトリ/wp-content/themes/xeory_base/lib/function/の中にございます。

style.css

.post-thumbnail にかかっているfloat:right;を削除。ついでにmargin-leftも0に。
.post-title の margin-bottomを10px;に。

base.cssに書いてあってややっこしいので、style.cssの一番下に追加しています。

サムネイルをリサイズする

ここまで編集しても、悲しいことに見た目が変わりません……。
一度アップされた画像のサムネイルのサイズは、再アップしないと変わらないんです。

そこで、「Regenerate Thumbnails」というプラグインをインストールします。

Regenerate Thumbnails

有効化すると、ツールに「Regen. Thumbnails」が登場します。

Regenerate Thumbnails02

「すべてのサムネイルを再生成する」ボタンをクリック。

Regenerate Thumbnails03

しばらく待つと……リサイズが完了します。

Regenerate Thumbnails04

サムネイルのサイズをリサイズしたら完了です。

完成!

xeory-base-eyecatch-finish
Category : WordPressテーマのカスタマイズ

この記事がお気に召したら「いいね!」していただけると励みになります。

最新情報をお届けします

コメント

  1. ヨッシー より:

    質問よろしいでしょうか?
    記事の通りに編集を行ったのですが、以下の2点が上手くいきません。
    ・タイトルの上にアイキャッチ画像が表示されてしまう。
    ・アイキャッチ画像のサイズが小さいまま。
    ど素人なので、ミスがあったのかもしれませんが修正方法を教えてくださると助かります。

    • ルコ より:

      ヨッシーさん

      はじめまして。ご質問ありがとうございます。コメントに気づくのが遅くなってしまって申し訳ございません。

      (1)タイトルの上にアイキャッチ画像が表示されてしまう
      こちら、失礼いたしました! 私の書いていた移動位置がタイトルの上になっていたためでした。
      大変お手数ですが、タイトルの下に移動していただいてもよろしいでしょうか?

      (2)は、アイキャッチ画像を「Regenerate Thumbnails」というプラグインを使って再構築していただくと、大きくなるかと存じます。
      参考:http://netaone.com/wp/regenerate-thumbnails/

      記事に追記しておきましたので、お試しいただけますと幸いです。
      どうぞよろしく御願いいたします!

  2. のり より:

    わかり易いサイトで参考にさせていただいております。
    1つ質問がありまして、コメントさせて頂きます。
    私もxeory baseをしようしているのですが、スマホのトップページの表示をカスタマイズしたいと考えております。
    トップページには300px×100pxくらいの大きさで、画像は100px×100pxのものを左側もしくは右側に配置するイメージで余白にタイトルを表示させた投稿記事を並べたいと考えております。
    というのもスマホだと画面が小さく、記事のタイトルがスクロールしないと見えない状態だからです。
    スクロールさせずに投稿記事のタイトルをいくつか見せるようなページにしたいのですが、どうすれば良いのか全くわかりません。
    もしよろしければ、アドバイスをいただけませんでしょうか。宜しくお願い致します。

  3. 通りすがり より:

    /xeory_base/lib/functions/setting.phpをいじってしまうと更新時に改めて直さないといけない。

    子テーマのsingle.phpに

    などとして呼び出したほうが汎用的なのでは。

  4. 通りすがり より:

    コードが消えてしまうようなので再投稿。

    /xeory_base/lib/functions/setting.phpをいじってしまうと更新時に改めて直さないといけない。

    子テーマのsingle.phpに
    the_post_thumbnail(‘full’);
    などとして呼び出したほうが汎用的なのでは。

    • ルコ より:

      通りすがりさん

      コメントありがとうございました!! 
      とても参考になりました。

  5. 通りすがり2 より:

    こんにちは、こちらの記事を参考にcssやphpをいじってみたのですが、記事の上部右上に、サムネイルがそのまま変わらず表示されて、しかも、今度はサムネイルと記事がダブっちゃってますね。

    設定方法が悪いのか、こちらの記事が間違っているのか・・・

    • 丸山 るこ より:

      通りすがり2さん

      コメントありがとうございます!
      実際にカスタマイズしていたのが2年ほど前だったので、最新のXeoryBaseではうまくいかない可能性がございます。
      せっかく試していただいたのに、お手間をとらせてしまい大変申し訳ありませんでした。

      こちらの記事には、一番上に注意書きを書いておくようにいたします。(余力が出たらまた試してみます)

ブログ一覧へ