BLOG CATEGORY

Monthly Archives

長フチコンテンツ

サイバーアクセル？何者や

サイバーアクセル？<br />何者や
サイバーアクセル？
何者や

ホームページ制作？だからどうした①

ホームページ制作？<br />だからどうした①
ホームページ制作？
だからどうした①

ホームページ制作？だからどうした②

ホームページ制作？<br />だからどうした②
ホームページ制作？
だからどうした②

SEO対策？怪しい話しか聞かないぞ

SEO対策？<span>怪しい話<br />しか聞かないぞ</span>
SEO対策？怪しい話
しか聞かないぞ

集客アドバイザー？よう分からん

集客アドバイザー？<br />よう分からん
集客アドバイザー？
よう分からん

俺なりのまとめを伝える！

俺なりのまとめを伝える！
俺なりのまとめを伝える！

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » webコラム» JUGEMブログカスタマイズ　ヘッダー部分の画像を変更する方法

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

JUGEMブログカスタマイズ　ヘッダー部分の画像を変更する方法

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

3ede0a9409fb5cb238854de88c07f69c_s.jpg

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

今回は、JUGEMブログカスタマイズ　ヘッダー部分の画像を変更する方法についてお伝えします。

テンプレートをカスタマイズ用に変更しよう


まず、JUGEMブログのテンプレートをカスタマイズ専用に設定します。

20170326-0.jpg


メニューバーの「デザイン」→「PCデザイン・フォント変更」をクリックします。


20170326-0-1.jpg

「テンプレートを追加する」をクリックします。

メニューバーの「カスタマイズ用」をクリックします。

20170326-0-2.jpg

下の画像のように、いくつかのテンプレートが用意されています。

20170326-0-3.jpg
今回は、「custom05ex」を選択しました。
下の画像の通りです。
20170331-1.jpg





20170331-2.jpg

画像をアップロードしよう

次に、ヘッダー画像をアップロードします。

メニューバーの「データ管理」→「画像の管理」→「画像アップロード」にて、
画像をアップロードします。

20170331-3.jpg
アップした画像の「画像の説明/画像を呼び出すタグ」のURLを控えておきます。


CSSを編集しよう


次に、CSSの記述を変更します。

20170331-5-1.jpg

メニューバーの「デザイン」→「HTML・CSS編集」をクリックします。

CSS編集フォームで、デフォルトの
width:760pxを630pxに変更します。
eigth:180pxを427pxに変更します。

その後、下記の部分について、
background-image:url(http://img-cdn.jg.jugem.jp/e43/3543405/201703●●_953315.jpg); 

先ほどの画像がアプロードされた先のURLにカッコの中を置き換えます。

ブログを確認すると・・・

20170326-6.jpg


まとめ


如何でしたか？

JUGEMブログのヘッダー画像を変更すれば、オリジナリティーの高いブログになります。

ぜひ、試してみてくださいね。


カテゴリ:

TOPへ