【WordPress】Simplicity2テーマでログイン画面のロゴ画像がはみ出すときの対処

公開日: 使い方など
Knowledge Base Wordpress 設定

私このテーマを使ってますけどサイトにロゴを使ったことがなかったんですよね。

そんな中、サイト作成のお手伝いをさせていただいている方からサイトタイトルにロゴを使いたいという要望があり、設定してあげました。

そしたら・・・・ログインロゴまで変更されてる~~!!しかも思いっきり見切れてる~~という事態になりました。

まあバックエンドのログイン画面なんだから特に気にする必要もなさそうですけど本人は気になるようで何とか直してほしいと言われましたので対応しました。

Simplicity2ではサイトロゴ=ログインロゴになるようになってる??対処方法

前述したように私は今までサイトタイトルにロゴを使ったことがなかったので、これがSimplicity2独自のものなのか??不明ですが、フロントエンドをロゴにするとログイン画面までロゴになるというのはうれしい機能ではあります。

とはいえやっぱりはみ出すのは・・・ということで得意のプラグイン・・・ではなく以下の対処方法で簡単に調整できます。

ごちゃごちゃやる必要はありません。子テーマの場合は以下のコードをテーマのfunctions.phpへ追記するだけです。

親テーマを使っている方は同じfunctionの記述を探して修正するか、一番下に追記すればいいと思います(テーマは下へ下へコードが読み込まれていきますので)。

function custom_login_logo() { ?>
	<style>
#login h1 a {
    height: auto !important;
	width:100%!important;
		}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

上のコードを簡単に言葉で解説するとログイン画面のロゴ画像が入る場所の横幅一杯に表示して、高さは適当に調整してちょーだいというものになります(簡単に書きすぎ??)

つまり画像がこのログインロゴよりも大きい(普通はそうだと思いますが・・)ために、画像がログインロゴの枠(領域)に収まりきらないのが原因なんですね。それをこのコードで自動調整してやるという処理になります。

気になる方はぜひやってくださいね。

Wordpress関連の本

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS(コンテンツ管理システム)です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。

Knowledge Base Wordpress ha-Basic テーマ
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします