BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » 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へ