ブログをカスタマイズしたい！
ブログのカスタマイズ
「ブログのテンプレートを、カスタマイズしてみたい！」と考えている人は、結構いらっしゃるようです。
「文字の大きさを変更したい」、「背景の画像を取り替えたい」、「ついでに、うちの旦那も取り替えたい」などですね。
そこで、今回は実際にカスタマイズするには、どのようなことが必要になるのかを書いていくことにします。
お話は、次の順番で進みます。
はじめに
1：今後の予定
だんだんブログにも慣れてくると、既存のものでは満足できなくなってくるのが人の常です。
「あの人と同じものを使っているだなんて、癪（しゃく）だわ、由美子さんだわ、お逝きなさい」となってくるわけですね。
そこで、ビギナーでも、カスタマイズが出来るようになるために、次のことを順番に書いていく予定でいます。
- HTML入門
- CSS入門
- カスタマイズ例
どうして、カスタマイズに、HTMLやCSSが必要なのか？今回は、そんなお話です。当ブログ（「ブログが作りたい！」）にしては、ちょっと難易度が高めなので、少しずつゆるやかに進めていきます。
2：HTMLやCSSを覚える必要があるのかしら？
ただ、本当にHTMLやCSSを覚える必要があるのかは、よく考えてみてください。あなたの今後の人生に、役立つものなのかしら？
もしかすると、覚える時間を、他の事に傾ける方が有益かもしれません。
かわいいあの娘と、ラブラブデートした方が、充実した時間になるかもしれないし、あるいは、HTMLやCSSなどは外注して、よりSEMに集中した方が、あなたのブログは売上を伸ばすかもしれません。
あなたの大切な時間を、本当に意味のあることに使って欲しいのです。
もし、あなたがHTMLやCSSを覚える必要があるのであれば、読み進めてください。
1つ1つやっていけば、簡単なカスタマイズくらいは出来るようになると思います。あるいは、たとえ自分では分からなくても、誰かに聞くときにトンチンカンな質問にならなくなるかと思います。
カスタマイズとは？
ブログのカスタマイズは、既存のモノに手を加えて、好きなように改造することを言います。英語で書くと、customizeになります。
ブログに対してのカスタマイズという言葉は、「テンプレートを自分の好きなように改造していく」ことを意味します。
環境設定や、プラグインの追加でもブログは大きく改造できますが、独自性（オリジナリティ）のない変更については、カスタマイズという言葉は、あまり用いられません。
テンプレートとは？
1：ブログのテンプレートとは？
テンプレートという言葉を聞いても、何だかピンとこない人も、いらっしゃるのではないかしら。
テンプレートを和訳すると、「雛（ひな）型」という言葉が、最もあてはまるように思います。
例えば、1円玉（お金）は、どのようにして作るかご存知かしら？
偽造通貨を作ったことはないので詳しくは分かりかねますが、1円玉用の雛（ひな）型に、アルミニウムを流し込んで、プレスして作るようです。
ブログの場合もイメージ（流れ）は同じです。テンプレートに文章を流し込んで、[記事を保存]ボタンをクリックすることで、記事が出来上がります。
つまり、雛（ひな）型が変われば、他の国の硬貨も作れるのと同じように、テンプレートが変われば、同じ文章であっても、まったく見え方が違うブログを作ることができるのです。
テンプレートは、着せ替え人形の洋服のように、好きなときに好きなものと交換できます。
2：テンプレートは、何で出来ている？
ちなみに、どこでテンプレートに関する作業を行うかと言うと、FC2ブログの場合は、[環境設定]の[テンプレートの設定]にて行います。
まだ、触れたことがない人は、頭を慣らす意味でも、一度クリックしてご覧になってみてください。
中を見ていただくと分かりますが、次の2つを編集する箇所があるはずです。
- HTML編集
- スタイルシート編集
そうです、テンプレートは HTMLとスタイルシート（CSS）で出来ているのです。ゆえに、カスタマイズするには、HTMLとCSSを覚える必要があるわけです。
HTMLとは？
HTMLは、HyperText Markup Language（ハイパーテキスト マークアップ ラングエッジ）の略称です。「えいち てぃー えむ える」と読みます。
ハイパーは、スーパーよりも上の状態だそうです。スーパーマンを「すごい人」と訳すなら、ハイパーマンは「超すごい人」となります。
みなさん、すでにブログをご覧になっているわけですから、「ただのテキスト（文章が書かれているだけのもの）」とは違う、ハイパーな仕掛けを、よくご存知なのではないかしら。
例えば、「リンクされている文字列をクリックすると、該当するページへ飛んでいくことが出来る」とかね。
つまり、「ただのテキスト」に、「HTML」と呼ばれるタグを付け加えて、リンクなどの仕掛けを作成するわけです。
なかなか、言葉だけでは曖昧でイメージし難いと思います。以降の記事で、実際に「HTMLタグ」を体験してみましょう。
CSSとは？
CSSは、Cascading Style Sheets（カスケーディング スタイル シート）の略称です。「しー えす えす」と読みます。
HTMLで作成する文書に対して、CSSは、レイアウトやデザインの変更を差し加える役目を担っています。
CSSは単独で何かを成（な）すものではありません。
ちなみに、Cascadingは、「次々に雪崩をうつように波及する」というような意味です。
記述されているCSSは、上から順番に読み込まれて、その指示通りに、指定されたページにレイアウトやデザインを波及させていきます。
CSSも、言葉だけでは曖昧でイメージし難いと思います。以降の記事で、実際に「CSS」を体験してみましょう。
CSSは、カスケーディングを省略して、単に「スタイルシート」と呼ぶ人もいるので、どちらでも分かるように覚えておきましょう。
次回予告
次回は、カスタマイズ前の準備について書きます。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
- ブログをカスタマイズしたい！（この記事です）
- カスタマイズ前の準備
2：HTML入門
- HTML入門 はじめました
- HTML文を表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/08 更新日：2008/03/08
｜「カスタマイズ前の準備」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
釈由美子さん
うーん、ブログでも、ホームページでも、
CSSは、ハイパー同じだと思うけれど・・・。
なぜでせうね？
今後は、htmlをじんわりとやってからなので、
CSSは、もうちょっと先になります。
こちらこそ、その折には、いろいろとご指導くださいませ。
あれ？釈由美子さんて、あまり有名じゃなかったかな？
ドラマで「お逝きなさい！」とかやっておられたと思うんだけれど。
たぶん。(´Д｀;)
釈由美子！！！！
釈由美子さんはハイパー有名ですね。
うおおんはずかしいよう
あれれ、ｃｓｓはブログでもHPでも同じなんですね。
なんだろう・・・自分でソフトで開いてやってみたんですが、
全然ｃｓｓが適用されなくて諦めてました。
同じならもう一回挑戦してみようかな・・・
こういうコメントのとことかのプログラム？（CGI？？）の
FC2独自タグみたいなのがあるんですよね。
それがまたお逝きなさいって感じで困ってます。
でも、頑張ってみようと思います。
楽しみにしてます！
ごめんなさい
ごめんなさい。分かり難かったかも。
遊び部分は、思いつきで書くものだから、
あまりにも、適当なのね。
CSSは、ブログでも、ホームページでも同じッス。
違うのは、システム環境なのです。
とりあえず、どちらにせよWebサーバと呼ばれる
サーバプロセスが動いております。
例：Apacheなど
そいで、さらにブログの場合は、
ブログツールなるものも必要なのです。
例：Movable Typeなど
それで、ひろこさんが、
ホームページ作成支援ソフトなどで開こうとしても、
サーバ側でやっつけてもらわないといけない部分があると、
表示されなかったりします。
ひろこさんがおっしゃっている
FC2独自のタグ（変数）とかもそうです。
つまり、どうすれば良いの？となるのだけれど、
んー、出来ないかも。
そういう部分を吸収してくれるソフトってあるのかな？
パソコンに、Webサーバやブログツールを構築しても良いけれど、
ホームページビルダーや、Dreamweaverみたいに絵的に作るのは、
出来ないかも。
私はテキストエディタで作っているので、
考えが足りていませんでした。ごめんなさい。
ひろこさんは、どうやってCSSなどをいじっているのでしょう？
そこを聞かなければ、話がはじまらなかったですね。
こりゃ失敬。(^-^;)>
すっきり！
なるほど、そうだったんですね。
出来ない理由がわかってスッキリしました。
自分は、ｃｓｓはstyle noteを使っています。
→http://www.wht.mmtr.or.jp/~riki/style/?page=top
もうバージョンアップは止まってるっぽいですが、
なんか使いやすくて･･･
でも多分このソフトでは編集できないと思います。
テキストエディタで構築されてるということは、
全部手打ち・・・？すごいですね！
よし、じゃあKumaCrow さんの講座で勉強して
管理画面からのカスタマイズをやってみようかな＾＾
Firefoxのアドオン
やはり、変数とかプラグインとか、
うまいこと補完してくれそうにないですね。
style noteを拝見させていただきましたが、
これもほとんど手打ちみたいな感じがしますけれど、
そうでもないのかしら。
とりあえず、FC2さんが、カスタマイズツールなどを、
サービス提供しない限り、無理っぽいです。
んー、あ、そだ。
Firefoxのアドオンで、style noteに近いことが出来るかも。
Web Developer [日本語版]
http://www.infoaxia.com/tools/webdeveloper/
Firebug Japanese
https://addons.mozilla.org/ja/firefox/addon/5165
自分が使いこなせていないものを薦めるのも何ですけれど、
後々、使い方含め、記事にしようと思っていたネタです。
＠ITさんの次の記事を読むと、イロイロおもしろいと思うよ。
「テキストエディタでWebサイト構築をガンバル人へ」
http://www.atmarkit.co.jp/
fwcr/rensai/freeauthoring06/freeauthoring06_1.html
すごい！
こ、これはすごい！
ブラウザ上でcssを編集したり出来るんですね！
じゃ、これで改造して、ソースコピーして、
ブログ管理画面のカスタマイズのところに貼り付けたら、
幸せになれるのかも・・・
今試しに自分のブログの文字の大きさを変えて、
普通に出来たものだから、びっくりしました。
@ITさんの記事も読んできました。おもしろかった・・・
いろんなソフトやサイトなどが紹介されてて、ほとんど知らないの
ばっかりだったので驚いてるところです。
あんなにたくさんあるんですねー
style noteは、手打ちソフトって聞きましたが、
確かにビルダーみたいに、KumaCrowさんの言葉を借りるなら
「絵的」な編集は出来ないですね。
でも、入力補助機能？がついてて、右クリックでプロパティとかがダーっと
出てくるので、それを選ぶだけなんです。
自分でカタカタカタとはほとんど打ちませんね。
コピー、貼り付け、みたいなマウスでの作業ばっかりです。
ほんとは、カタカタしてみたいです。なぜかといえばなんかかっこよいからです。
ブラウザ上
あら、お役に立てたのかしら。(・∀・)
そうです、ブラウザ上で出来るのです。
私は、パソコンの画面が小さいので、
表示とソースを1画面で行うと狭苦しいので、
使うのをどうしたものか悩んでいます。
とりあえず、右上にコードのエラーが表示されるので、
それだけでも便利です。
んー、入力補助機能がある方が、いいですよねぇ。
打ち間違うこともないし。
無用なエネルギーは使わない方が良いもの。
はじめまして＾＾
お友達にブログの右サイドバーが落ちていると言われ
自分には普通にしか見えないので
ビックリして調べていたら、ここに辿り着きました＾＾
すごく見やすくて、ハイレベルなブログですね！
お気に入りに入れました♪
じゅゆりんはブログカスタマイズ初心者です＾＾；
色々と勉強させていただきますね〜
応援です☆
カスタマイズ
コメントありがとうございます。
じゅゆりんさんのブログを拝見させていただきました。
情報商材レビューですか〜・・・儲かりまっか？(・∀・)/でんなー
あと2回ほどで、CSS入門が終わります。
その後、ようやくカスタマイズのシリーズに入ります。
良かったら、ご覧ください。
ご不明な点などあれば、
お気軽にコメントしてくださいませ。！(oﾟωﾟo)
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/236-23d38e96
すごく、いやハイパータイムリーです。
昨日、ちょっとブログいじってみよと思ってやったんですよ。
すごくかわいそうな結果になりそうだったので中止しました。
なんかブログのカスタマイズって普通のｃｓｓと微妙に違うのかな？
今の自分はブログの上の画像変えるのが精一杯・・・
次からの記事で勉強させて頂きます。
ところで由美子さんって誰ですか
笑ってコーヒー吹きました
とりあえずふきん取りに逝ってきますね！