こんにちは！Reiraです^ ^
今回はストークのトップ画像だけを表示させる方法を紹介していきます！
ストークのTOP画像は通常
●英語表記テキスト
●日本語表記テキスト
画像だけを設定したくても、テキストを表示させないと画像も表示されないようになっているので
『画像だけ表示させたい！』
とお悩みの方は是非参考にしてみてくださいヾ(๑╹◡╹)ﾉ”
テーマファイル内のコードを書き換える必要があるので、
必ずバックアップをして子テーマでのカスタマイズをしていきましょう
子テーマの設定方法・ファイルの移し方は、こちらの記事を参考にしてください。
あわせて読みたい
CSS追加が簡単に出来る！カスタマイズに使える！ワードプレスのプラグインこんにちは、Reiraです！
この記事ではご相談頂いて何度か、ご案内することもあったので
CSSを簡単に追加出来る、ワードプレス...
TOP画像だけ表示させるカスタマイズ方法
parts_homeheader.phpに、コードを追記
カスタマイズしていくファイルは『parts_homeheader.php』です。
このファイル内にコードを追加していくことで、画像だけを表示させることが出来るようになります。
＜＜追記するコード＞＞
|
1 2 3 4 5 |
<span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">if</span> ( !get_option( <span class="hljs-string">'opencage_toppage_headeregtext'</span> ) && !get_option( <span class="hljs-string">'opencage_toppage_headeregtext'</span> ) && get_theme_mod( <span class="hljs-string">'opencage_toppage_headerbg'</span> ) && is_front_page() && !is_paged() ) : <span class="hljs-meta">?></span></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"custom_header2"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center"</span>></span> <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">if</span> ( get_theme_mod(<span class="hljs-string">'opencage_toppage_headerbgsp'</span>) && is_mobile()):<span class="hljs-meta">?></span></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"<?php echo get_theme_mod( 'opencage_toppage_headerbgsp' ); ?>"</span>></span><span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">else</span>:<span class="hljs-meta">?></span></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"<?php echo get_theme_mod( 'opencage_toppage_headerbg' ); ?>"</span>></span><span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">endif</span>;<span class="hljs-meta">?></span></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">endif</span>; <span class="hljs-meta">?></span></span> |
このコードを parts_homeheader.php の一番上に追記します。
＜＜追記後＞＞
|
1 2 3 4 5 6 7 8 9 10 11 |
<span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">if</span> ( !get_option( <span class="hljs-string">'opencage_toppage_headeregtext'</span> ) && !get_option( <span class="hljs-string">'opencage_toppage_headeregtext'</span> ) && get_theme_mod( <span class="hljs-string">'opencage_toppage_headerbg'</span> ) && is_front_page() && !is_paged() ) : <span class="hljs-meta">?></span></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"custom_header2"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center"</span>></span> <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">if</span> ( get_theme_mod(<span class="hljs-string">'opencage_toppage_headerbgsp'</span>) && is_mobile()):<span class="hljs-meta">?></span></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"<?php echo get_theme_mod( 'opencage_toppage_headerbgsp' ); ?>"</span>></span><span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">else</span>:<span class="hljs-meta">?></span></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"<?php echo get_theme_mod( 'opencage_toppage_headerbg' ); ?>"</span>></span><span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">endif</span>;<span class="hljs-meta">?></span></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">endif</span>; <span class="hljs-meta">?></span></span> ▼このコードよりも上に追記して下さい！ <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">if</span> ( get_option( <span class="hljs-string">'opencage_toppage_headeregtext'</span> ) && get_optio~~~~~~~~ ~~~~以下省略します~~~~~</span> |
これで画像だけを表示させることが出来るようになっています！
TOP画像の設定方法は変わりませんヾ(๑╹◡╹)ﾉ”
ワードプレス管理画面→外観→カスタマイズより、トップページ設定より通常通りに行なって下さい。
必ず、英語表記テキスト・日本語表記テキストを何も記入しないで下さい！
CSSでの表示調整
このままだと、少し画像の表示が綺麗じゃないので（上部に空白部分が出来てしまうため）CSSで調整します。
スタイルシート（style.css）または、追加CSSなどにコードを追記します！
＜追加するCSSのコード＞
|
1 2 3 4 5 6 7 8 9 |
<span class="hljs-selector-id">#custom_header2</span>{ <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">1em</span>; } @<span class="hljs-keyword">media</span> only screen and (min-width: <span class="hljs-number">1100px</span>) { <span class="hljs-selector-id">#custom_header2</span>{ <span class="hljs-attribute">top</span>: -<span class="hljs-number">2.7em</span>; <span class="hljs-attribute">position</span>: relative; } } |
以上で完了です！！
最後にまとめ
今回はストークのTOP画像を画像だけ表示させる方法を紹介しました！
その他、ストークのカスタマイズ情報も更新しているのでぜひ参考にして貰えれば嬉しいです^ ^
