賢威のサイトタイトルを中央にしてキャッチフレーズを消す方法

※当サイトにはプロモーションが含まれています。

賢威の初期設定だと、ヘッダー部分はこのように表示されます。

パソコンで見た場合

スマートフォンで見た場合

にゃのらいと

サイトタイトルを中央にしてサイトの説明は消したいにゃ

今回、サイトタイトルを画像にして中央に寄せて、このようにしてみました。

パソコンで見た場合（修正後）

スマートフォンで見た場合（修正後）

では、その手順について説明します。

賢威を使っている方の参考になれば幸いです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

キャッチフレーズを消す方法

まず最初に、賢威のキャッチフレーズ（サイトの簡単な説明）を消す方法についてです。

一番、手っ取り早いのは「追加CSS」に、以下のコードを記述する方法です。

.site-description {
display: none;
}

これで、キャッチフレーズは消えます。

ただ、この方法はユーザから視覚的に見えなくしているだけなので、HTML上にコードは残っています。

しかもほとんどのページに、このコードが記載されているのにも関わらず非表示というのは不自然なので、根本から消してしまいたいと思います。

①親テーマのkeni-header_col1.phpとkeni-header_col2.phpをダウンロード

（WinSCPやFileZillaなどの）FTPソフトを使用して、ローカルホスト（自分のパソコン）に、親テーマにあるkeni-header_col1.phpとkeni-header_col2.phpをダウンロードします。

なお、フォルダの構成は、概ね下記のようになっていると思います。

/home/（あなたが契約した名前）/www/（あなたが作成したフォルダ名）/wp-content/themes/keni80_wp_standard_all_202403231915/keni-html-parts

②keni-header_col1.phpの内容を編集する

keni-header_col1.phpの15行目～25行目付近に記載されている

$header_cont = "";
if ( get_option( 'keni_header_content' ) ) {
$header_cont .= do_shortcode( get_option( 'keni_header_content' ) );
} else {
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) :
$header_cont .= '<p class="site-description">' . $description . '</p>';
endif;
}
$header_cont = apply_filters( 'keni_header_cont', $header_cont );
echo $header_cont;

を無効化（コメントアウト）します。

PHPのコードを無効化するには、/**/で囲います。

/*
（無効化したいコード）
*/

実際のコードを見るとこんな感じになります。

※/**/は半角です。

③keni-header_col2.phpの内容を編集する

②と同様に、keni-header_col2.phpの14行目～24行目付近に記載されているコードを無効化します。

④子テーマ内にkeni-html-partsフォルダを作成する

FTPソフトを使用して、子テーマ内に「keni-html-partsフォルダ」を作成します。

⑤修正したphpファイルを子テーマにアップロードする

コードを無効化した、keni-header_col1.phpとkeni-header_col2.phpを先程作成した「keni-html-partsフォルダ内」にアップロードします。

これで、ヘッダー部分に表示されていたキャッチフレーズ（サイトの簡単な説明）が消えたはずです。

もし、デザインが崩れるなどの不具合があった場合は、子テーマに作成した「keni-html-partsフォルダ」ごと削除すれば元に戻ります。

何故なら、親テーマには一切変更を加えてないからです。

サイトタイトルを中央にする

続いて、サイトタイトルを中央（センター）にします。

ただ、その前に、サイトタイトルは画像にしたいので、画像をアップロードしようと思います。

①サイトタイトル（ロゴ画像）のアップロード

左メニューにある

賢威の設定 > 賢威の設定

を選択。

ロゴ画像の項目にある「画像をアップロード」ボタンで、タイトルとして使用する画像をアップロードします。

②ロゴ画像を中央に配置する

CSSを使って、ロゴ画像を中央（センター）に配置します。

/* サイトタイトルを中央 */
.keni-header_outer .site-title {
float: none;
max-width: 100%;
text-align: center;
}

これを「追加CSS」に記述すれば、完成です。

お疲れ様でした。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]

2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザ マナ 発行年月：2022年03月24日 予約締切日：2022年01月26日 ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA） 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

HTMLサイトをWordPressにする本 [ 久保田 涼子 ]

2,640円(税込)【送料込】

楽天ブックス

久保田 涼子 西原 礼奈 ソシムエイチティーエムエルサイトヲワードプレスニスルホン クボタ リョウコ ニシハラ アヤナ 発行年月：2023年08月29日 予約締切日：2023年06月06日 ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ） 「ワクワクするモノ・時間・場所を生み出す」をテ

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］ [ 桑名

1,760円(税込)【送料込】

楽天ブックス

桑名 由美 はつみ 技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバン クワナ ユミ ハツミ 発行年月：2023年09月28日 予約締切日：2023年06月02日 ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト

たった1日で基本が身に付く！　WordPress 超入門 ［改訂2版］ [ 佐々

1,980円(税込)【送料込】

楽天ブックス

佐々木 恵 リブロワークス 技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハン ササキ メグミ リブロワークス 発行年月：2022年04月14日 予約締切日：2022年01月05日 ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [

3,278円(税込)【送料込】

楽天ブックス

小川 欣一 穂苅 智哉 ソシムビジネスサイトヲツクッテマナブ ワードプレスノキョウカショ バージョンロクテンエックスタイオウバン オガワ ヨシカズ ホカリ トモヤ 発行年月：2023年05月01日 予約締切日：2023年01月12日 ページ数：436p サイズ：単行本 ISBN：9784802614030 1　開発環境を構築しよう／2　テ