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

2007年12月28日

ブログ改造計画Ⅰ「トップ画像をオリジナルに」

「ブログを改造したい!」と、何より思うのは、
やはりこのトップ画像を自分のお気に入りの写真に変えたい・・・
と言う希望が、まず一番多いでしょうね♪

難しい・・・と、思うかもしれません!!
しかし、簡単に説明してしまえば
写真をブログアップして、「とある所に、そのアドレスを入れるだけ!」です
頑張ってみてください(^^)b

1.テンプレートの追加
今使用しているテンプレートを改造して、失敗してしまうと痛いので、改造用にもう一つテンプレート を追加して置きます。
「管理画面」→「ブログの設定、テンプレート」→「テンプレートの追加」
説明には、テンプレート名「花火」を使用しています。

2.画像の大きさの確認
先ほどの画面の、追加したテンプレートの「カスタマイズ」をクリック
『スタイルシート』の部分を見ていきます(ブログの改造は、ここをいじくる事が多いです。)

スタイルシートの上から1/4くらいの所に
#container{font-size:12px;
background:#FFFFFF;
width:760px;
margin:0px auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
text-align:left;
}

#banner,#subbanner{
background:#fff url(/_img/fireworks/fireworks._top.jpg) no-repeat left top;
padding:0px 0px 0px 0px;
height: 220px;
}

このような部分があります。頑張って探してみてください!!
ピンクの文字が、目印です!!)
赤字がブログの幅の設定で、写真の横幅になります。(変更しないほうが良いです。・・・たぶん)
青字がトップ画像の縦幅の設定で、これが写真の縦幅になります。(変更可能、写真と合わせてくださ い。今回は変更しないとして続けます。)
と言うわけで、写真のサイズは、横760px、縦220pxと言うことが判明しました。

3.写真の編集
トリミングと画像の大きさ変更を駆使して、760×220の大きさに望みの写真を編集します。
文字などを入れたい場合は、通常「フォトショップ」などのソフトが必要ですが(私も使用)
持っていない人のために、エクセルでの作り方を解説しましょう。
応用編「Excelで写真編集」

4.普段の記事のアップのときと同じように、写真をブログ管理画面の「写真の一覧」からアップロー ドしてください。
アップできたら、同じ画面で今アップした写真をクリックすると、写真が開くと思います。
ブログ改造計画Ⅰ「トップ画像をオリジナルに」
これをクリックしたときと同じような画面が開くと思います。
この画面のURLをどこかに書き留めておいてください。
この画像であれば
//img01.naturum.ne.jp/usr/kawatombo/hyousi108.JPG
となります。

5.2.で表示したスタイルシートの緑字の部分と、先ほど書きとめた画像のURLを入れ替えます。
「プレビュー」ボタンで、確認出来ますので、やってみてください!

6.下の方にある、「登録」ボタンを押します。
「5.」で上手くいかなかったら、「登録」ボタンは押さずに、「テンプレート」をクリックして、やり直しましょう(^^)b

7.上手くトップ画像の入れ替えが出来たら、次回以降は簡単です!
新しいトップ画像用の写真が出来上がったら、以前のトップ画像と同じ名前にする 。
画像一覧から「同じ名前のファイルを上書きする」にチェックを入れて、アップロードするだけでトッ プ画像が入れ替わります。
この方法の場合、すぐには入れ替わらない事も多いので、一度インターネットエクスプローラーを閉じて、再度ブログを開いてみましょう!!


Kawatombo Ken

この記事が役に立ったと思ったら・・・
ぜひご協力くださいm(__)m
にほんブログ村 釣りブログ フライフィッシングへ
にほんブログ村のランキングに参加中です!
一日一回ワンクリックお願いします♪


同じカテゴリー(カスタマイズ基本編)の記事画像
ブログ改造計画Ⅶ「ブログ背景を変更」
ブログ改造計画Ⅵ「日付部分のカスタマイズ」
ブログ改造計画Ⅴ「サイドバーをオリジナルに」
ブログ改造計画Ⅳ「シンボルマークを入れよう!」
ブログ改造計画Ⅲ「記事の背景に写真を!」
同じカテゴリー(カスタマイズ基本編)の記事
 ブログ改造計画Ⅶ「ブログ背景を変更」 (2008-06-29 09:40)
 ブログ改造計画Ⅵ「日付部分のカスタマイズ」 (2008-01-29 18:16)
 ブログ改造計画Ⅴ「サイドバーをオリジナルに」 (2008-01-27 00:40)
 ブログ改造計画Ⅳ「シンボルマークを入れよう!」 (2008-01-25 23:55)
 ブログ改造計画Ⅲ「記事の背景に写真を!」 (2008-01-06 23:50)
 ブログ改造計画Ⅱ「ブログタイトルの文字変更」 (2008-01-05 00:00)

この記事へのトラックバック
~~ ブログの第一歩はテンプレート選びから。 ~~ ◆好みの物に変更沢山の種類が用意されており、大きく分けて次のタイプがあります。1)サイドバーが右または、左の一方にあり、中...
ブログ*TOP画像のカスタマイズ【ロックフィッシュ*パラダイス】at 2009年08月03日 17:41
この記事へのコメント
今晩は
続いてのオリジナル化・・への方法紹介ありがとうございます、
さて・・トップ画の入れ方ですが絵のアドレスは・・コピーを使った方が間違えませんよー、・・・きっと・・私も初めはメモしてましたが(^^;なかなか?
コピーが簡単です。
サイドの記事も参考に成りました・・
次の文字関係は参考になります・・きっと・・期待してます。

では 又。
Posted by type r tata at 2008年01月09日 21:31
あの水神ネットの画像、トップにはうってつけですね。
全体的にシンプルなデザインの中で、凝ったネットが引き立って
サイト・デザインとしても、とってもいい感じの仕上がりだと思います。
Posted by jbopperjbopper at 2008年01月10日 19:43
type r tataさん、こんばんは!
>コピーを使った方が・・・
全くその通りです。私も何度も間違えましたよ・・・(;^^A

トップの文字以外にも、色々な改造方法を今後もアップしていきますね♪


jbopperさん、こんばんは!
今回のトップ画像は、教えてもらった方法で作りましたよ。
簡単且つ綺麗に出来ますね!
エクセルを使うと、どうしても画像が少々荒くなってしまうんで・・・(;^^A

やはり改造はバランスが重要ですよね(^^)b
Posted by Kawatombo KenKawatombo Ken at 2008年01月10日 21:44
こんばんは Kawatombo Kenさん。
親切な方がいるものだと思いました。説明、うまいですね。
参考にさせていただきます。
タイトルくらい改造したいものだと思っていました。
しばらく先になると思いますが、チャレンジしてみます。
Posted by ナムターンナムターン at 2008年02月08日 00:02
ナムターンさん、こんばんは!
参考になったのであれば、私もこの記事を書いた甲斐があるというものです!!

>説明、うまいですね。
そうですか?ありがとうございます。
私自身かなり苦労したんで、その成果かも知れないですね?

もし判らない事があれば、メールを下さい、更に詳しく説明しますよ♪
ただ、くれぐれも改造は自己責任でお願いしますね!!
Posted by Kawatombo KenKawatombo Ken at 2008年02月08日 00:10
やっと念願のオリジナルブログが出来ました(*^_^*)ありがとうございました!!

これからも参考にさせてもらいます♪
Posted by ココちんココちん at 2009年02月11日 14:30
ココちんさん、こんばんは!

今見てきましたよ(^^)b
とても全体がよく調和した良いブログになっていますね♪

改造はココが入口です!!
まだまだ奥は深いですよぉ~(笑)
Posted by Kawatombo KenKawatombo Ken at 2009年02月11日 18:10
こんばんは。

ブログ初心者の私でもとても分かりやすくて参考になりました(^-^)/
これからも、参考にさせて下さい♪

ありがとうございましたぁm(_ _)m
Posted by ボブ at 2009年03月31日 02:50
参考させていただきました。

ありがとうございます。
Posted by betykatebetykate at 2009年05月14日 01:46
教えて~・・・
ではいろいろアドバイス有り難うございます。どうやら私には敷居が高かったようです。

そんなワケで2カラムに変更しようと思います。いろいろ教えていただいたのに申し訳ありません。他の事で分からなかったら、また寄らせていただきます。
Posted by myconidmyconid at 2009年06月16日 00:40
myconidさん、こんばんは!

返信遅くなりまして、申し訳ありませんm(__)m
要は100%で無い方の3カラムを使用すれば良いと思うんですがね♪

幅広改造については、私のほうでも研究中です
いずれこのブログで記事にしようかとは思っていますので、その時までお待ちください(^^)b
Posted by Kawatombo Ken at 2009年06月19日 02:13
はじめまして。
とても参考になりました!
トップを写真にしたいと思っていましたところ、こちらのブログに会えました(^^)
まだまだ基本編ですが、これから少しずつ変更していきたいと思います。
ありがとうございました。
とりあえず、タイトルは黄色ですが・・・(笑)
Posted by karen at 2009年10月18日 14:23
やっと できました
ありがとう ございました 
約2週間かかりましたが、
結果オーライ

何度も何度もやり直しましたが、
出来て 嬉しいです

文字の 羅列は 正直いって 戸惑い
ましたが・・・・・・

しかし 文字の羅列で 画像とか
出てくるなんて すごい もんですねえ

あたり前に みてる ネットなんかも
文字 文字 文字なんですよね

かなり タグみて 驚きました
それにしても
ありがとう ございました 
Posted by aerial navyaerial navy at 2009年10月19日 22:40
karenさん、こんばんは!

お役に立てて嬉しいです(^^)b
top画像を変更するだけでも、「私のブログ♪」って感じがしてきますよね!

色々試してみてくださいね!!
Posted by Kawatombo Ken at 2009年10月20日 23:14
aerial navyさん、こんばんは!

出来ましたか!?
良かったです、パソコンに詳しくない人向けに編集したんで
「苦労したけれど出来た」と言う感想が一番嬉しいんですよ♪

これが出来れば、かなりの改造が可能ですよ!!
やる事は同じですからね(^^)b
頑張ってみてください
Posted by Kawatombo Ken at 2009年10月20日 23:19
でも タグ見ると 文字文字ですから・・
訳がわかりません
でも 2週間かかりましたが なぜか 突然 ここかなと・・・
urlの後に ( 入れて アップした 画像のurl コピぺして  )
で 閉じて  そうしたら 変わっておりました 偶然です
それでも 画像アップして って
何だって?・・・ 頭これで 2週間 たってました

でも 感激でありました
一回みてください

シーサイドタウン日記です
道志行ってますが 今度は 渓流の釣りで お世話になるかも・・・知れませんね
また よろしくお願いします
Posted by aerial navyaerial navy at 2009年10月21日 00:02
Kawatombo Kenさん。はじめまして。

おかげさまでtop画像オリジナルに出来ました。

ありがとうございます。

これからも参考にさせて下さい。

よろしくお願いいたします。
Posted by zizouzizou at 2010年08月16日 18:00
 先生~!初めまして!
まだブログ初めてから数日です。カスタマイズを諦めていました。
楽しそうなブログを覗いてたら、先生のブログに巡り合いました。
なんとかテンプレートを変更できました。お世話になり、ありがとうございました。
 ほかにもたくさんカスタマイズしてみるつもりです。
Posted by firstcorner.35firstcorner.35 at 2011年12月06日 09:35
Kawatombo Kenさん、はじめまして。

ナチュラムブログ、テンプレート検索で、辿り着きました。
ナチュラム本体のヘルプではわかりにくく、こちらに来たらすぐに出来ました。
大変助かりました。ありがとうございます。また、おじゃまさせていただきます。m(__)m
Posted by RyoパパRyoパパ at 2013年10月10日 08:41
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

アクセスカウンタ
プロフィール
Kawatombo Ken
Kawatombo Ken
Kawatombo Ken(右)
       カワトンボネット、常時依頼受付中!
   フライボックス、試作開始!
Kawatombo TOMO(左)
     フライリール、試作開始!
      TOMO-バンブー、製作決定!?
QRコード
QRCODE
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 10人
ブログ作成はコチラ
あなたもナチュログでアウトドア生活を綴ってみませんか?
< 2024年04月 >
S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        
過去記事
Information
アウトドア用品の
ご購入なら!

オーナーへメッセージ
削除
ブログ改造計画Ⅰ「トップ画像をオリジナルに」
    コメント(19)