ページの幅とページ全体の寄せ方を変更しちゃうぞ!

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

前回のあらすじ

はじめてのPCテンプレカスタマイズに戸惑いを隠せないロベポリ。
なんとかTOP画像を変更することが出来たロベだったが・・・・・!?



いやーTOP画像を変更するだけでもずいぶん印象が変わりますね。

日本橋先生の素材が素晴らしすぎるわね。

さあ、ロベくん。ほかにテンプレート内でカスタマイズしたい箇所を言ってごらん。

大きなサイズの画像を使って記事を書きたいから、記事を書くところは もう少し広めのほうがいいかも。

ふむふむ。エントリーエリアだけを広げちゃうとサイドメニューが狭くなってしまうから、 全体的に広げてみようか。

シラッキー先生、エントリーエリアとかサイドメニューとか、いまいちわかりにくいんですけど・・・

おっと、ごめんごめん!わかりやすく画像で説明しよう。

なるほど。それで、ページ全体を広げるにはどう編集したらいいんですか?

OK!じゃあ前回同様テンプレート「custom」のCSSを見てみよう。

TOP画像のときのように、CSS内に書かれているコメントから探せばいいのね。

お!ここじゃないですか?「■ページ全体の変更方法(初期は幅950に設定されています)」

大正解!ここに書いてある説明文をよく読んで、カスタマイズしてみようか。

んーと、つまりA900と考えると、B の値は、「B+40=A」だから860ってことか。

そうそう。ここの計算式が1でもずれると、テンプレが崩れちゃうから要注意だよ。

でけた!

クリックすると拡大するよ!


あれ、でもなんかTOP画像とタイトルのところがなんか変だね・・?

ページ全体の幅を変更すると、TOP画像のサイズが合わなくなっちゃったり、 タイトルの位置がずれちゃうから、画像を作り直したり、タイトルの位置を調整しないとね。 その辺りはロベ君の宿題にしよう。

わかりました!ところでシラッキー先生、いま幅を変えたページ全体を 左寄せにしたいんですけど、そういうことも出来ますか?



これは簡単だよ。CSSの【#wrapper】の【margin:0 auto;】と書かれている箇所を 【margin:0;】に変更すればOKだよ。


よく意味はわからないけど変えてみました!


おお!ちゃんと左に寄ったね!先生。これを右に寄せるにはどうすればいいの?

これも簡単だよ。さっき変更した箇所を【margin:0 0 0 auto;】としてあげればいいんだ。

うおお!よく意味はわからないけど出来た!

このあたりは言葉で説明するのは難しいから、とにかく自分で触ってみることが大事なんだよ。 例えば、【border:2px #000000 solid】って書いてある箇所の値を【10px】に変更してみたら どういう変化をするのか、とかね。

ちょっと難しいけどチャレンジしてみるわ!

ところでポリンちゃん、テンプレカスタマイズ進んでるの?

が!ロベのカスタマイズに付き合ってたら、自分のテンプレのことすっかり忘れてた!!

でた〜!ポリンのスットコドッコイ!

じゃあ、次はポリンちゃんのやりたいカスタマイズをやっていこう!

お願いしま〜〜〜す!!


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

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

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も編集し終わったぞ!更新して、プレビューしてみるよ・・・。

どきどき・・・。


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

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

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

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

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

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


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

テンプレートの仕組みを知ろう!!

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

いやー、前回さ、私たちもPCテンプレ作っちゃうよ的なことを勢いでいったけど・・

どこから手を付けていいかさっぱりわからんね!

ケータイテンプレの編集の時は、かんたんテンプレ編集機能があるからわりとやればいいことが明確だったのよね。

でもでも、UTFにはこんなにたくさんのテンプレが公開されているんだから、僕たちだってやれば出来るよ!基本、出来る子だし!

え?ちょっとまてよ。もう行き詰まってんの?

ジラッギーせんせい・・

ふむ。まずどこでつまづいたのか先生にゆっくりかつ丁寧に教えておくれ。

管理者ページの「テンプレート編集」に書いてある、あの英語みたいなゴチャゴチャしたやつ・・あれ何が書いてあるんですか?呪文?

そうそう。「HTML」とか「CSS」とかってなに・・?必殺技・・?

君たちにはまずテンプレートがどのように構成されているのか、説明する必要がありそうだね。

htmlとcss


ふわあ。なんとなくイメージは出来たけど、やばい難しそうだわ・・

ごめん。もうくじけたよ先生。

おっとおっと!やってみなくちゃわからないって!!そんな君たちに朗報だよ。 この度JUGEMでは、テンプレートのカスタマイズに適したテンプレートを用意したんだよ。 テンプレートはコチラでチェック!!

ほお!

このテンプレートには、余計なものが一切ない、まさにカスタマイズ専用テンプレートなのだ! これを使って一緒にステップアップしちゃおうよう〜

先生がそこまで言うならやってあげなくはないわ。

偉そうだな・・・。HTML、CSS以外にもわからないことって何かあるかな?

一個あります!よく「2カラム」とか「3カラム」っていうけど、そもそもカラムってなんなんです?

カラムとは


さあ、これでなんとなくテンプレートの構成が見えたんじゃないかな?

見えたけどさ・・実際どこから手を付けていいかわからないわよ。

君たち一回初心に帰れよ。むしろ原始に戻れよ。 ケータイテンプレを作った時、まずはどうしたか覚えてる??

たしか、実際に作りたいテンプレの絵を描いて、イメージを固めたと・・・

覚えてるじゃないか!ロべなりに。その通り。PC用テンプレだってイメージが大事なんだ。 まずは「こういうテンプレが作りたい!」っていうイメージを膨らませることからスタートしよう。

私は、とにかくカラフルなテンプレートにしたいわ!あとロべには絶対に負けたくない!

僕はブログのトップにでーん!と画像を使って、かっこいいテンプレにしたい!あとポリンに負けたくない!

勝ち負けじゃねえよ!・・・とにかく、二人ともちゃんと作りたいテンプレのイメージはできているようだね。 じゃあ、次回からひとつひとつ勉強して、テンプレートを実際にカスタマイズしてみよう!

おっしゃー!


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

フリースペースの位置を変えたい!!

ポリンちゃんの今日のTシャツいいね。

都内のリサイクルショップで2000円だったんです! 今日のファッションはトータルで一万円とちょっとよ〜。

やすっ!すごいね!さすがポリンや!

いまはいてるスパッツなんてしまむら750円よ。

そういえばしまむら行ったことないな・・・

え!?うそ!?埼玉県の某市では子供の8割がしまむらの服をきて育つのよ!?

うそだ〜〜そんなわけないでしょ!

ほんとだって!小学校のときとか、学校でかぶっちゃって恥ずかしい思いとかしたのよ!

あちゃあ。それは恥ずかしいね。

  

もうドゥフッって笑うしかなかったわ。

まあ全身トータルで1万円でコーディネイト出来るって事は、ポリンのおしゃれは工夫されているって事だね!おしゃれっていえばシラッキー先生。

何かね?

この間見つけた面白いブログパーツがあって、 せっかくだから、ブログの目立つ位置に移動したいんですけど、 フリースペースを上の方に設置出来ないかなあ。


デザインを自由に編集できちゃうJUGEMでは、そんなことおちゃのこさいさいですよ! ただし、テンプレートの「HTML編集」をやる必要があるんだ。

うわ。。。なんだか難しそうね。ロべじゃできないんじゃない??

ちょっと引いた。

いやいや!これくらいの編集なら誰だって可能だよ! ちょっと詳しく説明するからチャレンジしてごらん!

おー!

今回はテンプレート「StepUp」をもとにやってみよう。 大切なテンプレートを編集するときは、念のためコピーしておくことをオススメします!


まず、ブログの「HTML編集フォーム」の中でフリースペースがどの箇所にあたるか確認してみよう。

わ!難しいもうだめだ!さっぱりわからん!

ロべくんが移動させたいブログパーツってフリースペースID何番なの?

フリースペースIDは3に入れてあるんだ。

ん。ロべくんちょっとまって!「freespace_title3」とか書いてある! これじゃない??

ポリンちゃん大正解!ロべ君には失望したよ。 「freespace_title3」ってことは、フリースペースIDの3を指しているんだ。


ふむふむ。じゃあ、「calendar」って書かれているところは、ブログのカレンダー部分なんだ!

そうそう。よく読むとちゃーんと、どの部分かわかるようになっているんだよ。

で、具体的にはどうやって入れ替えたりすればいいのですか?

プロフィールの上に移動させたいんです。

ここの「HTML編集フォーム」のサイドバーの項目は、表示する順番に書かれています。 つまり順番を入れ替えれば、ブログの表示位置も入れ替わるんだよ。試しにやってみよう!


赤線の引いてある箇所、「BEGIN〜」とか「END〜」ってどういう意味ですか?

意味はそのままで、「BEGIN=始まり」「END=終わり」って言う意味だよ。 どこからが、その項目を表しているのかが書いてあるってわけです。

つまり、プロフィールエリアの上に入れたい場合は、
<!-- BEGIN profile_area -->の上に入れればいいってわけね!

その通り!同様に、ここの項目を消すことで、ブログ上から表示しないようにすることもできるのです。


うおおお!位置が変わった!!

にょー!これくらいのカスタマイズなら私たちでも出来そうね!!

よし、ちょっくら自分のブログもカスタマイズしてみるっぺ!

うんうん。頑張ってね! 僕たちはこれからしまむら探索にいってくるよ!

心配しなくてもあんたにはタンクトップ買ってきてあげるわよ!

あ、三枚くらいお願いね!!三枚くらい!!

む!そんなことを要求する前に、もっと早くこのブログの原稿を書きたまえ! いっつもギリギリじゃないですか!

ご、ごみょーんなさーい!!



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