ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

      2015/02/16

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

「Stinger3」はデフォルトだと、この画像のように

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

  • サイトタイトル(ほにゃほにゃへにゃはにゃ)
  • サイトキャッチフレーズ(大好きな家電を紹介するブログ)
  • ヘッダー画像

になっていますが、サイトタイトルとサイトキャッチフレーズを表示しないようにして、ヘッダー画像をオリジナルに変更する備忘録を残したいと思います。先日の記事OSXローカル環境にwordpressをインストールする方法 で構築したローカル環境でやってみました。

スポンサーリンク

変更するオリジナル画像を用意

PhotoShopなどでオリジナル画像を作ります。Stinger3のデフォルトのヘッダー画像は幅986px 高さ150pxです。同じサイズにしたい方は同じサイズで!変えたい場合、幅は全体のデザインも変更する必要があるため、高さのみ変更することをお勧めします。まず画像を読み込んでおきます。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

新規でヘッダーサイズを幅は986、高さは200に変更してみました。WebなのでResolutionは72 pxです。OKを押します。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
そして色々お好みのタイトルなどを入れて完成。適当です。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

スポンサーリンク

ImageOptimでメタデータを削除

そしてjpgの書き出しの時に便利なこれは使える!OSX用画像圧縮ツール「ImageOptim

でも紹介した画像のメタデータを削除してくれるImageOptimを使って削除します。「塵も積もれば山となります」軽量化しておきましょう。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

元のサイズより11.5%軽くなりました。

現在のヘッダー画像を削除する

WordPressのダッシュボードの「外観」から「ヘッダー」を選択
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
こちらの画面が出てくると思うのですが、丁度左下の「変更を保存」の右側になる「ヘッダー画像を削除」をクリックしてヘッダーを削除したのちに「変更を保存」をクリックします。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

先程作ったオリジナルヘッダー画像に変更

「メディア」から「新規追加」に行き追加したい画像を「選択」又はドラッグ&ドロップします。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

アップが終わるとこのように下にアップした画像が小さく載っています。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

その右側の編集をクリックして次のページが出てきます。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

ここの右側にアップした「ファイルのURL」が出ていると思うのですが、これをコピーします。

スポンサーリンク

header.phpを編集

自分はTransmit4を使用していますが、「外観」から「テーマ編集」「ヘッダー(header.php)」で開いても大丈夫です!header.phpの84行目から95行目

この部分を削除してこちらの3行に変更します。

「 ヘッダー画像url」に先程アップした画像のurlをペーストします。
最終的にこのような感じになれば大丈夫です。

ブログの表示が正しければ問題ありません。

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法

完成

なんで「ほにゃほにゃへにゃはにゃ」にしたんだろ…(笑)読んで頂いてありがとうございました。

 - WORDPRESS

Comment

  1. […] らおもしろいやりかた発見!サイトタイトルを画像に変更できちゃうらしいのだ!さっそくdmgadgetにアクセスしやってみた! コチラの画像に変更することにしてみた。 でけた! 意外と […]

  2. 【stinger3】このブログが行っているカスタマイズ | hayatoworks|wordpressで遊ぶ人のサイト より:

    […] WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法 […]

  3. 【stinger3】タイトルを画像に変更する より:

    […] 参考にさせていただいたサイトはこちら ・ディーエムガジェット […]

  4. […] WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法 […]

  5. […] 参考にさせてもらったサイト […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Stinger3] LINEで送るボタンを設置
WordPress[Stinger3] LINEで送るボタンを設置
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPress[Stinger3] Twitterメンション設定
WordPress[Stinger3] Twitterメンション設定
WordPress[Acunetix WP Security] セキュリティー対策としてユーザー名(admin)を変更
WordPress[Acunetix WP Security] セキュリティー対策としてユーザー名(admin)を変更
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法