【STORK(ストーク)】シンプルイズベスト!ヘッダー画像(テキスト無し)の設定方法

どうも、あらやんです。

STORK(ストーク)でヘッダー画像を設定したことのある人なら分かると思うんですけど、英語表示テキスト(大テキスト)という項目と日本語表示テキスト(小テキスト)という項目を設定しないとヘッダー画像が表示されないんですよね。

テキストいらない!画像だけでいい!と思っても、先ほどのテキストの項目に文字を入力しないと画像そのものが表示されないという設定になってるんですよね、なんでじゃ~!

デフォルトのフォントやサイズが気に入る場合はそのまま使えばいいと思うんですけど、ちょっと違うんだよなーという方も結構いると思うんですよね。もしくはテキストロゴを設定してるから、ヘッダー画像にテキストいらない!シンプルに画像だけでいい!っていう方もいるはず。

これ、ちょっと設定をいじれば出来ます。シンプルなヘッダーにしたい方、設定やっていきましょう!

 

テーマファイルをいじるので子テーマ必須です

これから行うカスタマイズはテーマファイルをいじることになるので子テーマ必須です!

子テーマってなぁに?という方は先にこちらの記事を読んで子テーマ&FTPソフトの導入を済ませておいてくださいね。

【STORK(ストーク)】子テーマカスタマイズのための「Cyberduck」の使い方

2018.01.25

【STORK(ストーク)】子テーマを導入してカスタマイズの準備を行う方法

2018.01.15

 

具体的なカスタマイズ内容

それではやっていきましょう。今回のカスタマイズでいじることになるのは「parts_homeheader.php」というファイルです。まずはこのファイルをFTPソフトを使って親テーマから子テーマにコピーしましょう。

コピーが出来たら内容を編集していきます。先ほどの「parts_homeheader.php」を子テーマのフォルダにコピーした後でWordPressの「外観」→「テーマの編集」を開くと画面右側に表示されるテーマファイル一覧の中に「parts_homeheader.php」が追加されているはずです。

そこにこれから紹介するコードをコピペするだけです。ポイントは一番上に貼り付けること。貼り付けるコードは以下の通りです。

<?php if ( !get_option( 'opencage_toppage_headeregtext' ) && !get_option( 'opencage_toppage_headeregtext' ) && get_theme_mod( 'opencage_toppage_headerbg' ) && is_front_page() && !is_paged() ) : ?>
<div id="custom_header2" style="text-align: center">
<?php if ( get_theme_mod('opencage_toppage_headerbgsp') && is_mobile()):?><img src="<?php echo get_theme_mod( 'opencage_toppage_headerbgsp' ); ?>"><?php else:?><img src="<?php echo get_theme_mod( 'opencage_toppage_headerbg' ); ?>"><?php endif;?>
</div>
<?php endif; ?>

これを貼り付けて保存したら、ヘッダー画像を設定してみて下さい。ちゃんとヘッダー画像だけが表示されるはずです。この時に冒頭で触れた 英語表示テキスト(大テキスト)、日本語表示テキスト(小テキスト)の項目に何かしら文字を入力してしまうと入力した文字が表示されてしまうので要注意です。

 

補足:これを追加で設定するときれいになるよ

この設定、やってみると分かるんですけど画面上部にちょっと隙間が出来ちゃうんですよ。なのでそれを修正するためにこれから紹介するCSSを子テーマの「style.css」に追記してみて下さい。多少きれいに修正されます。

#custom_header2{
 margin-bottom:1em;
}
@media only screen and (min-width: 1100px) {
 #custom_header2{
 top: -2.7em;
 position: relative;
 }
}

どうですか?多少改善されました?

もしシンプルなヘッダーにしたい場合はこの方法を参考に設定してみて下さいね。それではお疲れさまでした。

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!