サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、ブログのタイトルを文字表示から「画像」が表示されるようにカスタマイズしていきます。
Bloggerブログのタイトル
お肉屋さ~ん!!
Bloggerのタイトルって文字でしか書けないの~???
もっと可愛くしたい!!
僕も文字より絵や画像の方がいいよ~!!
確かに、Bloggerは文字でタイトルが表示されるよね
これは最初の設定がそうなっているだけだから、画像が表示されるように設定すれば大丈夫だよ!!
それじゃ今日はタイトルの表示の変え方を教えるね!!
は~い!!
ほ~い!!
Bloggerブログのタイトル部分は、初期設定で
- ブログのタイトル
- ブログの説明
の2つが表示されるように設定されています(下の画像:赤枠)。
この設定は、簡単に変更することができ、タイトルを文字表示ではなく、好きな画像が表示されるようにすることも可能です。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://2.bp.blogspot.com/-ECBW7izRQDQ/W_idOj9JFSI/AAAAAAAAKf0/_lHro4OW3m03ZN5cs9hjPXKdf7ARZPbRgCK4BGAYYCw/s640/1%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F1.jpg)
ブログのタイトルを画像表示に変更する
それでは、ブログのタイトルを文字表示から画像表示に変更していきます。
①ブログ管理画面メニューの「レイアウト」をクリック
まずは、ブログ管理画面メニューの「レイアウト」をクリックします。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://1.bp.blogspot.com/-UrUdyPE-WRo/W_idSGqyAWI/AAAAAAAAKf8/x3nO1CUvtV8ZocLE5F4Dc0FmG2sHtNPRwCK4BGAYYCw/s640/2%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
②「ページヘッダー」ガジェットを確認
「レイアウト」をクリックすると、右に現在のレイアウトが表示されます。
その中から「ページヘッダー」ガジェットを探します。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://4.bp.blogspot.com/-yV05SNwWguI/W_idUs3PKQI/AAAAAAAAKgE/wG6hmX2K0BM2zSlffVC7O-5msFZGdZeHwCK4BGAYYCw/s640/3%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
③「ページヘッダー」ガジェットの確認をクリック
ガジェット内の右下に「確認」とあるのでクリックします。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://3.bp.blogspot.com/-vXBioeL3-rw/W_idXOcgKHI/AAAAAAAAKgM/E257-VsKVWA--edk6wyGXtW1ROiog8mSgCK4BGAYYCw/s640/4%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
④「ヘッダーの設定」のダイアログボックスが表示される
ガジェットの確認をクリックすると、「ヘッダーの設定」のダイアログボックスが表示されます。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://3.bp.blogspot.com/-iweQz_zdLeo/W_idaLcs7EI/AAAAAAAAKgU/34wJQ-nPhBciuQnLi44NBJaNyI3C-aMwgCK4BGAYYCw/s640/5%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑤ダイアログ内の「イメージ」の設定をする
ヘッダーの設定ダイアログ内にあるイメージの選択部分で、タイトル部分に表示したい画像の設定を行います。
- コンピュータからファイルを選択:使用しているPC内にある画像を選択します。
- ウェブから選択(画像のURLを貼り付け):ウェブ上にある画像のURLを入力して画像を設定します。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://4.bp.blogspot.com/-D_jRykJxhvA/W_idc7FmtHI/AAAAAAAAKgc/lR1BjReRuCsdREVWFv-OsSKzJ5f_6egagCK4BGAYYCw/s640/6%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑥プレースメントの「タイトルと説明の代わり」にチェックを入れる
プレースメントでは、画像をどう表示するかの設定を行います。
ここでは、「タイトルと説明の代わり」にチェックを入れることによって、画像のみを表示することができます。
プレースメントの下に「画像を幅○○ピクセルに縮小します」とありますが、画像のサイズが大きかった場合には、表示されたピクセルに縮小されることを表しています。
※画像のピクセルの変更方法は次の項目「画像のピクセルの変更方法」で説明しています。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://2.bp.blogspot.com/-Urny9YkXxc4/W_idfsNJ9wI/AAAAAAAAKgo/oBpdEJnD_EYazrTbuqvOaZz5n-5373HuwCK4BGAYYCw/s640/7%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑦「保存」をクリック
すべての設定が終了したら「保存」をクリックします。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://3.bp.blogspot.com/-k82OIrtr8Qs/W_idiJugnyI/AAAAAAAAKgw/_ZFcEn1JRu8mRKo3KHvIGU0R_-LGMGtpQCK4BGAYYCw/s640/8%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
画像のピクセルの変更方法
画像のピクセルの変更方法は、私は「ペイント」を使用しています。
他にも方法があるとは思いますが、今回は「ペイント」を使用した画像のピクセルの変更方法を説明します。
①パソコン内の「ペイント」ソフトの検索
まずは、パソコン内にある「ペイント」ソフトを起動します。
「ペイント」ソフトがどこにあるかわからない場合には、パソコン内を検索して探してください。
※パソコンの左下にある検索欄に「pa」や「ペイント」と入力するとペイントソフトが検索されます(下の画像:青枠・赤枠)。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://1.bp.blogspot.com/-2LEYXZ1-jSQ/W_idlGAm6YI/AAAAAAAAKg4/GfUnQkAjatc27Ah6G8qB4FvKbAT6JDMpgCK4BGAYYCw/s640/9%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
②「ペイント」ソフトを立ち上げる
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://3.bp.blogspot.com/-Ysff97v8-Wo/W_idoFPcKWI/AAAAAAAAKhA/10QyntwYrXYcmwZgXcnEnC8jg6Egp_zxQCK4BGAYYCw/s640/10%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
④「貼り付け」から画像を表示する
「貼り付け」をクリックし、ピクセル数を変更したい画像を選択し表示します。
![ãBlogger / Vaster2 ã«ã¹ã¿ããGoogleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。¤ãºãBloggerããã°ã®ã¿ã¤ãã«ã«ç»åã表示ãããæ¹æ³](https://2.bp.blogspot.com/-RrW9rcGdWqQ/W_idqeNysKI/AAAAAAAAKhM/s6Pt2rqny54lOKtH3sccb5W_FpirPpSPACK4BGAYYCw/s640/11%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑤「サイズ変更」をクリックする
画像を表示したあとに、「サイズ変更」をクリックします。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://1.bp.blogspot.com/-2Bjqa2vcla8/W_idtBY-KLI/AAAAAAAAKhY/srp7X7X4FnEeroEGThNKuFzxr8pE-IfSQCK4BGAYYCw/s640/12%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑥「サイズ変更と傾斜」ダイアログが表示される
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://1.bp.blogspot.com/-6uRDuFbIeiA/W_idwm3oTlI/AAAAAAAAKhg/Ki9stunGtggi1MUeAHH1-owAjVMWOJ63QCK4BGAYYCw/s400/13%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑦「サイズ変更」のピクセルにチェックを入れる
「パーセント」と「ピクセル」を選択できるので、「ピクセル」の方にチェックを入れます。
水平方向、垂直方向の値を変更することにより画像のピクセル数を変更することができます。
「縦横比を維持する」にチェックをしていると、水平方向と垂直方向のピクセル数が連動して変化します。
連動させたくない場合には、チェックをはずした状態で水平方向と垂直方向のピクセル数を変更します。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://1.bp.blogspot.com/-cff11-NWmPw/W_id1UR550I/AAAAAAAAKhs/UMDVBYRJzcABL5f_blBYJMIGznrqjdmyQCK4BGAYYCw/s400/14%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
⑧「OK」をクリック
ピクセル数の変更が終了したら「OK」をクリックします。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://3.bp.blogspot.com/-AANOOu3NZO0/W_id32YpQzI/AAAAAAAAKh0/ax180rP55uQ12K8hdf3cXsB7Ub-Fu1l5wCK4BGAYYCw/s400/15%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
※縦横比を維持しなかった場合の画像の変化
試しに縦横比を維持せずに「水平方向:1000ピクセル」と「垂直方向:500ピクセル」で画像を変更した場合の画像の変化は以下のようになります。
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://1.bp.blogspot.com/-3ZkiZomXr-U/W_id6LaajVI/AAAAAAAAKiE/1LBoWYRUh2YZqM6chVi9fhLrK8fqtJWHACK4BGAYYCw/s400/16%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
![Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。今回は、「ブログのタイトルを文字表示から画像表示へ変更する方法」を説明します。](https://3.bp.blogspot.com/-yjODfPnd3Mo/W_id8lyaTUI/AAAAAAAAKiM/AhsQzUA0k3wXntWLasapWtERB525P03dgCK4BGAYYCw/s640/17%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB%25E7%2594%25BB%25E5%2583%258F.jpg)
まとめ:今回のおさらい
2人とも、ブログのタイトルを変更することができたかな?
タイトルを変更した後は、どのように表示されているかきちんと確認するようにしようね!!
できたよ~!!
簡単だった!!
僕もできました!!
ブログのタイトルを、文字表示から画像表示へ変更することは結構簡単に行うことができます。
ただ、画像の大きさの設定を誤るとブログを表示したときに、横幅が足りなかったり、縦長になりすぎてしまったりして、おかしな表示になってしまうことがあります。
そのようなことにならないように、ちょうどよい大きさにピクセル変換することが大切です。
自分の好みの画像をタイトルにして、おしゃれなブログを作っていきましょう。