Simplicityというシンプルで最近評判のWordPressテーマをブログに導入してみました。とてもシンプルでSEO対策等もばっちりとのことで、Simplicityを無料で公開してくれている作者様に感謝です。
導入時に気になった点としては、Simplicityはブログ記事にアイキャッチ画像があることを想定したデザインになっているんですが、本ブログの記事はアイキャッチ画像が無いため、アイキャッチ画像の表示を想定したスペースが無駄になっているように感じました。
そこで、Simplicityテーマを少々修正し、記事にアイキャッチ画像が無い場合に自然な表示となるようにphpコードとスタイルシートを修正しました（アイキャッチ有無が混在している場合には表示が崩れます）。取りあえず表示が自然になるよう修正しただけなので、修正漏れやWordPressテーマの作法的にNGな部分があればコメント頂けるとありがたいです。
（簡単に確認した限りは、Googleサイト診断ツール「PageSpeed Insights」のユーザエクスペリエンスは100点のままでした）
コード修正ファイルおよび修正内容
注：Simplicityのバージョン：20140810 に対する修正内容です。その他バージョンについては確認していません。
list.php
41行目、サムネイルを持っていないときの処理をコメントアウト
|
1 2 3 4 |
40 <?php else: // サムネイルを持っていないときの処理 ?> 41 <!--<a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" style="width:150px;height:150px;" /></a>--> 42 <?php endif; ?> |
new-entries.php
10行目、サムネイルを持っていないときの処理をコメントアウト
|
1 2 3 4 |
9 <?php else: // サムネイルを持っていないときの処理 ?> 10 <!--<a href="<?php the_permalink(); ?>" class="new-entry-image"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" style="width:75px;height:75px;" /></a>--> 11 <?php endif; ?> |
popular-entries.php
11行目、サムネイルを持っていないときの処理をコメントアウト
|
1 2 3 4 |
10 <?php else: // サムネイルを持っていないときの処理 ?> 11 <!--<a href="<?php the_permalink(); ?>" class="popular-entry-image"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" style="width:75px;height:75px;" /></a>--> 12 <?php endif; ?> |
related-entries-thumbnail.php
23行目、サムネイルを持っていないときの処理をコメントアウト
|
1 2 3 4 |
22 <?php else: // サムネイルを持っていないとき ?> 23 <!--<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" style="width:200px;height:200px;" />--> 24 <?php endif; ?> |
related-entries.php
23行目、サムネイルを持っていないときの処理をコメントアウト
|
1 2 3 4 |
22 <?php else: // サムネイルを持っていないとき ?> 23 <!--<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" style="width:100px;height:100px;" />--> 24 <?php endif; ?> |
style.css
537行目の.entry-contentのmargin-leftを160pxから5pxへ変更
|
1 2 3 4 |
536 .entry-content{ 537 margin-left:5px; 538 } |
996行目の.related-entry-contentのmargin-leftを120pxから0pxへ変更
|
1 2 3 4 |
995 .related-entry-content { 996 margin-left: 0px; 997 } |
[おまけ]モバイル表示時の投稿日時とカテゴリ間の改行を無くす
モバイル表示時に記事の投稿日時とカテゴリ表示が改行され画面の縦のスペースを余分に使っているような気がしたため、CSSを修正しています。
mobile.cssの245行目、”.post-meta span,”の行をコメントアウト
|
1 2 3 4 5 |
245 /*.post-meta span,*/ 246 .footer-post-meta span{ 247 display:block; 248 } |
コメント
こちらの記事を参考に、アイキャッチ画像を非表示にしようと思いましたが、現状記述が大幅に変わっているように思えました。2014/12/1にアップデートされてからの、アイキャッチ画像を表示しない方法をご教授頂けたら幸いです。
長らくコメントに気づいておらず返信遅くなりすみません。
確認してみましたが、Simplicityの最新安定版(バージョン：1.3.0 20141118b)では、標準機能としてアイキャッチ画像を表示しない設定ができるようです。おそらく、これ以降のバージョンでも同様に設定可能と思われます。
具体的な設定方法は、WordPressのテーマカスタマイズ項目の「レイアウトの設定」にある「サムネイル表示(テキスト主体サイト)」の項目のチェックを外すことで、アイキャッチ画像が表示されなくなります。
先ほど、こちらのサイトも上記設定にてSimplicity最新安定版に更新してみました。