サイト運営

XeoryBaseで記事内アイキャッチ画像の横幅を全体に広げる方法【wordpress】

0.はじめに

当ブログの外観としてXeoryBaseというテーマを使用しています。
無料で優秀なテーマとして知られていますが、
カスタマイズを必要とするシーンも多々あります。

今回は、最近施したアイキャッチ画像のサイズ変更について取り上げます。
通常だと記事内の右側に縮小表示され、扱いにくい感じになってしまう問題の対処です。
ブログ趣旨とズレますが、誰かの役に立てるかなと思い投稿してみます。

1.手順1 – single.phpを編集

テーマファイルエディターを表示してください。

左メニューからテーマファイルエディタを開く

single.phpを開き、
the_post_thumbnail()の()内を‘full’に変更してください。

single.phpを編集する

これで、アイキャッチのサイズがフルサイズになります。

他のサイズにしたい場合、下記を参照して()内を変更してみてください。

‘thumbnail’ : 150px × 150px
‘medium’    : 300px × 300px
‘large’    : 640px × 640px
‘full’    : 画像の元サイズ
array(n,n)   : 任意のn×nのサイズ
参照:テンプレートタグ the post thumbnail

2.手順2 – style.cssを編集

手順1だけでも画像のサイズは大きくなりますが、
アイキャッチ画像の左端に微妙な隙間があります。
これを削除するには、style.cssを変更します。

style.cssの、.post-thumbnailのargin-leftの指定を/*と:/で囲ってください。
もしくは削除してもOKです。

cssで.post-thumbnailのmargin-leftを無効化する

これで左端の余白も無くなりました。2023年2月現在の当サイト各記事と同じ設定になります。
尚、アイキャッチの下部にも実は余白が設定されています。
これを削除したい場合、margin-bottomも上記と同様の方法で無効化してください。

3.さいごに

phpには馴染みがありませんが、普段からプログラムを書いているからか
思っていたよりスムーズに変更できました。
またやっている事の意味が分かるので、不安も少ないですね。
こういうところでも、プログラミングを学ぶことのメリットを感じます。

wordpress初心者の方も、プログラミング初心者の方も
GAS等で簡単なwebアプリを作成できるところまで理解していると世界が変わります。
webの構造が何となく分かっている状態って結構強いんですよね。
興味があれば、ぜひ学習してみてくださいね。

運営者情報

こんにちは。泥まみれです。泥くさくやってきました。

 

心構え

このサイトでは、自身の経験を元に情報発信していきます。
主に間接部門の改善事例が中心になる予定です。

世の間接部門は守り過ぎている、そう思います。
みんな、もっと発信すればいいじゃないかと。

漏洩に気を付けつつ情報発信して、繋がって、みんなで仕事できる奴になればいい。
そうして間接部門自体の価値を高めていけばいい。
間接部門も発信してライティング力や経営者マインドや収益まで自分のものにすればいい。

改善事例を検索しても全然出てこないならその風土を自分で変えればいい。
情報を出したって営業情報じゃないから競合他社の競争力が上がるわけじゃありません。
コスト改善したら利益は上がるけど。守らず高めあった方が価値が高い。

そう思うので、発信します。

私の発信は少々プログラミング分野に偏るとは思いますが、
どれも間接部門の改善に繋がるものです。
私を改善人間に育ててくれた、間接部門に関連する発信の土壌を社会に少しでも作れたらと思います。

 

経歴

  • 関西で就職。昭和臭の強い会社で新卒間接部門。約5年。
    日々役員に怒鳴られ様々な症状が出て入社後すぐ独立を目標にする。
    人が辞めまくった影響で2年ほどで管轄の全業務をマスターする。
  • 東京で個人事業。物販とメディア。約半年。
    物販を仕組化し余った時間でブログやメルマガを書きまくる日々。
    先行きが見えない状況に限界を感じてやめる。鬱になりかける。
  • 東京でバックオフィスマネジメント。
    効率化や改善ノウハウを活かしていたらマネージャーになっていたが、
    マネジメントに興味が湧かないこと、得られるスキルがもう無いことから職転換。
  • 現在、バックオフィス担当の社内SE。30代前半の男性。
    GAS、BigQuery、C#、Javascript、JQueryあたりが中心。

 

その他

一緒に仕事がしたい、絡んでみたい等々思っていただけた方は
Twitter等でお声がけください。あんまり触ってませんが、お気軽に。

https://twitter.com/backoffice_imp
ラフなのもゴリゴリに相乗効果を狙ってるのも両方好きです。