千客万来計画 (TOP画像変更特別版)

千客万来計画 (TOP画像変更特別版) に関する記事です。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[RSS] [Admin] [NewEntry]

このブログは、ある方に対しての特別版ですので、一般の人が読んでもあまり参考にならないかも知れません。
また、FC2 のブログに特化しています。

あと、このページを読みながら、いきなり同時に作成しないで、まずは一度このブログの内容を読んで、重要と思われる箇所を把握してから作業してください。


まず、TOP画になる画像を作りましょう。
前に言ったように、横幅は 800px で作成してください。
縦幅は、特別こだわりません。

TOPgazou_zacking_2.jpg
雑王も横幅800pxの画像を用意しました。
上の画像をクリックすると、大きなサイズのページにリンクします。
ちなみに、リンク先の大きな画像のサイズは。
横サイズ 800px
縦サイズ 355px

です。

FC2 で使用できる画像サイズ(容量)は 500KB までです。
TOP画像は、色々と画像を張り合わせたりすれば 500KB を超える場合もありますから注意してください。
(500KBを超えるとアップロードできないですから、わかりますけどね。)

では、作った画像をアップロードしましょう。

71029_zacking_2.jpg画像のアップロードの仕方はわかりますよね。
FC2 の管理者ページ の左側にある ツール に中に ファイルアップロード ってのがあります。   これ→
ファイルアップロード をクリックして、ファイルの選択から 画像 が入っているファイルを選択して、アップロードボタンをクリックすれば 画像が入ります。
画像のファイル名はわかりやすいのが一番ですよ。
ブログに画像を差し込める方なら、比較的簡単な作業です。
TOP画像をアップロードしたなら、とりあえず第1段階は終了です。

71029_zacking_3.jpg次に、TOP画像 の変更作業を行います。
ここから、本格的にテンプレートのカスタマイズって感じになっていきます。
つまり、ますますわからない領域に入りますから、ちょっとだけ覚悟が必要です。
なんと言っても、他人様が作成したテンプレートです。 あなたのブログの為にオーダーメイドで作ったのではありません。
『 無理だ、改造出来ない 』 って感じたら、楽にカスタマイズできそうなテンプレートを1から探しましょう....。

では、TOP画像の変更は、FC2 管理者ページ の 環境設定 の中にある テンプレートの設定 をクリックします。


71029_zacking_4.jpg
すると、↑こんな一覧が出ます。
現在使用しているテンプレートには、旗のマークが入っていますね。
私のテンプレートは、Zacking_001 ってのを使っていますから、そこに旗のマークが付いています。

今回カスタマイズするのは FC2公式テンプレートの 『 flying_night 』 です。(まぁ、訳ありで.....。)

では、『 flying_night 』 の欄にある 複製ボタン を押して、コピーを作りましょう。
上の画像にある 『 flying_night_copy 』 が出現したと思います。

カスタマイズ作業は、コピー版を使ったほうが無難です。
テンプレートのカスタマイズに失敗すると、悲惨な目に合いますから、保険の意味があります。
では、『 flying_night_copy 』 の欄にある 編集 ボタンを押しましょう。

71029_zacking_5.jpg
こんな画面が出ますよね。
テンプレートの編集画面は、『 HTMLの編集 』と、その下に 『 スタイルシートの編集 』 の2つの画面が表示されます。

今回は、下のほうにある 『 スタイルシートの編集 』 を使って編集します。

『 スタイルシートの編集 』 を見ると.....。

@charset "EUC-JP";



/* 全体的な設定
------------------------------------------------------------ */

* {
margin : 0;
padding : 0;
font-style : normal;
font-weight : normal;


なんて言葉から始まっています。
何のことだかわかりません.....。
カスタマイズを説明している私でもあまり意味はわかりません.....。

でも、肝心なのは 設定 って言う日本語なんです。

スタイルシート に書かれている 設定 って日本語は、一番上が 『 全体的な設定 』 です。
その下にある 設定 ってのが 『 リンクの設定 』
その下が 『 強調の設定 』
んで、『 リストの設定 』『 引用の設定 』 って続きます。
その下に、『 コード 』『 Mac版IEの文字化け対策 』 ってなにやら 設定 みたいなのがあって、その次に 『 レイアウト用ブロックの設定 』 ってのがあります。

TOP画像を変更させるために必要な設定は 『 レイアウト用ブロックの設定 』 って項目です!

71029_zacking_6.jpg

ここの部分がキモです。
①の部分が 『 flying_night 』 オリジナルのTOP画像があるアドレスを示すもの。
②の部分が『 flying_night 』 オリジナルのTOP画像 のサイズを示しています。

さて、あなたが作ったTOP画像をいよいよ差し込んでカスタマイズしましょう!

まず、あなたが作成したTOP画像を、ファイルアップロードから探してください。
あ、テンプレートの設定画面は消しちゃダメだよ。
もう一つ、インターネットエクスプローラーから、新規にあなたのFC2管理者ページを立ち上げてください。 そのほうが無難です。

新規の管理者ページから、ファイルアップロード を立ち上げ、TOP画像になるファイルを探し、画像が出たら、その画像をクリックします。

TOPgazou_zacking_2.jpg
私はこの画像を使用します。(りしゃこの可愛いこと.....。)

ファイルアップロード欄に表示された TOP画像 にする画像をクリックすると、またインターネットエクスプローラーが勝手に起動して、そのTOP画像だけの表示画面になります。
その画面には、URL(アドレス)が表示されますよね。
画面の上の部分です。
雑王 のTOP画像だと
http://blog-imgs-14.fc2.com/z/a/c/zacking/TOPgazou_zacking_1.jpg
って表示がアドレス欄に出ます。

では、そのアドレス欄に書かれている URL をコピーします。

コピーの仕方はわかるとは思いますけど念のため。

マウスでアドレスの部分を 右クリック すると、アドレスの部分がブルーに変わります。
同時に、切り取り・コピー・貼り付け・削除 って項目もでますから、その中の コピー を選んで 左クリック すればコピーは完了です。

では、前の テンプレートの設定画面 に戻ります。

71029_zacking_6.jpg
この画面の ① の部分の カッコ()の中を消しちゃいます。

http://blog59.fc2.com/template/flying_night/image/flying_night_header.gif

この部分です。
これ以上でも以下でも、削除の内容を間違うと失敗です。

そして、その削除した部分に、さっきコピーした あなたが作ったTOP画像のアドレス をペースト(貼り付け)して下さい。

71029_zacking_7.jpg

私の場合はこうなります。
元のカッコからカッコまでの部分に
http://blog-imgs-14.fc2.com/z/a/c/zacking/TOPgazou_zacking_1.jpg
が差し込まれました。

試しに、スタイルシートの編集 の枠の下に、『 更新 』 と 『 プレビュー 』 ってボタンがありますから、『 プレビュー 』 をクリックしてみましょう。

雑王 の場合
71029_zacking_8.jpg
こんな感じでTOP画像が変わります。

この段階で 作成したTOP画像が表示されない場合は、画像のアドレスを間違っている可能性があります。
上記の方法をもう一度行ってください。


では、TOP画像 の変更に成功された場合です。

TOP画像が変わっているのに変ですよね。
画像の下側が表示されていないのでは.....?

つまり、画像サイズがオリジナルと違っているって事です。

800px×170px のサイズでTOP画像を作成しているなら、問題はありません。 でも、縦幅 170px のサイズはキャラクター画像を入れるのには小さすぎの感があります。

では、サイズの変更を行います。

71029_zacking_6.jpg
この画像の ② の数値を変更するだけです。
もちろん、① に画像のアドレスをコピー&ペースト(複製と貼り付け)する際、一緒に変更するほうが効率がいいです。

横幅は 800px で作成していると思います。
縦幅は、170px から、あなたが作成した画像の縦サイズの数値に書き換えてください。
サイズは、ファイルアップロードの画像の欄にも表示されるので、忘れた場合はそれを参照してください。
前もって、何ピクセルの画像を作るか決めてもいいです。 計算どおりにいかない場合もありますけど。

雑王の画像サイズの場合は前記のとおり
横幅 800px
縦幅 355px です。

では、私はテンプレートの縦幅サイズを 355px に変更します。
あなたは、あなたの画像の縦サイズの数値に変更してください。
サイズの数値を変更したら、また 『 プレビュー 』 ボタンをクリックしましょう。

71029_zacking_9.jpg
はい、ちゃんとTOP画像が表示されました。

成功しましたか......?

成功したなら、『 更新 』 ボタンをクリックして下さい。
これで、TOP画像を変更するカスタマイズは終了です。

成功したかなぁ......?




テンプレートのカスタマイズの第1歩は、やはり TOP画像の変更からだと思います。
オリジナルの TOP画像 が表示された瞬間は、私もちょっと感動しましたからねぇ.....。
この感動を味わってもらいたくて、実は今回 ムキになって 教えています。
あなたが TOP画像 の変更が出来るようになったら、この技術は あなたも誰かに 教えてあげてくださいね。
与えるのが 愛 ですよ。

TOP画像を変えると、自分のブログがますます好きになります。
誰かに見てもらいたいから、更新頻度も上がります。
更新頻度が上がれば、来てくれるお客さんの数も増えます。
いい事ばっかりですよ!
まさに 千客万来計画 って感じです.....。

オリジナルのTOP画像は、私的には下手でも良いと思っています。
特に、タレントの応援ブログを自負して行っているところは、TOP画像の有る無しで 情熱思い込み指数 が分かりますからね。


簡単なカスタマイズは、他にも 色の変更 とか サイズの変更 とかあります。
1冊ぐらいは、自分への投資の意味を込めて ブログカスタマイズ の本を買ったほうがいいと思いますよ。
本格的に html を勉強しろ なんて言いませんから.....。

雑王は 適当に自己流 って感じに行っていますので、本格的なカスタマイズの方法は、ぶっちゃけわかりません!
適当に自己流 でも、なんとかなるのがブログの良さなのかも知れませんけど.....。

あと、私のわからない事は、質問されても答えられませんから、ご了承下さいね。

今回はここまで。

FC2ブログランキング
↑画像↑ は ランキング直行バナーです。
クリックにご協力お願い致します。


スポンサーサイト

[RSS] [Admin] [NewEntry]

コメント
この記事へのコメント
かなり前の記事にコメントしてスミマセン・・・。
ここの記事で書いてある、TOP画像変更のやり方が分かりやすくて、FC2ではない私のブログでも、応用したら何とか変更する事が出来ました。

実際TOP画を変更してみると、ますます愛着が湧いてきますね。
そして、今回の画像はもともと壁紙用に作ってもらったものなので、今度は自分で作ってみたい気持ちにもなってきました。
また雑王さんのところでヒントになるものがあったら、勉強させてもらいますね。どもども、ありがとうございます。
2008/01/13(日) 17:58 | URL | ニシヤン #h.lYJhNM[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://zacking.blog59.fc2.com/tb.php/415-716b78bb
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。