TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法

WEBデザイン

TCD「Bloom」は、シンプルでおしゃれな WordPress テンプレートですよね。ですが、H1 タイトルロゴ部分が、ブログの中央で存在感がありすぎると感じる人も多いのではないでしょうか。たとえば、メニューの横にタイトルロゴを移動できたら、情報が整理されている感じがしませんか?

かといって、テンプレートの専用設定画面には、H1タイトルロゴ部分をメニューの横に移動する項目はありません。「header.php」ファイルに修正を加える必要があるため、難易度は高いですが、挑戦してみる価値はありそうです。

というわけで今回は、TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法について、まとめてみました。

Tcd h1title move sample

TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法

TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法について、わかりやすくまとめていきます。

Blogger から、WordPress に移行してから、ずっと TCD「Bloom」のテーマを使ってきました。いままでも、「記事タイトルの省略をなくす方法」「TCDテーマのフォントが、細い時に試す方法」など、カスタマイズに成功してき経緯があります。今回も、バッチリいきますよ。

WordPress 初心者にもわかりやすく、3ステップ形式で説明していきます。お約束として、WordPress のバックアップをしてから参考にしてみてくださいね。

ワンポイントアドバイス

今回の記事の内容を試す前に、Wordpress ダッシュボードの「外観>TCDテーマオプション>基本設定」のなかにある「サイドスライドメニュー」のチェックを、OFF(オフ)にすることをお忘れなく!!

【ステップ1】header.php のH1タイトルロゴ部分をコピーして削除する

Wordpress themeeditor click

ステップ1は、テーマディタの「header.php」にある、H1 タイトルロゴ部分をコピーしてから、削除していきます。WordPress のダッシュボードをひらいてください。左サイドバーの外観にマウスをあわせて、テーマエディターをクリックします。

Bloom header h1tite

TCD「Bloom」の場合は、「Bloom: header.php」の 91 行目〜 <div class="l-inner">〜</div> が、H1タイトルロゴ部分になっていました。上記画像で、青く選択されている部分ですね。選択している部分を、コピー して、テキストエディッタ等に保存しておいてください。


<div class="l-inner">
<?php
if ( is_front_page() ){ $thisTag = 'h1'; } else { $thisTag = 'div'; }
if ( 'yes' == $dp_options['use_logo_image'] && $image = wp_get_attachment_image_src( $dp_options['header_logo_image'], 'full' ) ) :
?>
			<<?php echo $thisTag; ?> class="p-logo l-header__logo l-header__logo--pc<?php if ( $dp_options['header_logo_image_retina'] ) { echo ' l-header__logo--retina'; } ?>">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_attr( $image[0] ); ?>" alt="<?php bloginfo( 'name' ); ?>"<?php if ( $dp_options['header_logo_image_retina'] ) echo ' width="' . floor( $image[1] / 2 ) . '"'; ?>></a>
			</<?php echo $thisTag; ?>>
<?php
else :
?>
			<<?php echo $thisTag; ?> class="p-logo l-header__logo l-header__logo--pc l-header__logo--text">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
			</<?php echo $thisTag; ?>>
<?php
endif;
?>
</div>

ちなみに TCD「Bloom」では、H1 タイトルロゴ部分の HTML コードは、上記のようになっていました。参考までチェックしてみてください。ほかのTCD テーマの場合も、ブラウザの開発者ツール等を利用してタイトルを抽出している箇所を見つけてください。

Bloom header h1tite delete

H1タイトルロゴ部分の HTML コードをコピーしたら、いちど該当箇所は削除してください。上記画像のように、該当コードを削除したら、テーマエディター下部にあるファイルを更新ボタンをクリックしてください。この段階で、TCD「Bloom」をチェックしてみましょう。

Bloom header h1tite deletecheck

おっ!いい感じですね。TCD「Bloom」のH1タイトルロゴ部分が、ブログの表示上から消えました。ここまでで、ステップ1「header.php のH1タイトルロゴ部分をコピーして削除する」は完了です。ステップ2に、お進みください。

【ステップ2】header.php のメニュー横に、H1タイトルロゴを貼り付ける

Bloom header menu side2

ステップ2では、header.php のメニュー横に、H1タイトルロゴを貼り付けていきます。メニューの左横にするためには、TCD「Bloom」の 25 行目あたり「<div class="l-header__bar"> <div class="l-inner">」の後ろに配置してあげれば問題を解決できそうです。

Bloom header menu side1

それでは、<div class="l-inner"> のうしろに、TCD「Bloom」のH1タイトルロゴ部分の HTML をそのまま貼り付けていきましょう。貼り付けるコードはこれでしたね↓


<div class="l-inner">
<?php
if ( is_front_page() ){ $thisTag = 'h1'; } else { $thisTag = 'div'; }
if ( 'yes' == $dp_options['use_logo_image'] && $image = wp_get_attachment_image_src( $dp_options['header_logo_image'], 'full' ) ) :
?>
			<<?php echo $thisTag; ?> class="p-logo l-header__logo l-header__logo--pc<?php if ( $dp_options['header_logo_image_retina'] ) { echo ' l-header__logo--retina'; } ?>">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_attr( $image[0] ); ?>" alt="<?php bloginfo( 'name' ); ?>"<?php if ( $dp_options['header_logo_image_retina'] ) echo ' width="' . floor( $image[1] / 2 ) . '"'; ?>></a>
			</<?php echo $thisTag; ?>>
<?php
else :
?>
			<<?php echo $thisTag; ?> class="p-logo l-header__logo l-header__logo--pc l-header__logo--text">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
			</<?php echo $thisTag; ?>>
<?php
endif;
?>
</div>

HTML コードをはりつけたら、ファイルを更新ボタンをクリックしてください。ここまでで、ステップ2「header.php のメニュー横に、H1タイトルロゴを貼り付ける」は完了です。デザインが崩れているままなので、ステップ3で修正していきましょう。

【ステップ3】CSS でデザインを整える

Tcdbloom h1title move

ステップ3は、CSS でデザインを整えていきます。TCD「Bloom」のH1タイトルロゴが、メニューの左横に移動したことで、デザインが崩れてしまいます。ある程度見れるデザインに修正するために、追加したCSS をご紹介します。それが、こちらです↓

.l-header__logo--pc {
  margin-top: 0px;
  margin-bottom: 0px;
  float: left;
}

TCD「Bloom」では、クラス名「l-header__logo--pc」がタイトルロゴにつけられていました。ここに左寄せの float と、上下の余白をカットすることでデザインを整えてみました。

float を解除する必要があると思ったのですが、デザイン上はうまくいっているようなので、ここはとりあえず保留にしてあります。さらに解決策をみつけたら追記していく予定です。

ここまでで、ステップ3「CSS でデザインを整える」は、完了です。以上「TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法」でした。

TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法まとめ

TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法を、3ステップで説明してみました。まとめますと、こんな感じになります↓

3ステップまとめ
  • 【ステップ1】header.php のH1タイトルロゴ部分をコピーして削除する
  • 【ステップ2】header.php のメニュー横に、H1タイトルロゴを貼り付ける
  • 【ステップ3】CSS でデザインを整える

【記事上まで移動できるリンク】
TCD「Bloom」のH1タイトルロゴを、メニュー左に移動する方法

いままでずっと、タイトルロゴが中央にあって存在感マシマシなところが気になっていたのですが...ついに、悩みを解決することができました。おなじ TCD「Bloom」テーマを使っている方々の助けになれていたら幸いです。

また今回のカスタマイズは、ブログでも重要な H1 タグ周りに修正を加えることになります。SEO への影響など、私自身もまだ検証中のところがあります。そのため、あくまでも自己責任にてお試しください。

それでは、今回はこの辺で!? そのほか、WEB デザインなどあなたのブログの悩みを解決する記事をまとめています。あわせて、こちらの記事をご覧ください↓

【関連】ブログ記事まとめ | サウンドテック・ラボ

サウンドオルビス

3,755,639 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事