<< テンプレートの仕組みを知ろう!! | main | ページの幅とページ全体の寄せ方を変更しちゃうぞ! >>

トップ画像を変更しよう!

PCテンプレカスタマイズ講座 第1回

前回のあらすじ

いよいよPCテンプレカスタマイズに手を出すことにしたロベポリ!
前回はテンプレートの構成を勉強し、いよいよ本格的にカスタマイズを行うことになったのだが・・・。


まずは元にするテンプレートを選ぼう。前回も話したけど、初心者はカスタマイズ専用テンプレ「custom」シリーズがオススメだよ。

僕は、トップ画像を変更したいから、トップ画像つきのコレにする!!

OK!それじゃあ、まずトップ画像の変更からチャレンジしてみよう。

ロべに出来るのかしらね〜〜。

トップ画像の変更はCSS(装飾)を少しいじるだけだから、ダメな子のロベくんでも簡単に変更出来るから大丈夫だよ。

HTMLは変更しなくても大丈夫なんですか?前に教えてもらった「フリースペース」の位置を変更したときはHTMLの方を編集したでしょ?

HTMLは前回説明したように骨組み部分だから、今回はその骨組みされている部分の装飾を変更するだけだよね。

なるほど!フリースペースは骨組みを入れ替えたからHTMLの編集だったんだ。

ザッツライ!特に「custom」シリーズでカスタマイズしてもらえれば、HTML部分の変更はあまりしなくても大丈夫だよ。

にゃるほど。

さて、ロベくんが選んだテンプレートには、見てわかるように角の丸い青い画像が入ってるよね。この画像が、CSSではどの部分にあたるか二人は分かるかな?

・・・・・・・・・全然見つからないよう。

あんたすぐに諦めるそのクセなおしなさいよ!・・・あ、シラッキー先生!ここじゃないですか!?テンプレートの中に「/*ブログ名と説明文、トップ画像*/」ってちゃんと書いてある!

よく見つけたね!ポリンちゃん!っていうかここまでハッキリ書いてあるのに、見つけられないロべくん!ちょっとがんばれ!

ごみょーんなさーい。

「custom」シリーズにはこのように、どこが何に該当しているのか、ちゃんとコメントしてあるんだよ。だから初心者でも迷わずカスタマイズ出来るってわけ!

うう!場所はわかったけど、いろいろゴチャゴチャ書いてあって結局わからないわ!

実はとってもシンプルで、今回変更しなくちゃいけない部分は[background-image]って書かれた箇所だけなんだ。

え!そこだけ!?

この[background-image]背景画像っていう意味なんだよ。その後ろにURLが書いてあるよね。これが現在表示しているトップ画像のURLなんだ。

つまりそこのURLを変更すれば表示する画像も変更されるってことですね!

そうそう。試しになんでもいいから画像を変更してごらん。


面白いからロべの画像でも入れてみようよ!


あれ!?確かに画像変わったけど、なんか変ですよ先生!もう嫌だ!難しい!

諦めたら、そこで試合終了だぞ!ロべくん!人間誰しも失敗を重ねて成長していくものさ。テンプレのカスタマイズだって一緒だ。何回もの失敗があるから、出来上がった時にかけがえのない宝物になるのさ。

どうしてロべは失敗しちゃったの?(人生も)

これはね、ロベくんがアップロードした画像のサイズが、元の画像と全然サイズが違った為に、表示がおかしくなっちゃったんだな。

じゃあ、最初の画像と同じサイズの画像なら問題ないってこと?

元の画像は幅が760ピクセル、高さが180ピクセルで作られているからこれと同じ大きさで画像を作ってごらんよ。

ロべ、作るんだったらブログコンテストに応募するために、日本橋先生の素材を使わせてもらおうよ!

 

わかった!頑張ってみるよ!!

==========20分後==========

先生!作り直しました!!

よし。じゃあそれを自分のブログの管理者ページにアップロードしてみよう。アップロードした画像のURLを確認して、いまテンプレートに反映されている画像と入れ替えちゃおう。


よし!CSSも編集し終わったぞ!更新して、プレビューしてみるよ・・・。

どきどき・・・。


ロベくんがカスタマイズしたテンプレートを見てみる

おお!しっかり出来たじゃないか!やってみてどうだった?

仕組みがわかってからは、思ったより全然簡単にできました!

ふん。ロべにしては上出来ね。

ユーザーのお友達から要望も多い画像に関してのカスタマイズについては、近日中にもっと詳しくやる予定だからお楽しみにね!

カスタマイズについてのご要望はコメント欄までよろしくゲッチュー!


▼現在ブログデザインコンテスト実施中!▼

コメント
サイドバーの「アーカイブ」がかなり長くなってきたので、折りたたむかスクロール形式にしたいのですが、どこをどういじればできるのでしょうか?
  • 2009/08/01 6:28 PM
管理者の承認待ちコメントです。
  • -
  • 2012/05/02 12:51 AM
コメントする
※JUGEMの機能に関するご質問などはお問い合わせフォームまでお願いします。









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

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索