BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» gooブログカスタマイズ タイトル画像を設定する方法

このエントリーをはてなブックマークに追加

gooブログカスタマイズ タイトル画像を設定する方法

   投稿日: 2017/07/21    投稿者:webコラム

747b8f2a4054fb149a68268ee2a20fb9_s.jpg


こんにちは! ライターのモモタロウです。

今回は、gooブログカスタマイズ、タイトル画像を設定する方法をお伝えします。

20170625-1.jpg

上の画像にあるタイトル部分に画像を設定します。
是非、試してみて下さいね。

タイトル画像を設定するには?


6c615535ec508d37a5dbdaca7c0f44ba_s.jpg
※今回は上の画像をタイトル画像に用います。

まず、gooブログにログインします。

最初に、アップロードする画像を、左のメニューリストの「画像フォルダ」画面でアップしておこう。
20170625-4.jpg
※上の画像で四角で囲った部分をクリックしてアップする画像を選択してアップロードします。


次に、アップロードした画像のオリジナルタグをコピーします。下の画像の四角で囲った部分です。
20170625-6.jpg



その後、メニューリストにある「テンプレート編集」をクリックして、で「テンプレート編集画面」に移り、
「CSSデータ」内の「ヘッダーの指定」部分を見つけます。

20170625-3.jpg

/* ヘッダーの指定 */
#header {
 background-color: #FFE8E8;
 padding:35px;
 border-bottom: 1px solid #FFDFDF;
 background-image: url(/images/tmp_sm_pp_l/head_bg.gif);
}

「ヘッダーの指定」にある background-image タグのURLを変更します。

今回は、先ほどコピーしたオリジナルタグをURL部分に書き換えます。

以下の通りです。

コピーしたオリジナルタグ
<img src="http://blogimg.goo.ne.jp/user_image/1f/4a/40f734f94f78a5e95643dfe036fa5250.jpg"> の
URL部分を抽出して、

background-image: url(/images/tmp_sm_pp_l/head_bg.gif);
                ↑ここの部分を書き換えます。

プレビューすると・・・

20170625-7-35.jpg

表示させたい画像の一部がブログのタイトル部分に表示されました。

/* ヘッダーの指定 */
#header {
 background-color: #FFE8E8;
 padding:35px;
 border-bottom: 1px solid #FFDFDF;
 background-image: url(/images/tmp_sm_pp_l/head_bg.gif);
}
これをもう少し、具体的に表示したい場合は、padding タグの数字を変更します。

今回は、「35px」 を 「180px」 に変更してみよう。
20170625-7-180.jpg


プレビューすると・・・

20170625-8.jpg

paddingタグの数字は任意です。デザインに合わせて、数字を変更するとよいでしょう。


今回は画像を設定変更した結果、「写真付きで日記や趣味を書くならgooブログ」のタイトル部分が見にくくなりました。この部分は次回以降、見えるように変更する方法をお伝えします。

まとめ

いかがでしたか?

gooブログカスタマイズで、オリジナルブログをさらにブラッシュアップしてみてくださいね。




カテゴリ:

TOPへ