「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマPHOTEK:トップページにh1タグを設定する

Q.トップページにh1タグを設定する方法

トップページにh1タグを設定する方法を教えてください。

A.下記php、cssファイルの該当箇所をご編集ください

下記のカスタマイズをする事でdescription部分にH1を使用することが可能となります。
また、この箇所は下層ページにおいてはページタイトルを表示する部分となりますので変更によって自動的にタイトルに対してh1が使用されることになります。
編集するファイル:header.php
編集する箇所:

<div class="col-xs-12 col-sm-4 col-md-5 photek-title <?php
if($css_slug == 'portfolio') echo 'hidden-xs'; ?>">
<?php echo $title; ?>
<?php get_search_form(); ?>
</div>

  ↓

<h1 class="col-xs-12 col-sm-4 col-md-5 photek-title <?php if($css_slug
== 'portfolio') echo 'hidden-xs'; ?>">
<?php echo $title; ?>
<?php get_search_form(); ?>
</h1>

同時に、CSSにも変更が必要です。

編集するファイル:photek.css
編集する箇所:

.photek-title{
  position:relative;
  padding: 22px 0 16px 38px;
  font-size: 17px;
  font-weight:bold;
  height:56px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  letter-spacing:1px;
}

  ↓

.photek-title{
  position:relative;
  padding: 22px 0 16px 38px;
  font-size: 17px;
  font-weight:bold;
  height:56px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  letter-spacing:1px;
  margin: 0;
}

※最後に「margin: 0;」を追加

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事