08月≪ 2017年09月 ≫10月

123456789101112131415161718192021222324252627282930

--.--.-- (--) --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- (--) --:--  |  スポンサー広告  |  EDIT  |  Top↑

2011.02.19 (Sat) 12:00

テンプレート講座その4 テンプレートに画像を貼ろう!

引き続き、テンプレート講座です。

前回に作ったヘッダー用の画像をテンプレートに貼りましょう!

1.では、まず左サイドメニューから緑色のグループにある「テンプレートの設定」をクリックしましょう。


2.あなたがダウンロードしているテンプレートの一覧が表示されます。その中で現在適用されているテンプレートの左端に旗のマークがついているはずです。「meteor01_2c」というのが現在のテンプレートと仮定して説明しています。保険のため、現在のテンプレートを「複製」して、カスタマイズします。以下の画像を見て操作してください。


PhotoScape画面17

3.複製したテンプレートが「適用」されましたか?では、そのテンプレートの「編集」をクリックします。HTML(上)とスタイルシート(下)の編集画面が表示されますので、下図のように操作してください。


スタイルシートのコピー

4.TeraPadを起動して、↑でコピーした内容を貼り付けます。貼りつけた後、下図のように操作してください。

TeraPad画面1

5.今回サンプルに使用しているテンプレートの場合、下図の赤枠で囲んだ部分がヘッダー画像のURLになります。(44行目)このURLは「テンプレート講座その2」の「説明2」で説明したURLです。TeraPad上で、その画像がどこに書かれているのか見つけられないときは、検索機能を使うと便利です。Ctrl+F キーを押すと「検索」ダイアログボックスが開きます。そこに画像名を入力して「先頭から検索」をするとよいでしょう。

TeraPad画面2

6.では、この画像をオリジナルの画像に変更しましょう。左サイドメニューの「ファイルのアップロード」の文字の上にマウスポインタを重ねて右クリックし、「リンクを新しいタブで開く」をクリックします。


ファイルのアップロード画面

7.ヘッダー画像に使いたい画像をアップロードします。アップロード直後に表示される下図のURL(赤文字の部分)をドラッグしてコピーします。

ヘッダー画像のURL


8.ファイルのアップロードは、以降使いませんのでコピーが終わったらタブを閉じます。TeraPad画面に戻って、先ほど選んだヘッダー画像のURLの箇所にコピーしたオリジナル画像のURLを貼り付けます。(下図参照)

TeraPad画面3

TeraPad画面4

9.TeraPadの内容をすべて選択してコピーします。Ctrl+Aが全部選択。Ctrl+Cがコピーです。

TeraPad画面5

10.スタイルシートの編集画面に戻って、内容をコピーしたものと置き換えます。Ctrl+Aですべて選択。Ctrl+Vですべて貼りつけ。これで置き換わります。

11.画面下の「更新」ボタンをクリックします。これで完了です。「ブログを確認」をクリックしてヘッダー画像が変わっているか確認してみましょう。もし、うまくいっていないときは、とりあえず、元のテンプレートを「既定」に戻しておきましょう。


テンプレート完成


パールの旧ブログで実装してみました。あまり写真のチョイスがよくないので、ミスマッチですね。(笑)
もっとも、あまり写真が撮れないパールなので仕方がありません。(涙)
関連記事
2011-02-19 (土) 12:00  |  ブログテンプレート  |  TB(0)  |  コメントはこちらへ(8)  |  EDIT  |  Top↑

Comment

師匠,テンプレ講座の連載,お疲れ様ですm(__)m
今では当たり前のように月2回のペースで変更してるチャヌブログの写真ですが,それを可能にしたのは全てどらみ師匠のおかげでした。
今回,2番弟子(ゆぅママ)に続いて3番弟子(モコママ)も改造に成功したようで良かったな(^^)

画像の入れ替えはじきに慣れるので,今は直接スタイルシートの該当箇所への「旧を削除して」「新を挿入する」ことで済ませています。
次の講座は何かな?楽しみだぞ,ワクワク(笑)
チャヌパパ #atzCevzg |  2011/02/19/(土) 19:11 |   |  【コメント編集】

どらみさん 早速やってみました(^O^)/

画像を入れ替えるのはなんとかできましたが、ブログタイトルやイントロダクションの文字がほとんどわからなくなってしまい・・・
タイトルはサイズを大きくしてみましたがイントロダクションは文字が黒いせいかなんとなくイマイチで、画像をぼかしてしまいました(^_^;)

手順がわかったので初回はまぁこれで良しとしようと思いましたが、ヘッダーの文字サイズや色を写真にあわせて変えられるといいですね。
今後の目標にしたいと思っています(^O^)/

ところで・・・ 改造後のブログがIEで見るとOKなのに、Firefoxで見るとテンプレの背景だけ残ってあとは全部消えちゃったような感じになってます(ノ_・。)
これはなぜでしょうか???
モコママ #M3o3L/jM |  2011/02/19/(土) 22:12 |   |  【コメント編集】

>Re.モコママさん

モコママさん、こんばんはv-222v-411

ご質問の件ですが、私もFFで確認してみたところ、スタイルシートが読み込めていない印象がありますね・・
実際に触れないので、あれこれ試してみないと何とも言えませんが
IEとFFでは、FFの方が記述に忠実にWeb表示を行うブラウザと言えます。

スタイルシートで、改行位置が気になったので、一度修正してみてください。

/* ヘッダー */

div#wrapper div#header {
margin: 20px 0;
width: 800px;
height: 200px;
border: 0;
background: url('http://blog-imgs-30.fc2.com/m/o/c/moco0522/20110219214845504.jpg
') no-repeat left top;

}

赤文字にした部分、改行されているようなので、一行になるように改行を削除してみてください。
これで、直るかどうか、わかりませんが試してみてもらえますか??

おそらく、アップロードした画像のURLをコピー貼りつけする際に、改行が入ってしまったんだと思います。
>Re.モコママさん #ZDTV/mj2 |  2011/02/19/(土) 22:23 |   |  【コメント編集】

なおりました(^O^)/

どらみさん 早速ありがとうございます o(_ _*)o
おかげさまでFFで見てもOKとなりました

スタイルシートというのですね・・・(^o^;)
まったくなにもわかっていなくてお恥ずかしい限りです

出来の悪い3番弟子ですが、これからもよろしくお願いします(*^_^*)
モコママ #M3o3L/jM |  2011/02/19/(土) 22:43 |   |  【コメント編集】

>Re.モコママさん

モコママさん、直ってよかったですね(●⌒∇⌒●)

ところで、先のコメントで質問のあった、タイトルやイントロダクションの文字色を変える方法ですが
ここまで改造できるモコママさんなら、きっとできると思うので、下に説明しておきます!!

スタイルシートをTeraPadに貼りつけた場合115行目~123行目の下記部分ですが

----------------------------------------
div#wrapper div#header div#title h1 {
font-size: 160%;
}

div#wrapper div#header div#introduction p {
margin-left: 5em;
width: 350px;
font-size: 85%;
}
----------------------------------------


これを下のようにフォントカラーを追加して記述してみてください。

----------------------------------------
div#wrapper div#header div#title h1 {
font-size: 160%;
color: #FFFFFF; /* タイトルのフォントカラー */
}

div#wrapper div#header div#introduction p {
margin-left: 5em;
width: 350px;
font-size: 85%;
color: #FF0000; /* イントロダクションのフォントカラー */

}
----------------------------------------

サンプルでは、タイトルを「白」 イントロダクションを「赤」で表記しています。
カラーのコードは、
http://www.colordic.org/
こちらを参考にされてはいかがでしょうか。
「黒」ですと #000000 という風に記述します。

お試しくださいね!
でも、グラデーション素敵ですよ♪♪
>Re.モコママさん #ZDTV/mj2 |  2011/02/19/(土) 23:11 |   |  【コメント編集】

>Re.チャヌパパさん

テンプレ講座書くの、ムッチャ大変です~~~~~v-393v-393
テキストや取扱説明書を作る人は大変だ~~~。

やさしいことは、案外どこにも説明が載っていないので、初めてテンプレートを触る人には参考にしてもらえるのでは!
と思い、書いています。

モコママさんのSOSコメントがお返事を急ぐようだったので、チャヌパパさんへのレスを後に回させていただきました。<m(__)m>

初めのうちは、スタイルシートに直接書き込みに行くと、ドコ(T-T ))(( T-T)ドコ ってことになりかねないので
あえてTeraPadをご用意いただきました。
慣れれば、直接書き込めば早いですね!

次の講座、頭の中ではできてるんですけど、それを記事にしようとするとね~
一日一時間以上は記事作成に費やさない!と決めています。(笑)
>Re.チャヌパパさん #ZDTV/mj2 |  2011/02/19/(土) 23:18 |   |  【コメント編集】

どらみさん こんにちは

文字色を変える方法をお知らせくださってありがとうございます o(_ _*)o
実際にやってみました。
タイトルはぼかした範囲におさまるのではっきりした色ならOKなのですが、
イントロダクションは文字サイズが小さいのと画像の芝生のおかげでどうもはっきりしません(ーー;)

ぼかしていない画像にとりかえてみましたが、小さい文字はやっぱりわかりづらいですね(^_^;)
たぶんここまで気にして見ている方はいないと思いますが、変更の仕方がわかれば自由に変えられるので勉強になりました。

それと・・・ タイトルについては、「リンクが設定されている文字は 【#cc6600】という設定がされていて タイトルだけ色を変更することはできませんでした(>_<)
リンクしないようにすれば文字色は変更できるので、それ以外に方法はないのかなと思います。

今回はこのぼかした画像を生かすのが、いちばん文字がわかりやすいようなのでしばらくこのままでと思っています。

800×200という画像サイズで配置や文字色などあれこれこだわると結構タイヘンですね。。。
でも今回教えていただいたことは、また別の場面でも活用できるのでとてもいい勉強になりました。 ありがとうございます。

超初心者相手の説明でお疲れになったことと思います。 すみません。。。
モコママ #M3o3L/jM |  2011/02/20/(日) 13:45 |   |  【コメント編集】

>Re.モコママさん

モコママさん、こんにちは!

そうですね、タイトルにはリンクが貼られているので、あのコードじゃ反映できませんね。
ゴメン \(__ )三( __)/ ゴメン

ちゃんと記述し方があるのですが、どんどん解説が深くなってくるので、今回はそっとしときましょう。(笑)

ちなみに、画像のサイズですが、横サイズを変更するにはブログのデザイン幅を変更しないといけないので、いじらないといけない場所が他にも発生しますが

縦サイズだけであれば、ヘッダー画像の height: 200px の200pxを300pxとかにすればOKだと思いますよ!

念のため、現在のテンプレートを複製してからいじってみてはいかがでしょうか。
そうして複製を作り続けると、複製だらけでわけがわからなくなりますので(笑)適当に「あ、これはもういらんわ」というのを削除していってくださいねv-219v-411
>Re.モコママさん #ZDTV/mj2 |  2011/02/20/(日) 17:52 |   |  【コメント編集】

コメントを投稿する

URL
コメント
ぱすわーど  自分のコメントを編集・削除するのに必要です
SECRET  管理者だけにコメントを表示  (現在非公開コメント投稿不可)
 

▲PageTop

Trackback

この記事のトラックバックURL

→http://cogipearl.blog87.fc2.com/tb.php/1300-ac678305
この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

▲PageTop

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