ナチュログ管理画面 エコロジーライフ エコロジーライフ 関東 アウトドア&フィッシングナチュラムアウトドア用品お買い得情報

トップイメージの差し替える方法

Home > デザイン・改良点 > トップイメージの差し替える方法



トップイメージの差し替える方法 NaturumのBlogのデザインは大変良いのですが、始めから提供されているブログのテンプレートを使っている以上 どうしてもトップイメージが他のNaturumブログサイトと同じになり オリジナリティが無くなります。そこで自分だけのトップイメージに変更する方法をお伝えします。

トップイメージの縦横サイズの調べ方

 トップイメージを変更するには、先に 今表示されているトップイメージの縦横サイズを調べます。


調べ方には幾つかの方法があります。

 1)画面をキャプチャして、グラフィックソフトでサイズを測る方法。
 2)スタイルシートから画像のアドレスを調べ、テスト表示をして画像サイズを調べる方法。

上記の2つの方法がありますが、簡単に調べるのは、1)の方法です。ですが、後々にスタイルシートの編集しますので、2)の方法にて調べます。


調べ方法は、スタイルシートのファイルをオリジナルデザインの編集にあるスタイルシートから調べます。
(一旦、テキストエディタ・メモ帳等に貼り付けて編集作業をすると簡単です)

調べる所は、“#banner,#subbanner{”のあるところです。

例:
 #banner,#subbanner{
  background:#fff url(/_img/fishing01/fish001.jpg) left;
  padding:0px 0px 0px 0px;
  height: 220px;

上記の青太字の所になります。
(使っているテンプレートにより違います)


そして、トップイメージを調べるために・・・

#banner,#subbanner{
background:#fff url(/_img/fishing01/fish001.jpg) left;
padding:0px 0px 0px 0px;
height: 220px;

上記の青太文字のイメージファイルの部分をコピーします。

そのあと、ブラウザを起動してアドレス(URL)の所に、
http://○○○○○○.naturum.ne.jp/_img/fishing01/fish001.jpg

と、入力し、ブログで使われている、ブラウザ上でトップイメージを表示させます。
(上記の青文字の所は、使っているデザインにより変化します)

表示させた後、イメージ画像を右クリックし、プロパティを選択し、トップイメージの縦横サイズを調べます。


画像ファイルの準備とアップロード

 画像ファイルのサイズが解った所で、自分のお気に入りの画像を用意します。
グラフィックソフトで、画像編集し、JPEGもしくはGIF形式で保存します。
(保存するファイル名は半角英数小文字です)

出来あがった真新しいトップイメージファイルをNaturumで使っている“・画像・動画の登録、一覧、削除”機能でトップイメージをアップロードします。

一度アップロードしたトップイメージを確認します。
確認の方法は以下のアドレスで表示されれば確認は完了です。

http://ユーザー任意ID.naturum.ne.jp/usr/ユーザー任意ID/アップロードしたファイル名

(アップロードを行った場合、サムネイルの作成もされますが今回の場合はサムネイルは使いません)

※ユーザー任意ID:ブログを作成するときに使った任意IDで、表示するときにも使われます。
例:http://aff.naturum.ne.jp の場合は aff になります。


スタイルシートでの画像ファイルの指定方法

 スタイルシートの所で、アップロードした真新しいトップイメージのアドレスに書き換えます。

書き換える場所は、上記の方にあった、“#banner,#subbanner{”部分の一部を書き換えます。
場所は、以下の青太文字の所になります。

例:
 #banner,#subbanner{
  background:#fff url(/_img/fishing01/fish001.jpg) left;
  padding:0px 0px 0px 0px;
  height: 220px;

この url(/_img/fishing01/fish001.jpg) を

   url(/usr/ユーザー任意ID/画像ファイル名) に変更します

また、/usr/ユーザー任意ID/画像ファイル名 の部分を http://ユーザー任意ID.naturum.ne.jp/usr/ユーザー任意ID/画像ファイル名 と指定しても問題有りません。

変更が完了しましたら[登録]ボタンを押し保存します。
(テキストエディタ・メモ帳をお使いの場合は、編集テキストを全て選び、スタイルシートの所を差し替えて、Naturumにある[登録]ボタンを押します。)

登録完了後、ブログをテスト表示してトップイメージが切り替わっていれば成功です。
もし、変わっていなければ、どこか間違っています。
また、変に表示される場合もあります。


間違えやすい所は・・・

・アップロードした画像が間違っていた。
・アップロードした画像のファイル名を間違っていた。
・アップロードした画像のアドレスを間違ってスタイルシートに書いてしまった。
・スタイルシートの違うところを書き換えてしまった。
・大文字・小文字を間違って入力していた。

・・・等が考えられます。


あとがき:
 NAturumBlogを使っている人は意外と、トップイメージを差し替えているのが多いです。
ブログの記事が多くなり、リピータが増えてくるとトップページにオリジナリティがあると目立ちます。

また、イメージに人が写っていると殺伐としたイメージから和やかなイメージへと一変します。


□素材の無い方へ
 素材に関しては、インターネット上にあるフリーの素材を使えば良いかと思います。

同じカテゴリー(デザイン・改良点)の記事画像
ヘッダー部分と明細部分の間隔を調整する方法
サイドメニューにオリジナルメニューを追加するには
固定記事枠の作成
パンくずリスト「トピックパス」の設置・・・意外と便利
日付の所に記事タイトル & リンク設置
記事の回り込み
同じカテゴリー(デザイン・改良点)の記事
 足跡を残すことは危険 (2006-09-09 13:14)
 ヘッダー部分と明細部分の間隔を調整する方法 (2006-08-11 20:16)
 サイドメニューにオリジナルメニューを追加するには (2006-06-25 15:05)
 固定記事枠の作成 (2006-06-25 14:04)
 Blog故の泣き所・・・新着記事のLink設置 (2006-06-24 02:39)
 パンくずリスト「トピックパス」の設置・・・意外と便利 (2006-06-17 20:15)

この記事へのコメント
ふと、ブログについて困ったことがあり、
偶々見つけて参考にさせていただきました。
ありがとうございます。
Posted by poppopo at 2006年10月09日 19:41
はじめまして。

私もブログをカスタムしたいのですが、トップページの書き換えの件で質問です。上記を参考にしながら進めていったんですが画像は切り替わるものの一枚の画像がド~ンって感じではなくて同じ画像が3枚入ってしまいます。どこを変更すればよいのでしょうか?
また、トップページのブログの名前、プロフィールの色は変更できるのでしょうか?もしできるとすればどうすれば・・・。
質問ばかりですみませんがよろしくおねがいいたします。
Posted by KAZ at 2008年01月29日 21:28
画像ファイルのサイズを確認してください。
例:
http://aff.naturum.ne.jp/_img/fishing01/fish001.jpg
この場合、760x220ピクセルのイメージですが、小さい場合は複数表示され、大きい場合は、こぼれたり、スクロールバーが表示されたりします。
Posted by JamJam at 2008年07月13日 07:32
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
トップイメージの差し替える方法
    コメント(3)