WordPress 『ロゴ画像』『ヘッダー画像』の設定方法(画像付きで解説) STINGER7編

      2016/05/08

テーマ『STINGER7』の設定方法解説③

 

 

wordpress-logo

 

前項では、“WordPress 『一般・投稿・表示・ディスカッション・メディア・パーマリンク』の設定方法(画像付きで解説) STINGER7編”ということで、基本的な6つの設定について紹介させて頂きました。
本項では、ブログの印象が良くなるよう『ヘッダー画像』『ロゴ画像』の設定を行っていきます。

 

『ヘッダー画像』『ロゴ画像』とは、当サイトでいいますと、下記の画像のことです。

 

ヘッダー、ロゴ画像

 

WordPressでは、簡単に『ヘッダー画像』『ロゴ画像』の設定をすることができます。

 

 

 

 

『ヘッダー画像』を設定する前の準備事項

まず、設定する前にヘッダー画像を用意する必要があります。
当サイトでは、「日々の-はてな(HATENA)-日記」というサイト名なので、上記の画像のように『ヘッダー画像』にはたくさんの「はてなマーク・?」を使用しサイトのイメージを演出するよう工夫しました。

 

『ヘッダー画像』に使用するための画像のご用意がまだの場合は「画像編集ソフト」などを使用してお気に入りの『ヘッダー画像』を作成してみてください。

尚、『ヘッダー画像』のサイズは、横幅1060px以上の大きさのものがバランス良く綺麗に見えます。

 

無料画像編集ソフト『Photoscape』

画像編集に欠かせないのが、画像編集ソフト。
今回は、画像編集ソフトをお持ちでない方の為に、無料画像編集ソフト『Photoscape』をご紹介致します。
『Photoscape』は、無料で使用できる大変便利なソフトです。

機能的には、

 画像閲覧

 フォルダ内の画像を一覧表示、スライドショー

 画像編集

 リサイズ、明るさやコントラストの調整、
バックライト補正、フレーム、吹き出し、
モザイク処理、文字、イラスト、
切り抜き(トリミング)、フィルター、
赤目補正、ブルーム, ペイントブラッシ,
コピースタンプ, 効果ブラシ

 一括編集

 複数の画像を一括して変換

ページ 

 複数の画像を一枚にレイアウト

一枚の画像に結合複数の画像を縦並び、
横並び、格子縞と一枚の画像に結合

 GIFアニメ

 動くGIFアニメを作成

 印刷

 ポートレート印刷 、サムネイル印刷

 分割

 一枚の画像を複数の画像に分割

 スクリーンキャプチャ

 画像をキャプチャして編集、保存する機能

 カラーピッカー

 写真やウェブサイト上の画面を拡大し、
そこから色を採取する機能

 リネーム

 画像のファイル名を一括変換

 RAW変換

 RAWファイルをJPGファイルに一括変換

 印紙

 ノートの罫線や、マス目、 五線譜,
スケジュール帳などのシートを印刷

 フェース検索

 インターネット上から同一・類似した顔を検索

など、多くの編集が可能となるフリー(無料)ソフトです。

 

「Photoscape」のインストール手順は次の通りです。

http://photoscape-free.softonic.jp/download をクリックしてください。
「無料ダウンロード」をクリック。
画面の指示に従い「photoscape」をインストールします。

※ ご使用方法については、「Photoscape 使い方」などでお調べください。

 

フリー(無料)素材サイト

画像編集ソフトの用意ができたとしても、加工するための素材がなければ意味がありません。
ここでは、無料で利用できる『素材』サイトをご紹介致します。

1. 『フォトマルシェ』
  プロのカメラマンが撮影した「動物、風景・自然、植物・花 、建物・街並み、乗り物・交通」などを中心とした画像を多く取り揃えています。

2. 『写真AC』
  「人物、ビジネス、生き物、花・植物、食べ物・飲み物」など、様々な写真素材がダウンロード可能です。

3. 『写真素材 足成』
  全国のアマチュアカメラマンが撮影した写真を、写真素材として提供しています。

4. 『フォトック』
  高解像度写真を、web制作やブログ・印刷・バナー制作などで自由にご利用頂ける写真素材サイトです。

5. 『ビジトリーフォト』
  シーンに合わせた男女の人物写真素材がダウンロード可能です。

6. 『Skyseeker』

7. 『Priga』

8. 『food.foto』

9. 『いらすとや』

10.『地図AC』

上記にご紹介致しましたサイトは基本的に「個人の商用利用、クレジットの表示義務無」となっておりますが、ご使用の際は各サイトの注意事項をご確認ください。

 

 

 

 

『ヘッダー画像』の設定

先ほどご紹介させて頂きました「画像編集ソフト」、また「素材サイト」を使用し、『ヘッダー画像』のご用意ができたことと思います。
それでは、只今より『ヘッダー画像』の設定方法をご紹介致します。

 

『ヘッダー画像』の設定手順は次の通りです。

 

1. 左メニューにある「外観」→「ヘッダー」をクリックします。

ヘッダー画像設定

 

2. 次に、「ヘッダー画像」をクリックします。

ヘッダー画像設定

 

3. 続いて、「画像の新規追加」をクリックします。

ヘッダー画像設定

 

4. 「ファイルをアップロード」をクリックし、続いて「ファイルを選択」を選択します。

ヘッダー画像設定

 

5. 『ヘッダー画像』を選択し、「選択して切り抜く」をクリックします。

ヘッダー画像設定

 

6. 次に、画像の切り抜きを行う場合は、マウスで点線の位置を移動させ切り抜きしたい画像の位置を調整し、「画像切り抜き」をクリックします。
  画像の切り抜きが必要ない場合は、「切り抜かない」をクリックしてください。

ヘッダー画像設定

 

7. 最後に「保存して公開」をクリックすれば『ヘッダー』部に先ほど選択した画像が表示されます。

ヘッダー画像設定

 

 

 

 

『ロゴ画像』を設定する前の準備事項

続いて、『ロゴ画像』の設定をする前にロゴ画像を用意する必要があります。

『ロゴ画像』は下記サイトで簡単に作成することができますので、お気に入りのロゴを作成してみてください。

 

ロゴ作成サイト

WordPressは『ヘッダー画像』とは別に、『ロゴ』を登録することも可能です。
簡単に『ロゴ』が作成できるサイトをご紹介致します。

 

Cool Text
Cool Text (クールテキスト) は フリーの画像作成サイトで、大変なデザイン作業なしにロゴを作成することができます。
デザインを選び文字を入力するだけで、独自のロゴ画像が作成できる非常に便利なサイトです。

 

 

 

 

『ロゴ画像』の設定

『ロゴ画像』のご用意ができましたら、さっそく『ロゴ画像』の設定を行いたいと思います。

『ロゴ画像』の設定手順は次の通りです。

 

1. 左メニューにある「外観」→「カスタマイズ」をクリックします。

ロゴ画像設定

 

2. 続いて、「ロゴ画像」をクリックします。

ロゴ画像設定

 

3. 「画像を選択」をクリックします。

ロゴ画像設定

 

4. 次に、「ファイルをアップロード」をクリックし、続いて「ファイルを選択」を選択します。

ロゴ画像設定

 

5. 『ロゴ画像』を選択し、「画像の選択」をクリックします。

ロゴ画像設定

 

6. 最後に「保存して公開」をクリックすれば『ロゴ』部に先ほど選択した画像が表示されます。

ロゴ画像設定

 

 

これで、『STINGER7』ヘッダー画像・ロゴ画像の設定が完了しました。
次項は、『STINGER7』の「ウィジェット」の設定方法をご紹介させて頂きます。

 

WordPress初心者がブログ作成から、Google AdSense、Affiliateの設定を行った手順”TOPページはこちら

 

 

 

 

ブログランキング参加中!
バナーを「ポチッと」お願いします。

 - WordPress , , , , , , , , ,