Twenty Seventeen アイキャッチ画像 表示位置の変更 と 表示/非表示を制御

WordPress Twenty Seventeen カスタマイズ
アイキャッチ画像 の 表示位置の変更
画像のサイズによって、表示/非表示を制御
 
Twenty Seventeen の アイキャッチ画像(画像サイズ 2200 x 1237 )は、記事ページ では下図のように表示される。画像サイズを調整しなければ、
①.メニューバーの直下に、余白もなく表示される。
②.サイドバーも含めて、横幅一杯まで表示される。
③.記事タイトルとの間に、余白が取られる。
と、アイキャッチ画像があまりにも目立ちすぎる。
 

アイキャッチ画像のカスタマイズ

そこで、アイキャッチ画像の
①.表示位置の変更。
②.画像のサイズによって、表示/非表示を制御。
してみた。以下に、その方法を記載。
 
スポンサー リンク
 
 
先ず、画像サイズを調整してみる。
 
画像サイズ 800 x 600 のアイキャッチ画像表示例
  
Twenty Sixteen の Eyecatch 画像
 
 
画像サイズ 128 x 96 のアイキャッチ画像表示例
  
記事画面でのアイキャッチ 小さい画像
 
いずれにせよ、アイキャッチ画像の表示には問題があるので、全面的に非表示にしたいところだが、記事一覧にはサムネイル画像を表示させたいので、各記事にはアイキャッチ画像の設定が必要となる。
 
記事一覧にはサムネイル画像は必須であるが、各記事の閲覧画面には、アイキャッチ画像を表示させたくない場合がある。
 ↓
そこで、表示/非表示を制御することにした。
 
 
1. 『header.php』でのアイキャッチ画像を非表示にする
 
まず最初に、親テーマの『header.php』を子テーマにコピーし、ヘッダーでのアイキャッチ画像の表示を止める。
 
「header.php」から次のサムネイル表示ルーティン(43行目から54行目)を削除。 
 
これで、アイキャッチ画像が非表示になった。
 
記事画面でのアイキャッチ 非表示
 
 
2. 『single.php』にアイキャッチ画像表示ルーティンを追記
 
次に、『single.php』にアイキャッチ画像表示ルーティンを追記する。この中に、画像のサイズによって処理を分岐し、横幅が 128px より大きければ表示、 128px 以下なら表示しない処理を組み込む。
Feedly にサムネイル画像を表示させるために、横幅が 450px より大きければ表示、 450px 以下なら表示しないに変更。(17行目)
 
追記位置の前後と、追記ルーティン。
 
このアイキャッチ画像表示ルーティンを適用すると、下図の位置にアイキャッチ画像が表示される。メニューバーとの間隔や記事タイトルとの間隔が気になる。
 
アイキャッチ画像のカスタマイズ
 
 
3. 『style.css』に追記
 
そこで、『style.css』に下記コードを追加し調整を行う。
 
上部の余白が狭まり、下部に間隔が生まれ、見栄えが良くなった。
 
アイキャッチ画像のカスタマイズ
 
次に、アイキャッチ画像にサイズが小さい画像を設定してみる。
 
アイキャッチ画像のカスタマイズ
 
サイズが 128 x 96 の画像を設定。
 
アイキャッチ画像のカスタマイズ
 
横幅のサイズが 128 以下の場合、表示されない。
 
アイキャッチ画像のカスタマイズ
 
これで、アイキャッチ画像を表示させる場合は、横幅のサイズが 128 より大きな画像を設定し、表示させたくない場合は、横幅のサイズが 128 以下の画像にすることで、表示/非表示を制御する事が出来るようになった。
 
 
4. フロントページ(最新の投稿)でのアイキャッチ画像の非表示
 
フロント(最新の投稿)画面でのアイキャッチ画像。
 
フロント画面でのアイキャッチ
 
アイキャッチ画像に、 小さい画像( 128 x 96 )を設定した場合のフロント画面。
 
フロント画面でのアイキャッチ 小さい画像
 
フロント(最新の投稿)画面でのアイキャッチ画像は、不要と思われるので非表示にする。
 
content.php の設置場所フロント画面のアイキャッチ画像を非表示にするには、親テーマの『template-parts』→『post』フォルダの中にある、『content.php』を子テーマにコピーし、アイキャッチ画像表示ルーティンを削除する。

 

 
『content.php』から、次のサムネイル表示ルーティン(44行目から50行目)を削除。
 
フロント画面でのアイキャッチ画像が、非表示になった。
 

フロント画面でのアイキャッチ 非表示

参考:Feedly にアイキャッチ画像を表示させる方法。
 

以上。
(2017.10.01)

 
             

スポンサー リンク
 

関連記事

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください