2007年07月16日
お手軽なblog@naturumのデザイン変更
めちゃめちゃお手軽なblogデザインの変更手順です。
TOP画像だけでも変えたいけど、どうやんの?
って人向けにどうぞ。
TOPの画像をお気に入りな画像に入れ替えたり
ブログのタイトル画像とか入れ替えたり
CSSとかHTMLとかさっぱり「ワカンネ」って人向けの変更手順紹介です。
※手順はFireFox向けです。
TOP画像だけでも変えたいけど、どうやんの?
って人向けにどうぞ。
TOPの画像をお気に入りな画像に入れ替えたり
ブログのタイトル画像とか入れ替えたり
CSSとかHTMLとかさっぱり「ワカンネ」って人向けの変更手順紹介です。
※手順はFireFox向けです。
手順は簡単。
そっくりそのまま入れ替えちゃえば良いんです。
おいらみたいな判ってない人はムツカシイ事しちゃいけないんです。
で、その手順。
例として風景写真 2カラム:月夜を参考事例に。
■手順1:自分のBlog内に使われている画像を丸ごとDLする。
①FireFoxにて「BlogのTOP画像」を右クリック→「ページ情報を表示」クリック

②ページ情報ウィンドウが開く。
③ページ情報内の「メディア(M)」のタブを選択。

④ここから表示されているWEB内にある画像ファイル等をDL出来るので
自分のBlogに使われている画像を選んで「名前を付けて保存」をクリックしてダウンロードする。

※任意の場所に名前を変更しないでそのまま保存してください。
風景写真 2カラム:月夜の場合ですと

・top_img_tukiyo.jpg
・bnr_long_tukiyo.jpg
・tukiyo_bg_2.jpg
・bnr_s_tukiyo.jpg
これらの画像が利用されているので保存する。
■手順2:変更する画像を用意する。
①自分で差し替えたい画像を用意する。
画像はDLした画像と同じサイズで用意するとレイアウトが全く崩れないので
同じサイズで画像を用意する。
画像編集ソフトを持ってない人はココ参照。フリーソフトでも良いものが揃ってます。
とにかくポイントは
・同じファイルネーム
・同じサイズ
・同じ枚数
の画像を用意する」ことです。
慣れたら色々チャレンジしておいらに教えてください。
②用意した画像

■手順3:画像をUPロードする
Blogの記事に載せなくても画像はUP出来ます。その手順。
①blog@naturum管理画面TOP→マイページ
「画像・動画の一覧」をクリック。

②「登録画像の一覧」ページに移動して用意した画像をUPロードする。

③登録した画像をクリックして画像のURLを取得する。
サムネイル画像をクリックするとその画像がブラウザ上で表示されます。
その時のURLをメモっておく。

UPした画像のURLを全てメモっておく。
■手順4:CSSに画像の場所を記述する。
①「オリジナルデザインの登録」ページに切り替える。
blog@naturum管理画面TOP→デザイン→オリジナルデザインの登録

②「スタイルシート」内に画像のリンク先が記述されているのでそれを書き換えていく作業を行う。
このとき、スクロールして画像記述場所を探してもいいんですけどとてもめんどくさい&複数の
記述があるので、モレを無くす&メンドクサクナイ方法としてブラウザの検索機能を使って画像
リンクが記述されている所を探します。
③ブラウザの検索機能で画像リンクを探す。
「Ctrlキー+F」で検索ウィンドを出す。
④差し替える画像のファイルネームを検索する。
例)「top_img_tukiyo.jpg」を検索してみる。

⑤検索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のデザイン変更でした。
長く書きましたけど、単純にUPした画像のリンク先をCSSに記述するだけの単純作業です。
メニュー毎に画像やらアイコンやらもCSSを変更すれば可能です。
以上、台風で釣りいけなかったのでちょこっと解説してみました。
中の人はCSSなんぞほとんど理解してないんですがねw
そっくりそのまま入れ替えちゃえば良いんです。
おいらみたいな判ってない人はムツカシイ事しちゃいけないんです。
で、その手順。
例として風景写真 2カラム:月夜を参考事例に。
■手順1:自分のBlog内に使われている画像を丸ごとDLする。
①FireFoxにて「BlogのTOP画像」を右クリック→「ページ情報を表示」クリック

②ページ情報ウィンドウが開く。
③ページ情報内の「メディア(M)」のタブを選択。

④ここから表示されているWEB内にある画像ファイル等をDL出来るので
自分のBlogに使われている画像を選んで「名前を付けて保存」をクリックしてダウンロードする。

※任意の場所に名前を変更しないでそのまま保存してください。
風景写真 2カラム:月夜の場合ですと

・top_img_tukiyo.jpg
・bnr_long_tukiyo.jpg
・tukiyo_bg_2.jpg
・bnr_s_tukiyo.jpg
これらの画像が利用されているので保存する。
■手順2:変更する画像を用意する。
①自分で差し替えたい画像を用意する。
画像はDLした画像と同じサイズで用意するとレイアウトが全く崩れないので
同じサイズで画像を用意する。
画像編集ソフトを持ってない人はココ参照。フリーソフトでも良いものが揃ってます。
とにかくポイントは
・同じファイルネーム
・同じサイズ
・同じ枚数
の画像を用意する」ことです。
慣れたら色々チャレンジしておいらに教えてください。
②用意した画像

■手順3:画像をUPロードする
Blogの記事に載せなくても画像はUP出来ます。その手順。
①blog@naturum管理画面TOP→マイページ
「画像・動画の一覧」をクリック。

②「登録画像の一覧」ページに移動して用意した画像をUPロードする。

③登録した画像をクリックして画像のURLを取得する。
サムネイル画像をクリックするとその画像がブラウザ上で表示されます。
その時のURLをメモっておく。

UPした画像のURLを全てメモっておく。
■手順4:CSSに画像の場所を記述する。
①「オリジナルデザインの登録」ページに切り替える。
blog@naturum管理画面TOP→デザイン→オリジナルデザインの登録

②「スタイルシート」内に画像のリンク先が記述されているのでそれを書き換えていく作業を行う。
このとき、スクロールして画像記述場所を探してもいいんですけどとてもめんどくさい&複数の
記述があるので、モレを無くす&メンドクサクナイ方法としてブラウザの検索機能を使って画像
リンクが記述されている所を探します。
③ブラウザの検索機能で画像リンクを探す。
「Ctrlキー+F」で検索ウィンドを出す。
④差し替える画像のファイルネームを検索する。
例)「top_img_tukiyo.jpg」を検索してみる。

⑤検索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のデザイン変更でした。
長く書きましたけど、単純にUPした画像のリンク先をCSSに記述するだけの単純作業です。
メニュー毎に画像やらアイコンやらもCSSを変更すれば可能です。
以上、台風で釣りいけなかったのでちょこっと解説してみました。
中の人はCSSなんぞほとんど理解してないんですがねw
Posted by めま at 06:12│Comments(0)
│blogの簡単見た目変更
この記事へのトラックバック
釣りいきてぇ さんブログ参考にさせていただきました。また何かありましたら、よろしくおねがいします。
変更しました。【飲んだくれオヤジの外寝】at 2008年04月30日 11:19
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。