ナチュログ管理画面 キャンプ キャンプ 東海 アウトドア&フィッシングナチュラムアウトドア用品お買い得情報
ブログ作成はコチラ
あなたもナチュログでアウトドア生活を綴ってみませんか?
< 2025年05月 >
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 31
アクセスカウンタ
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 20人
     
QRコード
QRCODE
Information
アウトドア用品の
ご購入なら!

2013年09月10日

トップ画像の変更方法

 
やっぱりネタ切れなので、私のブログを見てくださる私と同じブログ初心者の方のため、
とってもわかりやすいトップ画変更方法講座\(^o^)/
の、はじまりはじまり〜( ゚Д゚ノノ☆パチパチパチパチ
 
 
 
まず、変更したい画像を用意します。
トップ画像の変更方法
このブログの場合、
縦:960 ピクセル
横:228 ピクセル


の大きさで作りました。photoshopを使用しております。PSの場合ピクセルとは別でドキュメントサイズがありますが、このサイズは無視しちゃっていいです。これは印刷物等で使用する際のもので、ネット上ではピクセルだけが参照されます。


画像ができましたら、「管理画面」のメニューの「画像一覧」をクリックし、そこから先ほどの画像をアップします。

トップ画像の変更方法
アップするとファイル一覧に表示されます。表示されたサムネイル(赤丸部分)をクリックしてみてください。

トップ画像の変更方法
アップした画像が別ウインドウで開きます。そこに表示されたアドレス(赤丸部分)をのちのち使用します。

これはいったん置いておいて、また「管理画面」に戻ります。


 
次にいよいよカスタマイズですが、ブログの設定から「テンプレート」を選択しましょう。
 
トップ画像の変更方法
「テンプレートの追加・再選択」コーナーから「テンプレートの追加(赤丸部分)」を選択します。
 
ここでベースにしたいテンプレートを選択しましょう。
すでに使用しているテンプレを元にカスタマイズしたい場合でもここで再び同じテンプレを選択しましょう。

カスタマイズはとりあえず隠れて行い、うまく成功したらブログに反映させるためです。失敗を公開しないのを防ぐためですね。
 
 
テンプレを追加できたら、それの「カスタマイズ」をクリックします。
 
トップ画像の変更方法
するとこんな編集可能なテキストウインドウが4つ現れます。
今回編集するのは一番上(赤丸)のテキストです(^o^)
 

この画面の時に、ブラウザのメニューから「検索」を選びます。
たいてい“Ctrl + F”かな?Macの場合“⌘ + F”
 
検索で「_img」と入力します。

トップ画像の変更方法
するとこの画面に近い結果になると思います。
なんか違うぞ!という人は“Ctrl + G”または“次を検索”を押してこれに近いところを見つけてください。
選択したテンプレートによって微妙に違うので注意です。
だいたい上からすこ〜しスクロールした所にあります。
 
ここをいじります。
 
 
では、先ほど上でアップした画像のアドレス
トップ画像の変更方法
これですね。このアドレスをコピーします。
 
トップ画像の変更方法
そして、この部分の
url(/_img/3_shinryoku/top_bnr.jpg)の部分の
( )の中にペーストします。
 
これで画像が変更されます。
 
 
 
トップ画像の変更方法
後は微調整をします。
1:画像の横のサイズを入力します。
2:画像の縦のサイズを入力します。
3:先ほど変更したアドレス部分です。

 
1はブログの横のサイズにもなってますので要注意です。
なので、トップ画像を作る際は、選択したテンプレートの1と2の数値を初めに調べて、それに合わせて画像のサイズを決めるとミスがないと思います。
 
 
 
いじったら結果を見てみましょう。
 
編集したテキストボックスのすぐ下に「プレビュー」ボタンがあるので、そこをクリックしてチェックしてみてください。
どうですか?うまく画像変わってましたか?
 
 
うまくできた!と思ったら一番下にスクロールし、「登録」ボタンを押しましょう!
押さないと保存されませんので気をつけてください。

 
登録できたら、最後に「このテンプレートを使う」を押してブログに反映です\(^o^)/
 
 
簡単ですね〜!これでよりブログに愛着がわき楽しくなること間違いなしです^^
 
 
 
 
いや〜説明するって難しいですね!始めに「とってもわかりやすい」とか言っちゃいましたが
わかりやすくは無理でした!\(^o^)/
 
とにかく、簡単なので恐れず一度やってみましょー♪
 
 
↓他にも色々なカスタマイズ情報がいっぱいです
にほんブログ村 アウトドアブログ ファミリーキャンプへ
にほんブログ村




同じカテゴリー(■ブログいじり)の記事画像
トップ画変更&ブログの幅を広げた
ブログいじり〜カレンダー
livedoor相互RSSへ簡単?移行
ブログいじり〜カテゴリー帯の変更方法
同じカテゴリー(■ブログいじり)の記事
 トップ画変更&ブログの幅を広げた (2014-09-19 12:00)
 ブログいじり〜カレンダー (2014-07-04 12:00)
 livedoor相互RSSへ簡単?移行 (2013-11-12 12:00)
 ブログいじり〜カテゴリー帯の変更方法 (2013-10-24 12:05)

この記事へのコメント
セフォさん、ありがとうございます(^^)

昨日3時間位かけて頑張ったのですが選んだテンプレートと画像が微妙な仕上がりで暗い雰囲気のトップ画面に・・・(>_<)
違うテンプレートでは画像を上書きする場所を見つけられず。。。(-"-;A

この方法なら無知なぴーままでも画像変更できそうです♪
さっそく試してみます!
Posted by ぴーままぴーまま at 2013年09月10日 20:18
こんばんは!

PCの画面をそのまま記事欄に載せるには
どうしたら良いのですか?
Posted by 第1コーナー第1コーナー at 2013年09月10日 20:49
ぴーままさん

こんばんは!これでわかりますかね(^^;
一度挑戦してみてください!

ブログのカスタマイズは素人ですけどわからないことあればわかる範囲でお答えできますので\(^o^)/
Posted by セフォセフォ at 2013年09月10日 20:53
第1コーナーさん

こんばんは!PCの画面はウィンドウズだとprint screenを押して画像ソフトにペースト、マックならコマンド+シフト+3で撮れますよ(^^)/
Posted by セフォセフォ at 2013年09月10日 20:58
こんばんは(^^)

僕、パソコン使えないので全てスマホでブログをいじってますが勉強させて頂きますm(_ _)m
今度ファミキャン行ったらたくさん写真を撮ってホーム画面変えてみます♬
パソコン使える方、ホント凄いです(@_@)
Posted by ゆーけゆーけ at 2013年09月10日 21:21
はじめまして!ぺたと申します^^

私も以前テンプレートのカスタマイズをしたのですが、

「検索」を使えばよかったのかと目から鱗です・・・!

一行一行血眼で探しながら変更していたので・・・笑


東海地方のキャンプ場マップも参考にさせて頂きますー!(^o^)アリガタヤアリガタヤ

よろしければお気に入り登録させてください♪
Posted by のっち&ぺたのっち&ぺた at 2013年09月10日 21:35
おぉ~~~
以前やろうとしたんだけど、昔別ブログでやったスタイルシートの弄り方忘れてて…。

早速この方法使わせていただきます。
Posted by くむくむ at 2013年09月10日 23:13
こんばんは! 

おぉ!分かりや・・・・せん・・・

いやプログラムの文字の羅列を見るだけで拒否反応が^^;
でもセフォさんの記事見ながらなら出来そうな気がします!
時間ある時にチャレンジしてみます!!
Posted by ヒコタヒコタ at 2013年09月11日 01:09
実は、セフォさんが変更された後、うちも変えよーって思い実行しました^_^ 真似っこしたのにご報告もせずスイマセン。。。。
まだ素人なんで、これからもっと良くして行きたいと思います(≧∇≦)
Posted by えいじ88 at 2013年09月11日 08:14
こんにちは^^

トップ画像を変更したいと思いつつ、なんとな~くそのまま9ヶ月・・・。

変更の仕方がわからなかったんですよね~^^;

こちらを参考にさせていただいて、トップ画像の変更にチャレンジしてみたいです!

まずは、トップ画用の写真を撮らなくちゃですが(笑)
Posted by しぇりこしぇりこ at 2013年09月11日 08:59
ゆーけさん

おはようございます!ええええ(@_@;)
全てスマホでやってるんですか!?逆にすごいんですけど!

私も家ではほぼPCやらないので土日の更新が極端に悪いんです…逆にスマホでどうやってるのか知りたいくらいです^^;
Posted by セフォセフォ at 2013年09月11日 09:32
のっち&ぺたさん

おはようございます!はじめまして!\(^o^)/

ブラウザの検索は使えますよ^^
頻繁に活用しちゃいます。

お気に入りありがとうございます!こちらこそよろしくお願いします\(^o^)/
Posted by セフォセフォ at 2013年09月11日 09:33
くむさん

おはようございます!ぜひともこのやり方で挑戦してみてください\(^o^)/

私、専門知識があるわけでもないんですが、このやり方で出来たのでたぶんいけると思います…^^:
Posted by セフォセフォ at 2013年09月11日 09:36
ヒコタさん

おはようございます!理解できま・・せんでしたか><、

プログラムと思わずラブレターと思ってください^^;
ぜひとも時間がある時にチャレンジしちゃいましょう\(^o^)/
Posted by セフォセフォ at 2013年09月11日 09:37
えいじ88さん

おはようございます!全然報告なんていいですよw
私のを見て行動してもらただけでも光栄です^^

トップ画いい色合いが出ててなおかつ手描きのロゴが合ってるじゃないですか。すごく良いと思います\(^o^)/
Posted by セフォセフォ at 2013年09月11日 09:40
しぇりこさん

おはようございます!やはりブログにある程度なれてくるとちょっといじりたくなりますよね。色々な方の見てると「あ〜すごくいいトップ画だなぁいいなぁ」と思ってたまらなくなって変えてみました^^

トップ画さえできればあとは簡単ですよ♪
Posted by セフォセフォ at 2013年09月11日 09:42
おはようございます(≧∇≦)

こーゆーの、非常に助かります!
ブログ始めてみたものの…わからないことだらけで、放置状態です(笑)

そのうち、挑戦してみたいな〜!
Posted by モコベアー at 2013年09月11日 10:39
あれから直ぐに画像を準備して…
うーん、何故か自分のは1060 pix…

そういえば、少し前に色々数字弄り倒したな~
ブログスペースの表示が変なんですよねw

しかも、画像のサイズが何故か統一されないw

ということで、やっぱりトップ画像のみの交換で終わりました。
今外なんで(リハビリ中)帰宅後に、ブログにてリンク張らせていただきます♪

スマホでもリンク張ったブログ書けるけれど、画面小さいのと干渉波でベッド…腰の牽引で電動椅子、ウォーターベッド等移動だらけなので…。
(タグを記憶してる訳じゃないのでPC画面表示にするとますます見辛くてw)
Posted by くむくむ at 2013年09月11日 11:15
モコベアーさん

おはようございます!少しでも役に立てたら幸いです\(^o^)/

挑戦しちゃいましょう!
やり始めるととまらないと思いますよ〜^^
Posted by セフォセフォ at 2013年09月11日 11:44
くむさん

くむさんのとこ見ました!トップ画像いいですね〜^^
周りの色ともマッチしてて!!

幅が広がった分、メインの記事のスペース(日付部分の画像等)も数値広げないとだめっぽいですね。スペースができてますね><
Posted by セフォセフォ at 2013年09月11日 11:56
はじめまして、スノーフレームと申します。

ブログ初心者で、あれこれ苦戦の毎日ですが、楽しんでいます。

私もトップ画像をいじりたくなり、色々探していたら、こちらに辿り着きました。分かり易い!!

挑戦してみます。

あと、勝手ながら、お気に入り登録させて頂きます。今後もお邪魔します。お願いします。
Posted by スノーフレームスノーフレーム at 2013年10月23日 14:30
スノーフレームさん

はじめまして!\(^o^)/
おぉ!ブログデビューですね〜私もまだ約4ヵ月ですが、継続してたくさんの人達と出会い、色々教えていただいたり、いいことずくめです(*´艸`*)

参考にしていただいて光栄です。挑戦してみてください!
お気に入りもありがとうございます。こちらも登録させてください!
これからもよろしくお願いします^^
Posted by セフォセフォ at 2013年10月23日 14:42
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
トップ画像の変更方法
    コメント(22)
    form