投稿日: 2017/07/21
投稿者:webコラム
こんにちは！ ライターのモモタロウです。
今回は、gooブログカスタマイズ、タイトル画像を設定する方法をお伝えします。
上の画像にあるタイトル部分に画像を設定します。
是非、試してみて下さいね。
タイトル画像を設定するには？
※今回は上の画像をタイトル画像に用います。
まず、gooブログにログインします。
最初に、アップロードする画像を、左のメニューリストの「画像フォルダ」画面でアップしておこう。
※上の画像で四角で囲った部分をクリックしてアップする画像を選択してアップロードします。
次に、アップロードした画像のオリジナルタグをコピーします。下の画像の四角で囲った部分です。
その後、メニューリストにある「テンプレート編集」をクリックして、で「テンプレート編集画面」に移り、
「CSSデータ」内の「ヘッダーの指定」部分を見つけます。
/* ヘッダーの指定 */
#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);
↑ここの部分を書き換えます。
プレビューすると・・・
表示させたい画像の一部がブログのタイトル部分に表示されました。
/* ヘッダーの指定 */
#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」 に変更してみよう。
プレビューすると・・・
paddingタグの数字は任意です。デザインに合わせて、数字を変更するとよいでしょう。
今回は画像を設定変更した結果、「写真付きで日記や趣味を書くならgooブログ」のタイトル部分が見にくくなりました。この部分は次回以降、見えるように変更する方法をお伝えします。
まとめ
いかがでしたか？
gooブログカスタマイズで、オリジナルブログをさらにブラッシュアップしてみてくださいね。
