自分のテンプレートを直感的に編集、作成したい!

今てぃーだではかなりの数のブログテンプレートを用意してますが、
それでもやっぱり自分でテンプレート作りたいって
おもう時がありますよねっ(^^)

これまで色々と小技を紹介してきてますが、(記憶ないけど。。。)

そのカスタマイズの為に、てぃーだの管理画面のテンプレートの中には、
カスタマイズできる用になっています。

これってすごい便利に作られていますが、
さらに直感的に編集する方法を教えておきましょうね。(^^)

それにはまず2つ用意してもらうものがあります。

まずは

Fire Fox
http://www.mozilla-japan.org/products/firefox/

自分のテンプレートを直感的に編集、作成したい!



これはもしかしたらつかっている人も多いかも知れませんが、
ブラウザと呼ばれる、いわば インターネットエクスプローラー みたいな
ネットを見るやつですね。

コレをダウンロードして、立ち上げた後に

『Web Developer 1.1.2 日本語版 』のダウンロード
http://www.infoaxia.com/tools/webdeveloper/download.html

自分のテンプレートを直感的に編集、作成したい!



↑ こちらのページで

Mozilla Firefox用『Web Developer 1.1.2 日本語版』ダウンロード(208KB)

と書かれているものをダウンロードして、
fire fox にインストールしてください。

それで準備はOKです。



さぁこれで、簡単にブログのテンプレートが編集できるようになるんですよ。


どうやるかというと、簡単でですね、


自分のテンプレートを直感的に編集、作成したい!



とりあえず↑の二つをダウンロードして開いたら
こんな風なページになります。

それのですね、


自分のテンプレートを直感的に編集、作成したい!



左上に 「CSS」 という項目があるので、ソレをクリックすると

「CSSを編集する」 という項目がでてくるので、ソレをクリックしてください。


自分のテンプレートを直感的に編集、作成したい!



そうすると左に枠がでてきます。

これがスタイルシートの枠なんですね。^^

このスタイルシートの枠が何かというと、

この枠の中を編集するとその結果がリアルタイムに
右のブログに反映されるんですっ!

つまり、右のブログをみながら、スタイルシートを変更できるんですよー。
これほど楽なものはありませんですねー(笑)




たとえばですが、僕のブログのヘッダー、頭の部分の大きさを変えようとおもうと
その表示を横のスタイルシートに書き込めば

自分のテンプレートを直感的に編集、作成したい!



びょーんと(^^)

こんな感じに反映されるんですねっ

こんな感じで、自分のブログをみながら変更できるので、
とてもわかりやすいですっ




んでもちろん、変更したのは、管理画面のスタイルシートのところに
コピペして保存しないといけませんのでご注意を。

せっかく作っても保存しないと意味ないですからねぇー。


もし色々とやっている人はこの方法で自分のブログをデザインしては
いかがでしょうか。多分楽になるはず(笑)

分からない事はコメントしてくださいねぇー


追記

こちらエトゥさんの記事がさらに分かりやすく書いてますので、
是非是非参考にしてみてください。

http://yamigeme.ti-da.net/e1176959.html

文章も面白いですw

さらに色々と活用できる事を書かれていますので、
是非参考にしてくださいねー(^^)

http://yamigeme.ti-da.net/c55479.html









同じカテゴリー(ブログカスタマイズについて)の記事

この記事へのコメント
いつもお世話になっております。

おお!この方法はすごく楽にカスタムできそうです。

よし、今日はこれにチャレンジだ!
Posted by とぅんとぅん at 2007年09月27日 10:36
これならうちのパパさんも簡単にできるかしら・・
Posted by 狛犬 at 2007年09月27日 15:28
てぃーだが出来て半年もならない時だったすかね...
だーしゃにこれ教えてもらったおかげで、ブログのテンプレートのいじり方覚えられたっすよ。
ありがとうっすね~(激感謝)

あ、まただーしゃのトコに遊びに行こうかと思ってるっすよ。
近いうちに連絡入れまスね。
Posted by エトウエトウ at 2007年09月27日 19:46
■ とぅんとぅんさんへ

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

これならかなり簡単にカスタマイズできるようになるとおもいますよー
みながら直感的にできますからねっ
是非やってみてくださいっ☆


■ 狛犬 さんへ

こちらやってみたらかなり大丈夫だとおもいますよっ
是非チャレンジしてみてくださいですっ

やりながらだから面白いですよー


■ エトウ氏へ


是非またうちに遊びにきてくださいですねー、
連絡まってますですよっ

そいでこれは使いやすいですよね、
結構今更ですが紹介です(笑)
Posted by だーしゃ at 2007年09月28日 11:45
>Mozilla Firefox用『Web Developer 1.1.2 日本語版』ダウンロード>>(208KB)
>と書かれているものをダウンロードして、
f>ire fox にインストールしてください。
これが、出来ませんでした。
解凍した後に
インストールJScript Script Fileというのを、クリックしたけど、
エラーになってしまいます><
Posted by ミムラ at 2007年09月29日 22:02
参考になりました。
お陰でサクサクできました!!^^
Posted by mune at 2007年09月30日 16:52
■ミムラさんへ
ダウンロードしたものを、firefoxにドラッグしてみてはどうですか?
それでインストールが始まるかなとおもいますが、
どうでしょう??


■muneさんへ

とてもよかったです(^^)
是非色々と利用してみてくださいねー
見やすくて楽しいですよねっ
Posted by だーしゃ at 2007年09月30日 18:46
おおっ すごく嬉しい情報です^^
ありがとうございます。
Posted by pyo at 2007年10月01日 22:24
■pyoさんへ

是非是非ちょこちょこといじってみてくださいねー
やってみると楽しいですよねーっ(^^)
Posted by だーしゃだーしゃ at 2007年10月02日 09:08
だーしゃさん、CSSいじるときに色で悩む事が多いんですよー。
なにかいい方法ないでしょうか?
(自分でリストを作るのが一番いいのかな:笑)
Posted by pyopyo at 2007年10月02日 13:27
■pyoさんへ

色っていうのはデザインでーって事ですかねー、
どういう配色でやるのかーとか。

実はコレにはコツがあるんですー、

ブログの配色のコツについては、
後ほどブログのネタにしましょうねー。



あともしカラーコードのことなら、ってpyoさんなら
知っていると思いますが、表があるので、
ソレをまず見ながらやってみてくださいねー

カラーコードで検索してみてくださいー。
Posted by だーしゃ at 2007年10月02日 17:16
だーしゃさん 初めまして。
このプラウザっていうんですか?^^ゞ
すごくいいですね~。
すぐに「てぃーだ」で編集するのはコワい気がしてましたが
コレを使うと・・
ここを変えるとこんな風になるんだ~って
スタイルシートのこと よくわからないのに
少しずつ勉強させてもらってます。。
画像・背景の色・文字色を少しイジレルようになりました。
ありがとうございます。。
Posted by kuni at 2007年10月18日 12:50
■kuniさんへ

コメントありがとうございますーー
お役にたててうれしいです=^^

いろいろと触ってみてくださいね、
自分でできたらうれしいですもんね。

どんどんやっていたらさらにたのしくなりますよー^^
Posted by だーしゃ at 2007年10月19日 10:07
はじめまして^^;

兵庫の『てんこもり』でブログ書いています~
記事の一覧を観やすく表示させたくて探していたらたどり着きました。

早速、導入しましたらすっきりと表示されました~

私のテンプレートは、
いろいろといじっていましたので埋め込みに若干工夫が必要でしたが、
なんとか埋め込む事が出来ました☆

ありがとうございました☆

今後ともどうぞよろしくお願いします!
Posted by 『わっち』 at 2008年05月28日 19:57
■わっちさんへ

コメントありがとうございますー(^^)
導入してもらってよかったですーーー(^^)
ドンドンいろんなの試してみてくださいねー♪

わっちさんのテンプレート拝見したのですが、
すでに色々と工夫されているみたいですし、
色々とできるとおもいます!!

楽しんでくださいねっ☆
Posted by だーしゃだーしゃ at 2008年05月28日 20:02
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。