北海道キャンプだべ

カヌーを持ってキャンプだべ


--
Category: スポンサー広告   Tags: ---

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


20
Category: つぶやく   Tags: ---

ヘッダーの変更

ヘッダーを変更しました!(^^)!

見よう見まねで、変えてみましたが、



もっと簡単にできる方法はないものでしょうかねっ(;O;)




洞爺湖(とうやこ)での一コマです・・・


キャンプ場で偶然あったM先生ご夫妻と船上朝食ツアーでした・・・




今年もいい写真が撮れたらヘッダーを変更しょうかと・・・

ヘッダーてっあんまり変えない方が、いいんでしょうかねっ???
関連記事
スポンサーサイト

テーマ アウトドア    ジャンル 趣味・実用



 

Comments

EditNo title
こんばんは♪

ヘッダーいじれるんですね(^^♪

私もキャンプ風景に変えたいのですが

未だ変更できずにいます(-_-;)ムズカシスギデス

しかし良い写真ですね♪

どうすれば良いのですか?

本に書いてましたか?

すんごく知りたいのですが(^^ゞ

聞いても出来ないかも知れませんが(-_-;)
Editヘッダー変更手順・・
けさやんさん

おばんです

コメントありがとうございます!(^^)!

ヘッダーの変更ですが、素人のやり方なので、
本当の手法かどうかわかりませんが、
自分でやったやり方をお伝えします。
あくまでも、山感・直感でやりましたので、
動作保証は自己責任でお願いします。

まず 新ヘッダーの画像作りです

1.貼りたい画像を決めます。(トリミングが必要になります)
  自分の場合は、元のヘッダーの横幅に合わせてやりました。
  けさやんさんの今のヘッダーは、
  名前 titel-clover.jpg 
  サイズ 960×200ピクセルです。
  (横幅960ピクセル×縦幅200ピクセル)
  横幅960に合わせます。
2.貼りたい画像をトリミングします。
  自分は詳しくないので横幅があっていれは、
  なんとかなると思い、横幅だけ、元画像と一緒にしました。
  まず、元画像が大きい場合縮小します。
  (自分は縮小するのにフリーソフト「縮専」を使ってます)
  次にトリミング
  けさやんさんの元画像は横幅960なので、
  画像編集ソフト(自分はフリーソフト「Paint.NET」)で、
  横幅960ピクセルに合わせ、縦はお任せします
  (自分の縦幅は353ピクセル。中途半端・・350ピクセルにすると良かったかも)
  トリミングができたら保存。
3.その画像をアップロードします
  写真を載せるようにアップロードします。

ここまでが、新ヘッダー元画像の準備です。

次に、新ヘッダーに変更する手続きです

1.管理画面から先ほどアップロードした写真をファイル一覧から選び、
  写真の上を左クリックしてください。
  すると、写真1枚がどーんと表示されます。
  そのurlをコピーしておきます
  例えばhttp://blog-imgs-○○○.fc2.com/○○○/○○○/○○○.jpg
  こんな感じのやつです

2.管理画面左の「環境設定」の中の「テンプレートの設定」をクリック
  「○○○のHTML編集」と「○○○のスタイルシート編集」が出てます。(上下に)
  ※○○○は今使っているテンプレートの名前です。
  「○○○のスタイルシート編集」をいじります(下の方です)
3.スタイルシート編集の中に
  
  「titel-clover.jpg」という文字列を探し出して下さい。
  「titel-clover.jpg」は元のヘッダーの写真の名前です
   英語だらけで参ります(;O;)
 
  div#header {  ←こんな見出しの下の方にあります!(^^)!

  ※header=ヘッダー の事が書かれている場所らしいです

  下記のように表示されていると思います
  background-image: url(http://templates.blog.fc2.com/template/○○○/titel-clover.jpg);
 
  上記の( )の中に先ほどコピーしておいた写真のUrlを貼り付けます。

  スタイルシート編集の枠の右下プレビューを押すと
  新しい写真が少しだけ顔を出しているはずです。
  元の画像が960×200ピクセルだったのでけさやんさんも960×200ピクセルで
  新画像を作っていれば、ぴったりなのですが、高さの200ピクセルだと細い
  帯のような写真でしかないと思います。
  もし自分と同じぐらいの高さ(350ピクセル)で写真を作っていたのなら、
  もうひと手間必要です。

4.先ほどの「○○○のスタイルシート編集」の中の
  header=ヘッダー項目の欄のチョイ下です

  div#header {
margin-bottom: 7px;
height: ○○○px;

  こんなのが書いてあります
  height=高さ(幅)だと思います
  自分は縦幅は353ピクセルで300にしてみました。(何度か微調整必要かも)
  
  スタイルシート編集の枠の右下プレビューを押してみながら
  何度か、微調整してみてください。

  OKなら最後に右下の更新ボタンをクリックしてください。

  以上こんな感じで、ヘッダーを変更しました。

問題なのは、ヘッダー用の画像が重く、縮小をかけることと
トリミングがうまくできれば、後は意外とスムーズかも知れません。
ご不明な点がありましたら何なりとご連絡ください。
ご検討をお祈りしております!(^^)!
Editありがとうございます♪
ご丁寧に有難う御座いますm(_ _)m

なんとか出来ました(^^♪

とてもわかり易く教えていただいたので

意外と簡単に出来たのですが

写真がかぶってしまってますね(-_-;)

色々と有難う御座いますm(_ _)m

Leave a Comment








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

top bottom
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。