ナチュログ管理画面 海釣り・ソルトウォーター 海釣り・ソルトウォーター 関東 アウトドア&フィッシングナチュラムアウトドア用品お買い得情報

2007年07月16日

お手軽なblog@naturumのデザイン変更

めちゃめちゃお手軽なblogデザインの変更手順です。
TOP画像だけでも変えたいけど、どうやんの?
って人向けにどうぞ。

TOPの画像をお気に入りな画像に入れ替えたり
ブログのタイトル画像とか入れ替えたり
CSSとかHTMLとかさっぱり「ワカンネ」って人向けの変更手順紹介です。
※手順はFireFox向けです。
手順は簡単。
そっくりそのまま入れ替えちゃえば良いんです。
おいらみたいな判ってない人はムツカシイ事しちゃいけないんです。

で、その手順。
例として風景写真 2カラム:月夜を参考事例に。

■手順1:自分のBlog内に使われている画像を丸ごとDLする。
 ①FireFoxにて「BlogのTOP画像」を右クリック→「ページ情報を表示」クリック
 お手軽なblog@naturumのデザイン変更

 ②ページ情報ウィンドウが開く。

 ③ページ情報内の「メディア(M)」のタブを選択。
 お手軽なblog@naturumのデザイン変更

 ④ここから表示されているWEB内にある画像ファイル等をDL出来るので
  自分のBlogに使われている画像を選んで「名前を付けて保存」をクリックしてダウンロードする。
 お手軽なblog@naturumのデザイン変更
 ※任意の場所に名前を変更しないでそのまま保存してください。
 風景写真 2カラム:月夜の場合ですと
 お手軽なblog@naturumのデザイン変更
 ・top_img_tukiyo.jpg
 ・bnr_long_tukiyo.jpg
 ・tukiyo_bg_2.jpg
 ・bnr_s_tukiyo.jpg
  これらの画像が利用されているので保存する。

■手順2:変更する画像を用意する。
 ①自分で差し替えたい画像を用意する。
  画像はDLした画像と同じサイズで用意するとレイアウトが全く崩れないので
  同じサイズで画像を用意する。
  画像編集ソフトを持ってない人はココ参照。フリーソフトでも良いものが揃ってます。
  とにかくポイントは
   ・同じファイルネーム
   ・同じサイズ
   ・同じ枚数

  の画像を用意する」ことです。
  慣れたら色々チャレンジしておいらに教えてください。

 ②用意した画像
 お手軽なblog@naturumのデザイン変更

■手順3:画像をUPロードする
 Blogの記事に載せなくても画像はUP出来ます。その手順。
 ①blog@naturum管理画面TOP→マイページ
  「画像・動画の一覧」をクリック。
 お手軽なblog@naturumのデザイン変更
 
 ②「登録画像の一覧」ページに移動して用意した画像をUPロードする。
 お手軽なblog@naturumのデザイン変更

 ③登録した画像をクリックして画像のURLを取得する。
  サムネイル画像をクリックするとその画像がブラウザ上で表示されます。
  その時のURLをメモっておく。
 お手軽なblog@naturumのデザイン変更
  UPした画像のURLを全てメモっておく。

■手順4:CSSに画像の場所を記述する。
 ①「オリジナルデザインの登録」ページに切り替える。
  blog@naturum管理画面TOP→デザイン→オリジナルデザインの登録
 お手軽なblog@naturumのデザイン変更

 ②「スタイルシート」内に画像のリンク先が記述されているのでそれを書き換えていく作業を行う。
  このとき、スクロールして画像記述場所を探してもいいんですけどとてもめんどくさい&複数の
  記述があるので、モレを無くす&メンドクサクナイ方法としてブラウザの検索機能を使って画像
  リンクが記述されている所を探します。

 ③ブラウザの検索機能で画像リンクを探す。
  「Ctrlキー+F」で検索ウィンドを出す。

 ④差し替える画像のファイルネームを検索する。
  例)「top_img_tukiyo.jpg」を検索してみる。
 お手軽なblog@naturumのデザイン変更
  
 ⑤検索Hitした全てのスタイルシート内の画像リンク先を先ほどメモしたURLに書き換える。
 変更前 (/_img/tukiyo/top_img_tukiyo.jpg)
 変更後 (//img01.naturum.ne.jp/usr/mameeden/top_img_tukiyo.jpg)

 ※各個人のblogでURLは異なりますので上記はおいらのblogの場合です。

 ⑥全ての画像を同様に画像リンクの記述を探して新しいリンク先に変更する。

 ⑦全ての画像リンク先の記述を変更し終わったら「登録」する。

■手順5:ちゃんと出来てるか確認
 ①登録後、自分のblogを確認する。
  ちゃんと変更されてました。
 お手軽なblog@naturumのデザイン変更
 
 ②完成です。

以上がお手軽blog@naturumのデザイン変更でした。
長く書きましたけど、単純にUPした画像のリンク先をCSSに記述するだけの単純作業です。
メニュー毎に画像やらアイコンやらもCSSを変更すれば可能です。

以上、台風で釣りいけなかったのでちょこっと解説してみました。
中の人はCSSなんぞほとんど理解してないんですがねw

同じカテゴリー(blogの簡単見た目変更)の記事画像
Blog模様替えして見た。
同じカテゴリー(blogの簡単見た目変更)の記事
 Blog模様替えして見た。 (2008-01-12 19:07)
この記事へのトラックバック
釣りいきてぇ さんブログ参考にさせていただきました。また何かありましたら、よろしくおねがいします。
変更しました。【飲んだくれオヤジの外寝】at 2008年04月30日 11:19
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
お手軽なblog@naturumのデザイン変更
    コメント(0)