twenty seventeen 「続きを読む」ボタンのサイズ(高さ)が合せられない

WordPress Twenty Seventeen
①.「続きを読む」ボタンのカスタマイズ:css【 entry-content 】の変更
②.検索結果一覧を表示するテンプレートについて
③.検索結果の表示=記事抜粋を表示する the_excerpt のカスタマイズ
④.コンテンツ抜粋表示のカスタマイズ:【 content-excerpt.php 】の変更
⑤.「 twentyseventeen-featured-image 」での画像の回り込み制御

 
トップページの記事一覧に表示される「続きを読む」ボタンのサイズ(高さ)と、検索結果に表示される該当記事一覧に表示される「続きを読む」ボタンのサイズが同じにならない。
コンテンツを【 ‘excerpt’ 】で表示させる css のクラスは【 entry-summary 】で、【 get_post_format() 】を使用して表示させる css のクラスは【 entry-content 】である、という表示させる css のクラスの違いが理解できた。

スポンサー リンク

 
検索結果の表示画面での問題点
 
検索結果の表示画面で、「続きを読む」ボタンが半分に欠ける。又、抜粋する文字数が少なければ、「続きを読む」ボタンすら表示されないという現象が発生する。
「続きを読む」ボタンが半分に欠ける
 
「続きを読む」ボタンは、トップページの表示に合わせて作成したので、トップページでは最適なサイズで表示されている。
トップページの「続きを読む」ボタン
 
検索結果を表示する仕組みの理解
 
検索結果を表示する仕組みは下図の様になっており、「 search.php 」では抜粋を表示する【 ‘excerpt’ 】で、アーカイブを表示する「 archive.php 」とトップページを表示する「 index.php 」は【 get_post_format() 】を使用しているという違いがある事が解った。
 
検索結果を表示する仕組み
 
コンテンツを表示する仕組みは下図のような構成で、【 get_post_format() 】の場合は「 content.php 」で表示され、【 ‘excerpt’ 】の場合は「 content-excerpt.php 」で表示される様になっている。
 
コンテンツを表示する仕組み
 
検索結果の表示画面での問題点を解決するには、
【 content-excerpt.php 】の変更が必要。と、考えたが・・・
 
 
【 content-excerpt.php 】の変更方法
 
「続きを読む」ボタンのサイズを最適化するのが主目的であるが、その他にも次の変更目標を設定した。
①.アイキャッチ画像を表示する。
②.抜粋を回り込み表示にする。
③.アイキャッチ画像のサイズを 100×100 にする。
 
アイキャッチ画像を小さくして、文章を画像の横に回り込みさせる。は、どちらか一方はOKになるが、同時に解決できずに試行錯誤した結果。
 
行きついた結果。子テーマの【 content-excerpt.php 】div class=”entry-summary” の内容。
 
「続きを読む」ボタンのサイズ調整。子テーマのスタイルシート (style.css ) 。
 
 
変更結果
 
検索結果の表示画面での
①.アイキャッチ画像を表示する。
②.抜粋を回り込み表示にする。
③.アイキャッチ画像のサイズを 100×100 にする。
 という目標は達成できた。
 
そして、主目的である「続きを読む」ボタンの最適化も出来たが、これは、「css の修正」によるもので・・・・・
「続きを読む」ボタンのサイズ調整
 
この影響で、トップページの「続きを読む」ボタンは、高さが『高すぎる』ことになってしまった。
「続きを読む」ボタンのサイズ調整
 
 
最終的解決策
 
トップページやアーカイブ表示も『抜粋表示:’excerpt’ 』に変更すべきか?・・・とも、頭をよぎったが、さらに調べてみると、
コンテンツを表示させる『css のクラス』は、
【 ‘excerpt’ 】は【 entry-summary 】で、
【 get_post_format() 】は【 entry-content 】である。
という、表示させる css のクラスに違いがある。
 ということが理解できた。
 
トップページへの表示や記事一覧の表示クラスである、『 entry-content 』のcss(親テーマ)には【 margin-top: 1.5em 】が指定されていた。
「続きを読む」css の違い
この【 margin-top: 1.5em 】を変更すべく、子テーマのスタイルシート (style.css ) に、次のように追記した。

 

これで、トップページの「続きを読む」ボタンのサイズも同じになった。
「続きを読む」ボタンの最適化

 
めでたしめでたし。 

以上。
(2018.01.02)

 

 

スポンサー リンク

コメントを残す

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

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