福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年7月28日 タグ:

WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法

WordPressで作られているサイトで、ダッシュボードから変更できない画像の入れ替え方法をご紹介します。
この方法は、ダッシュボードを利用せずカスタマイズする方法の初歩的なものになります。

WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法20728_7

必要環境1:FTPソフト
ここでは、FTPといわれるファイル転送システム(ファイルのアップロード・ダウンロードができるシステム)を利用しますので、FTPソフトの使用、もしくは利用しているサーバー上で同等の機能を提供している場合に限られます。
FTPソフトの使用方法については、ネット上で使い方などが丁寧に掲載されていますので、そちらをご参照ください。
参照例:ロリポップレンタルサーバー | 各種FTPソフトの設定方法
必要環境2:FTPサーバー情報
FTPソフトでWordPressが置かれているサーバーと接続するには、
  1. FTPサーバー名(ホスト名)
  2. ユーザー名(アカウント名)
  3. パスワード
の3点が必要です。
*上記の名前はFTPソフトによって、少しづつ違いがありますが、基本この3つも情報でFTPソフトは接続されます。
必要環境3:Firefoxブラウザ
後述になりますが、入れ替える画像の「アドレス(画像のおいてあるURL)」を調べるさいに、Firefoxブラウザを例にご説明します。他のブラウザでも可能ですが、それぞれ使用方法がことなります。
参照:Firefoxの無料ダウンロード

手順1:画像のアドレス・種類・大きさを調べる

目的の画像の置いてある場所を調べます。例をとってご説明します。

  1. 当サイトのトップページ(http://kyasper.com)の画像を例にとります。
    目的とするのは、以下の赤枠で囲まれている画像です。
    WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法 1

  2. Firefoxブラウザで、当サイトのトップページ(http://kyasper.com)を開き、「メニューバー > ツール > ページの情報」で、ページ情報のダイアログを開きます。
    WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法 2

    ↓表示されるページ情報ダイアログ WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法 3

  3. ページ情報ダイアログのメディアをクリック。
    WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法 4

    このダイアログから、目的の画像を探します。 WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法 5

  4. このダイアログで表示される、アドレス(URL)・MIMEタイプ・大きさが重要になってきます。

    アドレス(URL)
    画像が置いてあるアドレスです。後ほどこのアドレスを元に、ファイルのダウンロード・アップロードを行います。
    MIMEタイプ
    画像の種類で、PNG画像・GIF画像・JPEG画像などがあります。
    入れ替える画像は、この画像の種類に合わせます。
    大きさ
    画像のサイズ(ヨコ×タテ、単位はピクセル)。入れ替える画像はこのサイズと同じにします。

手順2:入れ替え画像の調整

お手持ちの画像加工ソフトで、手順1で得た「画像ファイル名」「MIMEタイプ(画像の種類)」「大きさ」を元に、入れ替え画像をこれと同じにします。

*画像ファイル名は、「アドレス」最後の「/(スラッシュ)」より後ろが、画像のファイル名となります。
例では「top_content_menu_1.png」が画像ファイル名です。

*今回のご紹介では、最も簡単に画像を入れ替えるため、「元画像を上書き」するという方法をご紹介しています。

補足
画像加工ソフトの使用方法はそのソフトでおのおの違いますが、画像の種類変更方法の大抵が、保存するさいに指定することで画像の種類の変更ができます。(「別名で保存する」などを利用します。)
画像の大きさについては、同じ大きさにしないとレイアウト崩れの原因になります。
また、画像の大きさを同じにするということは、「拡大縮小」や「切り抜き」といった方法をとります。
入れ替えたい画像が元画像より小さく、拡大して大きさをあわせた場合は「画像の荒れ」がでます。

ポイント
WPカスタマイズの第一歩 ダッシュボードから変更できない画像を入れ替える方法 6

手順3:画像のダウンロード・上書き・アップロード

  1. 画像をダウンロード

    FTPソフトを使って、手順1で取得したアドレスから、目的の画像をダウンロードします。
    ダウンロードできたら、念の為に複製を作っておくことをお勧めします。(複製名は、元画像ファイル名+日付などでいいかと思います。例:top_content_menu_1_20130728.png)

  2. 上書き

    ダウンロードした画像ファイルを、手順2で作成した変更する画像に上書きします。

  3. 画像をアップロード

    FTPソフトで、上書きした画像をアップロードします。

  4. ブラウザを更新して、確認します。

    アップロードしただけでは、ブラウザ表示は前のままなので、ブラウザに「更新」をかけて、入れ替えた画像が表示されるかを確認します。

補足

自分のパソコンで使っているFTPソフトを使用する以外にも、WordPressを置いてあるレンタルサーバーに、FTPソフトと似た機能を提供している場合があります。
今回ご説明したダッシュボード以外のカスタマイズをされる予定があまりないのであれば、こちらの機能を利用するのもいいかもしれません。

カテゴリー:WordPress tutorial

コメント

コメントを残す

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

FB Comment 試験中