ハンドメイドテンプレートをカスタマイズしよう!

あったかくなってきたねぇ、すっかり春だねぇ。

最近寒い日が続いてたから冬服ばっかり着てたけど、そろそろ衣替えしなくちゃ。

衣替えと言えば、このテンプレート覚えてる?


あっ、カラメル手芸部のテンプレートだね。

確か以前にもこの記事で紹介したわよね。

そう。このテンプレートをうまく使えば、簡単にブログも衣替えできちゃうんだ。

ブログの衣替え? どうやるの?

やり方はとても簡単だよ。さくっと説明するね。




まずは背景をアップロードしよう。今回は画像を用意したので、背景は下の画像をクリックしてダウンロードしてね。

▼この画像をダウンロード!



次にカラメル手芸部のテンプレートを一覧に追加しよう。



これでテンプレートが追加されたので、先ほどアップロードした背景が表示されるように、テンプレートを編集しよう!




これで、出来上がり!!




これだけ?簡単!

がらっと雰囲気が明るくなったわね!

空いた部分に、自分の好きな小物や写真を追加すると、自分だけのテンプレートのできあがり! 画像は下からダウンロードして、NAVERフォトエディターなどで加工して使ってね。


※本記事内でご紹介しておりますNAVERフォトエディターはサービスが終了いたしました。

素材のダウンロードはこちらから!

・ビー玉3種類
・おはじき5種類
・らくだ
・うさぎ



ブログって毎日のように見るから、何か変化があると読むのがいっそう楽しくなるよね。

こんなに簡単にイメチェンできちゃうなんてすごい!  私も春っぽくイメチェンしたくなってきたわ。

新しい季節はイメチェンにぴったりのタイミングだよね。みんなも是非、ダウンロードして使ってみてね!


フォトテンプレートをカスタマイズしよう!

ついこの間公開されたフォトテンプレート「30daysテンプレート」って写真が見やすくっていいわあ。

大きな画像が投稿できるからね。写真好きにはたまらないよね。

そういえばお知らせブログに「背景色としてグレーが指定してありますが、自分の好きな色や画像に変えれば自分だけの素敵なフォトログテンプレートが出来上がっちゃいますよ。」って書いてあったんだけど、私でも簡単にカスタマイズできるのかしら。

相変わらず不精だね!君たちは。今日は「30daysテンプレート」の 簡単カスタマイズにチャレンジしよう。

よ!大統領!

今日は、背景を自分が好きなものに変えてみよう! まずは背景用の好きな画像を準備しよう。

え〜?なんかぁ準備って言われましてもぉ。

まあそういうと思ったよね〜。先生、ちゃんとサンプルで いくつか背景画像用意しちゃったから好きに使いなよ。

やるうう〜〜

▼今回用意したサンプルは5種類です!画像を保存して使ってね!!

  




好きな画像が決まったら、まずは管理者ページにアップロードじゃ!!そしてアップロードした画像のURLをコピーしよう。

メモれ!コピれ!ってことですね!



そしてお次は実際にテンプレートのCSSを編集するよ。

イヤン!

CSS編集フォーム」で、「background: #666;」となっている部分を、「background: url(先ほどコピーした背景用画像のURL);」に変更してね。



さっきのコピーしたURLを入れるのね!!ひょいっと!

そうそう。こんな風になるよ。



入れました!!

あとは忘れないように、「CSSを編集」ボタンを押して保存して完成!!

か、かんた〜〜〜〜〜ん!!



今回用意した各サンプルを使っても全然違うイメージの テンプレートに変身するから試してみてよ!!

わほわほ!もちろん自分の気に入ってる写真とかも使えますよね

そうだね。簡単に出来るカスタマイズだから季節ごとに変えるとかすると、自分も楽しめるよ。

わたしは思いっきりカワイイ感じにしよっと!

自分なりのフォトテンプレートを作ってみてね〜〜〜

フォトォ!


フキダシブログにチャレンジしよう!

今日のカスタマイズ講座は、JUGEMユーザーの方からのリクエストに応えるよ!

どんなリクエストだったの??

うん。StepUp!JUGEMを見てくれている方から、このブログみたいにフキダシ風にブログを作ってみたい!っていう質問があったんだ。

あー、私たちがまさに今しゃべっている、このフキダシね。

おっけおっけー!ゼロからやるのは難しいから、まずは 仕組みを理解することと、サンプルを用意したので、それで始めてみたらどうかな??

シラッキー先生!!

================



まずは画像の準備が必要だよ。自分で用意してもいいし、 用意したサンプルを見本に作ってみてね!!

フキダシ画像を作る時は、以前特集した「トップ画像の作り方」も参考になるからチェックしてね。

作った画像は忘れずに「画像の管理」にアップロードだよ。

サンプル画像はこちら!!

フキダシ画像:上部
フキダシ画像:下部


  


▼CSSのサンプルソース

※画像のURLは、管理者ページ「画像の管理」で確認してね!

実際にテンプレートをカスタマイズするよ。用意したサンプルのソースを使っているテンプレートに挿入するんだ!

場所は「CSS編集」内なら、どこでもOKなんだよね。

ほかのソースを上書きしないように気をつけて!



▼記事投稿用のサンプルソース

※「HTMLモード」か「シンプルエディタ」で投稿してね!


実はもう準備は整っているんだ。あとは実際に記事を書くだけだよ!

え!もうおしまい!?

うん。ただ記事を書くときに、普通に書くだけじゃフキダシは表示されない。

何か特別な書き方があるの??

さっきCSSに追加したソースを呼び出すためのソースコードを書かなくちゃいけないんだ。

「ウィジウィグエディタ」を使っている場合は、「HTMLモード」に変更しないと書けないわね。要チェック!!


ざっくりとした仕組みはこんな感じだよ。 どのソースがどこの部分に該当しているか書いてあるからじっくり研究してみてね!!

うう!頭がパンクしそうだけど頑張ってみるよ!!

まあ、あれだね、難しかったら、用意したサンプル画像の 「好きなキャラクタを入れてください」の部分に好きな画像を当て込んで、あとはそのまま使ったらいいよ。

まずはチャレンジしてみろってことね!

そうねー。

さっきまでと勢いが違う・・・・

じゃあ、ちょっと難しいかもしらんけど「千里の道も一歩から」精神でがんばってくださーい。

は、ハーイ!!


独自タグを追加してみよう!ツー!

前回教えてもらった独自タグの他にもいろいろと 面白そうな独自タグあるんだけど、もちょっと教えておくんなまし?

OK!OK!じゃあまずは、これも要望が多かったタグなんだけど、トップページのみで表示される枠のタグ{toponly_dmy}」を教えよう!

どういうこっちゃ?

トップページで特定のメッセージとか更新情報とかを掲載したいって時ないかい?たとえばこんな感じに!

にゃー!これはとっても便利ですね!この下に書いてある情報はどうやって出しているんですか?

よいとこに気付いたねー。これも新しい独自タグで表示しているんだよ。 詳細はオンラインマニュアルの独自タグページ書いた記事の情報のタグ」のところを見てね!

他にも独自タグを使って面白いことって何か出来たりする??

例えばこういう見せ方とかどうだい???

わわ!トラックバックリストの色が交互に変わってる!!

これは「{trackback_number_cycle}」という独自タグを使って トラックバック枠のデザインを交互に変更しているんだ。

これ、トラックバック以外は出来ないんですか??

もちろん「記事」や「コメント」もそれぞれ独自タグを用意しているよ。 記事は「{entry_number_cycle}」コメントは「{comment_number_cycle}」で それぞれ対応してね。

色が交互に変わってるだけなのに、なんだかちょっとシャレオツだね。

あともう一個、自分も楽しめる独自タグ「{last_year_entry}」。これは投稿した日のちょうど一年前に投稿された記事へのリンクを表示してくれるんだ。

自分のブログの過去記事って、なかなか読まないから色々思い出せていいかも!!

あ〜〜、こんな事あったわね〜、とか懐かしめそう

と、いうように独自タグを使いこなせばブログの表現もぐっとアップしちゃうわけです。

もうすぐ冬休みだし、色々チャレンジしてみようかな!!

そうだ!冬休みといえば、みんなに紹介したいちょう可愛いブログパーツがあるの!!あなたのホームページに雪を降らせてくれる「きせかえプチだるま」!!

ポリンのオススメ!

きせかえプチだるま



「きせかえプチだるま」は、プチ・ホームページサービス から生まれた、この冬あなたのホームページを楽しく彩るブログパーツです。帽子やマフラーなどのアイテムを組み合わせて、オリジナルのプチだるまをお作りいただけます。作ったプチだるまをあなたのブログやホームページに設置すると、雪が降る仕組みになっています。

最近急激に寒くなってきたからJUGEMのみんなもロベポリも風邪やインフルエンザには気をつけようね。

次回は今年最後の更新です!以前募集したプレゼントの当選者も発表するのでお楽しみにね!!


独自タグを追加してみよう!

テンプレ編集講座9

ちょっと前にさ、JUGEMのお知らせ読んでたら「独自タグ」ってのが大量に追加されてたんだけど、そもそも独自タグってなによ?

あー、独自タグってあれでしょ、ファイナルファンタジー7でいうとマテリアみたいなもんでしょ。装備すると効果でるみたいな

ポリン、FF7はすごい好きだよね・・・。あと、余計わかんねえよ・・・。

余計なお世話よ。

その話すぐ終わる?もう説明しちゃうけどいい?

いい。

独自タグっていうのは、JUGEMにおいて通常のHTMLタグ等と違い、特別な処理を行うタグのことだよ。たとえば、みんなが書いた記事ブログタイトルを表示させているのも独自タグなんだよ。

で、先生、今回追加された独自タグってどんな効果があるの?

じゃあ特に使いやすい独自タグを抜粋して紹介しよう。

わーい!

まずは、パーマリンク付きの記事タイトルを表示させることが出来る「{entry_title_link}

のっけからつまずいた。パーマリンク付きの記事タイトルってどういうこと?

自分のブログの個別記事だけを表示したいって時に、記事タイトルをクリックしちゃうことないかい?

 

あー、あるある。でも記事のタイトルにはリンクされていないから、いつも投稿時間のところをクリックして表示させてたわ。

投稿記事のタイトルを表示させる「{entry_title}」というタグを「{entry_title_link}」に入れかえるだけで、記事タイトルにも個別記事へのリンクが追加されるようになるんだ。地味だけど便利だよ。


独自タグは、以前にも説明しているよう、に必ず「BEGIN〜」から「END〜」で囲って使用するんだよ。


▼タグを変更すると、記事タイトルに個別記事へのリンクが追加!!

ほかにはどんな便利独自タグが追加されたんですか!

各記事に「関連する記事」を一緒に表示してくれる「{related_entry_list}」とか便利だね。これは、同じカテゴリーで投稿されている記事が最新5件表示される独自タグだよ。

▼{related_entry_list}を使うと、関連する記事が各個別記事に表示されるようになります。

これがあれば、ほかの記事もあわせて読んでもらえそうね!!

{full_pager_link}」も便利。これはページ送りがとっても便利になるタグだよ。

▼何回もページ送りを押さなくてもOKになります。

昔の記事を探す時に便利そうだね!

あと要望もすごい多かったタグなんだけど、長ーくJUGEMを使ってくれている人向けのタグを追加したよ。サイドバーのカテゴリーメニューをプルダウン化する「{category_selectbox}」、アーカイブリストををツリー化する「{archives_list2ex}」

▼アーカイブリストをツリー化すると、こんなにスッキリしちゃいます。

新しい独自タグはカスタマイズ用テンプレート「custom」のexシリーズに追加してあるから、実際にどういう表示がされるのか自分のブログに適用したりして試したらいいよ〜

ていうか先生、この間追加されたのってもっと多くなかった?

うん。ごめん。とても一気に紹介しきれないくらい追加したもんでね。新しい独自タグはまた次回勉強しようぜ。

次回次回っていうけどさ、大体いつも2〜3回空くんだよね。

…………

早くしてね!


自分だけのオリジナルトップ画像をつくろう!ツー!!

※本記事内でご紹介しておりますNAVERフォトエディターは、サービスが終了いたしました。




前回は自分でオリジナルのトップ画像を作成するところまでやったけど、今日はそのトップ画像にお絵かきしたり、ブログタイトルをつけたりしてみよう!

そんな簡単にいってもさー。画像編集用のソフトとかいろいろいるんでしょ?

心配すんなよ!ソフトとかダウンロードしなくても簡単に画像お絵かきができちゃう便利なサイトがあるんだよ。 インターネットすごいだろ?

すごい!インターネットすごい!すごいいい、インターネット!

どっかで見た展開だね。それはさておき、とりあえず編集するための元になる画像が必要だから、前回の記事を参考にしながら用意してね。

ほんとに簡単にできるのかしら。わたすぃ心配

今回使うサイトは「NAVERフォトエディター」です。難しい知識や技術は必要なくってソフトをインストールする必要もない、とっても便利なツールだよ。


せっかくだし、この間うちの猫「きなこ」の写真で作った画像にブログタイトルを入れてみたいなー

OKOK!一緒にやっていこうか。まずは「NAVERフォトエディター」にアクセスして「フォトエディターを起動」をクリックしてみよう。

そして、右下の「参照ボタン」から写真を呼び出すのね!

う。ボタンがありすぎてようわからん!

とりあえず今回使うのは下のボタンだけだよ!簡単でしょ!


じゃあまずは、画像に枠とかつけてみちゃおうか。 これは、範囲選択ボタンを使うんだよ。枠のおおよその範囲を選択したら、 マウスの右クリックを押して、「選択反転」を行うとちょうど枠の形に選択されるよ。



選択した範囲を「ブラシ」や「バケツ」で塗りつぶせば、枠の出来上がりだね!!超簡単!

次はブログタイトルを書いてみよう。「テキスト」ボタンを押してみてくり。

文字を入れたい場所をクリックすると、そこに文字が書き込めるのね。


ほんとだ。書体や文字の大きさもいろいろ選択できるんだね!こりゃ便利!

ほら!あっという間にトップ画像が出来上がっただろう?? 出来たら忘れずに右下の「保存」ボタンから画像保存しなよ!!

▼ロべくんが5分で作ったトップ画像

ねえねえ先生。いま使ったボタン以外にもたくさんボタンあるけどほかにはどういう使い方が出来るの?

お。やる気がある子は好きだよ先生。上戸彩と同じくらい好きだ。この「NAVERフォトエディター」ではちょっと面白い加工とかも出来るんだよ。

ほっほう

たとえば、「効果」ボタン。これを使えば、作った画像をモノクロやセピア、フィルムといったように加工できちゃうんだ。 先生のおすすめは「フィルム」かな。

▼フィルムで実際に加工したイメージ(クリックで拡大)

お!モザイクとか出来るんだ!!きなこにモザイクかけちゃおうっと!これもさっきと同じようにモザイクかけたい部分を選択すればいいんだね。

ロべくんやめなよ、きなこがかわいそう。

ほかにも画像の縮小や、切り取り画像の反転や傾きなんかもサクッと変えられる。

▼回転すると・・・・

すげえ〜〜!なんでもできちゃうんですね。

これはトップ画像とかじゃなくても、ブログ記事用の画像加工にも持ってこいだね。こんな感じで。

ちょっと先生!

あとは、あえて画像を全部「消しゴム」ボタンで消して、まっしろなキャンパスを作ってお絵かきを楽しんだりとか、使い方は人それぞれモリモリありそうだよ。

▼イラストも描けちゃう!!

ひゃー、楽しみながら画像作れるからいいわね。

みんなも便利ツールを使って色々ブログを彩ってみてね!!

他のカスタマイズ講座もいろいろチェックしてくださいねーー!!



自分だけのオリジナルトップ画像をつくろう!



最近カスタマイズ用テンプレートを使ってブログカスタマイズしている人多いよね

確かによく見るよね。カスタマイズ講座もあるし、いろいろいじりやすいもんね。

でもさ、せっかくだからトップ画像とか背景画像とかオリジナルのものを使ってカスタマイズしたいわ。

この間のカスタマイズ講座だとオリジナル画像の使い方とか書いてないから、いまいちわからんちんだもんね。

もー、二人がそういう気持ちだって先生気づいてたよ。

先生、私たちだけじゃなくてカスタマイズ講座を楽しみにしてくれてるJUGEMユーザーのみんなも同じ気持ちだったわよ!ばか!

今日はみんなでオリジナル画像を作成してみようぜ!わいわい作っちゃおうぜ!

そんな簡単にいってもさー。画像編集用のソフトとかいろいろいるんでしょ?

心配すんなよ!ソフトとかダウンロードしなくても簡単に画像編集ができちゃう便利なサイトがあるんだよ。インターネットすごいだろ?

すごい!インターネットすごい!すごいいい、インターネット!

ということで、ロべくんは最近写真の撮影に凝っているようだから、写真を使ったトップ画像を作ってみたらいい。ポリンは、背景画像にチャレンジしてみよっか。

合点承知の助!

======================作成中======================

できました!シラッキー先生に教えてもらったサイトで編集してみたよ。

ロべくんが編集に使ったサイト



ふむふむ。ここのサイトでは、写真のサイズを変更したり、切り抜いたり出来るんだね。

はい!もともとの画像が結構大きかったので、先にちょっと縮小して、それからトップ画像に合うように切り抜きました


カスタムテンプレートのTOP画像は幅が760ピクセル、高さが180ピクセルで作られているからそれに合わせて切り取ったってことね。

そうそう。これで保存すれば、TOP画像の出来上がりってわけ!


▲実際にロべくんが作ったトップ画像(猫が可愛い)

どうやら簡単に出来ちゃったみたいだね!さあ、次はポリンちゃんだ!

ポリンちゃんが編集に使ったサイト

・タータンチェック:http://www.tartanmaker.com/
・ストライプ:http://www.stripegenerator.com/
・模様、ざらざら:http://www.bgpatterns.com/


タータンチェックの作成手順を載せておくわね!!


へえ〜!とっても簡単そうだね!ポリンは何か気をつけたことある?

同じ色の組合せでも向きを変えたり、タータンの柄の大きさを変えるだけで随分印象が変わるから悩んだわ!!

健全だね。いろいろ試行錯誤して、自分なりの画像を作成してみたらいいよ。

これだけ自分の好みで作成出来るんだったら、必ず自分オリジナルの画像が作れちゃいそうだね!!


▲タータンチェック


▲ストライプ


▲柄系

あと、ここのサイトを利用して作られた画像もいろいろあるから、そこの画像も参考にしてみると面白いよ!!


どう?君たちが思っているよりも簡単に画像出来ちゃったろ?

うん!びっくりした!

しかも作っててとても楽しかったわ〜〜。それが自分のテンプレートにいかせるなんて更に素敵!

でもさ、正直そんなところで満足されたら困るし、困るよ。 せっかくだし今日作った画像にお絵かきとかしてみたくないかい?

してみたい!してみたいわぁ〜

OK!でも続きは次回だぜ!

うわ!この展開久し振り!みんなも画像作成チャレンジしてみてね!!


背景画像を変更しよう!!

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

前回のあらすじ

様々なカスタマイズをこなし、着実にステップアップしているロベポリ! 最終回の今回は、背景画像の変更にせまります!!



さて今回はいよいよ背景画像の変更にチャレンジしてみるよ!

この間TOP画像を変更した時に、もっと色々出来るって言ってたじゃないですか? もったいぶらずに教えてくださいよう。

例えば、ページ全体に背景画像を設定したい場合は、ものすごーい大きな画像を用意しなくちゃいけないの?

その必要はないよ!トップ画像の時は、同じ大きさの画像を用意して置き換えたけど 背景画像は自動的に繰り返したりして表示することができるんだ。

自動的に繰り返す???

つまり、大きな画像をわざわざ用意しなくても、小さな画像を用意すれば、その画像を 繰り返し表示して背景画像とすることが出来るんだよ。

それって具体的にはどういう画像なんですか?

ここでもテンプレート「custom」を例に見てみよう。「custom」では、細かい点々が描いてある小さな画像を水平垂直方向に繰り返し表示しているんだよ。

なるほど!こんな小さな画像を繰り返し表示してたってわけだ。

あとはポリンちゃんが好きそうなチェック柄やストライプ柄なんかも、この繰り返しを使えば 簡単に背景画像になっちゃうってわけ。ただちょっと画像の作り方にはコツがいるんだけどね。

簡単に背景画像が作れちゃうジェネレーターを活用しちゃおう!

Stripe Generator
Tartan Background pattern generator
Tiled backgrounds designer
Dotted Background Generator



あ!また質問なんですけど、大きな画像を右下あたりに固定して表示されているテンプレをutfで見たことがあるんですけど、あれはどうやって固定しているんですか??

あれはCSSで指定しているんだよ。こんな感じで。

▼背景画像を固定するサンプル

※「custom」の場合は「body」のところに書いてください

こうやって指定すれば、スクロールしても画像は固定されたままなんですね!

▼背景画像を右下に固定した場合のサンプル
クリックしてテンプレを確認

いろいろできて便利ー!背景画像って一言でいっても色々なパターンがあるんですね

背景画像は組み合わせ次第で色々な見せ方が出来るから色々試してごらん!

・背景色の指定
・背景画像を水平垂直方向に繰り返す
・背景画像を垂直方向に繰り返す
・背景画像を水平方向に繰り返す
・背景画像を繰り返さない
・背景画像を固定する
・背景画像を右下に配置
・背景画像を左上に配置

もっと知りたいときは検索してみると情報が出てくるよ!例えば、背景のことを知りたかったら、「CSS 背景」で検索すればいいし、書かれているCSSで意味がわからないものが出てきたらその名前(例えば「background-position」とか)で検索してみよう。

自分で調べた方が忘れないし、ちゃんと理解できるものね。

さて、今回のカスタマイズ講座は一旦ここまで! 日本橋先生の素材を使ってカスタマイズしたロベくんはコンテストに応募、オリジナル素材で作ったポリンちゃんはutfに公開しちゃおう。

先生ようやくカスタマイズの面白さがわかってきたのにこれでおしまいなんですか?

私たちもっと勉強したいよう!!

そこは安心して。継続今後もカスタマイズ講座はもちろんしていくよ。 それまで二人ともしっかり勉強を続けていくようにね!!

わかりました!!

JUGEMユーザーのみなさんからのカスタマイズ講座でやってほしい要望は 引き続き受け付けますので、ぜひコメントくださいね!

おまちしておりまーーす!!


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

表記の変更や、いらない箇所を削除しよう!

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

前回のあらすじ

色々なカスタマイズを覚え始めた2人。今度は、テンプレ内の表記についての カスタマイズに挑戦しようとしているようだが・・・?


先生、前回言っていた表記の変更ってどういうことですか?

わかりやすいところから説明しよう。いま二人がカスタマイズしている テンプレートサイドメニューを見てごらん。「selected entries」とか 「links」って書かれているよね。

はい。

ここを「最新の記事」とか「おすすめリンク」とか、日本語表記に変えたり自分で変更出来ちゃうんだよ。ちなみにこの編集は「HTML編集」で行います。

CSSのようにコメントがないからちょっと見つけられないわ・・

サイドメニューの始まりは「<!-- side -->」って書いてあるよ。

あ!わかった!見つけました。

ここ「フリースペースの移動」のときに勉強したわ!HTML編集のサイドメニューの項目はテンプレートに表示する順番に書かれているのよね。

その通り。じゃあ一番上にある「calendar」を日本語の「カレンダー」 という表記に変更してみよう。

って言われてもどこをどうしていいのやら・・・

実はとっても簡単なのさ。「<h3>calendar</h3>」の中を「<h3>カレンダー</h3>」と変更するだけなんだよ。


ほんとだ!日本語になった!

ちなみに、前に勉強したようにサイドメニューの項目は、「BEGIN〜」から「END〜」で 一項目を表している。つまりカレンダーをテンプレから削除したい場合は、 <!-- BEGIN calendar -->から<!-- END calendar -->をまるっと削除しちゃえばいい。



なるほどなるほど。じゃあ先生、「続きを読む」の文章とかも変更できますか?

もちろん可能さ。「<div class="entryMore">{entry_sequel}</div>」の部分を 下のテキストエリアの中にあるタグと置き換えてみよう。


わ!簡単に変わった!すごい!!

先生、サイドメニューのところでさらに質問があるんですけど、 何年もブログをやるとアーカイブの表示がすっごく長くなっちゃうんだけど、 何とかなりませんか?

ふっふっふ。今までのJUGEMだと特殊なカスタマイズが必要だったんだけど、 そんな皆様のご要望にお答えして、このシラッキーが新しい独自タグを作ったよ!

おおおお!どんな独自タグなんですか!!?

それは今後このブログで紹介予定だからお楽しみに!!

わー!ケチンボ!でもありがとうございます!!

どういたしまして。さて、二人ともだいぶカスタマイズのことが わかってきたんじゃないかな。

なんとなくわかってきたような感じ。

いよいよ次回は、テンプレートの背景画像のカスタマイズにチャレンジだよ。 心してかかりたまえ!

負けへんでーーーー!!


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

テンプレート内のテキストを装飾しよう!

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

前回のあらすじ

テンプレートの幅を広げたり寄せたりすることに成功したロベポリ! ところが、スットコドッコイのポリンは自分のテンプレカスタマイズを すっかり忘れていた・・・・!!



前回まではロべ君のカスタマイズばっかりだったから、 今回はポリンちゃんのリクエストを受け付けるよ。

私は、文字とかの装飾にもこだわりたいの。 テンプレート内の文字の色とか変更できませんか?

それは簡単にできるよ。今回もテンプレート「custom」シリーズを例に説明するよ。 まずはページ全体の文字色(リンクが貼られていない文字)を変更してみよう。 テンプレのどこで指定してるか2人はわかるかな?

何も変更されていない状態の「custom」テンプレ

※クリックして拡大

色ってことは、装飾だからCSSだよな・・

これかな?「/* ページ全体のテキスト色 */」

その通り。そこで指定されている色を変更すればOKだよ。 今は「#000000」って指定してあるね。


「#000000」ってどういうこと?

これはカラーコードといって、Webページ上で色を指定する際に使われるんだ。 「#000000」は真っ黒な色だね。カラーコードはここから確認できるよ。

よし!じゃあ「#006666」を入れてみようっと・・・出来た!

文字色が変わった!!
※クリックして拡大

ねえポリン!「/* ページ全体のテキスト色 */」って書かれている場所の 下の方に、色々な箇所の色を指定できるところがあるっぽい!

お!本当だ!「/* ページ全体のリンク色 */」を変更すれば、 リンクが貼ってある文章の色も変更できるってことかしら。

さすがポリンちゃんだね。でもリンクの色指定は少し特殊なので ちょっと説明しよう。

ふむふむなるほど。でも基本的には、自分でちゃんと色を指定すれば いいってことね。

ほかにも変更したい箇所はある?

サイドメニューの部分も変更したいわ!

それはCSSの「/* サイドメニューのタイトル */」って箇所で出来るよ。

あれ?でも先生、ここにはさっきみたいに色を指定する「color:」がないですよ??

無ければ追加しちゃえばいいのさ!さっきのところから「color:#000000;」を コピーして持ってきちゃえ!

どういう風に追加すればいいのかしら?

サイドメニューのタイトルにある「{font-size:14px;font-weight:bolder;margin:0 0 5px 0;}」、ここの中に追加すればいいんだよ。「;]が区切りなので、そのあとに追加してみよう。



おお!これで全体の色と統一されている場所も自由に色を指定出来るんですね。

そうなんだ。たとえば、記事本文や記事の続きの色を分けたりすることもできるんだよ。

サイドメニューの色も変わった!!

※クリックして拡大

先生!あと文字のサイズとかもいろいろ調整したいです!

文字の大きさは「font-size:」で指定しているんだ。 ページの文字を全体的に小さくしたいときは「/* ページ全体 */」、 記事部分だけなら「/* 記事本文 */」と「/* 記事の続き */」をいじってみよう。

変更したい箇所に「font-size:」が無ければ、さっきと同じように追加すればいいんだね。


文字サイズの目安としては「font-size:12px」が標準的な大きさ、「10px」小さめ、「14px」すこし大きめ。数字が大きくなるほど、文字サイズも大きくなるってわけ。

あれ、いま編集してみたんだけど、どこが変更されたかわからない・・・

そういうときは、思いきって「30px」とかにしちゃおう。 大きいサイズを指定すると変化が一目瞭然だから、どこをいじったのかすぐに分かるよ。

今回行ったカスタマイズをまとめてみるよ!!上のほうに置いてある、何もカスタマイズしていない状態のテンプレと見比べてみてね!


よーし。自分なりにいろいろ調整してみるぞっと!

ポリンちゃん。テンプレート内の表記とかも自分なりに変更できちゃうんだよ。

ほえ?

続きは次回だ!!


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


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