楽天ブログの機能縮小に伴い、FC2ブログへの移転作業を行っております。　

今回の記事では、楽天ブログにはなかった ’呪文 （HTMLとCSS）’ を読解し、FC2ブログをカスタマイズするためのお役立ちサイトをご紹介します。　

■関連記事　⇒　
【こぼれ話】楽天ブログからFC2ブログへの引越し お役立ちサイト集
【こぼれ話】FC2ブログのカスタマイズ お役立ちサイト集
【こぼれ話】FC2ブログにフリーページ・フリースペースを作る方法（まとめ）


まず、FC2ブログを作成するためには、FC2IDが必要です。　ID取得 ～ ブログ開設までの手順は、公式サイトをご参照くださいね。

■参照サイト　⇒　FC2ブログ紹介　　　　FC2ブログ


最も重要なのは、テンプレートの選択です。　基本的には、旧ブログのレイアウト・デザインに近いものを選ばれるとよいでしょう。　けもやの場合、レイアウトは2カラム・左メイン（右メニュー）、デザインはシンプル・和風の条件で探し、[ japon ] を選びました。　

カスタマイズを前提とするなら、装飾が少なめのテンプレートを選ぶ方が無難です。　 呪文を唱えるのに必要なマジックポイントが、少なくて済みますよ。（笑）

■参照サイト　⇒　公式テンプレート・共有テンプレート 一覧　　　　FC2ブログ


もし、イメージにぴったりのテンプレートが見つかった方、大変ラッキーです。　おそらくほとんどの方は「ここを○○○したい・・・」となるでしょう。　大抵のところはカスタマイズできますが、変更する箇所によって難易度は大きく違います。

■参照サイト　⇒　はじめてのFC2ブログカスタマイズ マニュアル　　　　FC2ブログ


テンプレートの編集は、管理画面の 【環境設定 → テンプレートの設定】 から行います。　ここでHTMLとCSSが出てくるため、楽天から移転された方は面食らうことになるでしょう。　何せ、楽天ブログにはHTMLとCSSがありませんでしたからね。　

なお、HTMLはブログの構造を定義、CSSはブログの見栄えを定義するものです。　例えば、「文字の大きさを変える」「文字の色を変える」などなら、CSSをほんの少し書きかえればよいだけなので、初めての方でもさほど難しくないと思います。　

ご参考までに楽天ブログの場合、管理画面の 【デザインの設定 → デザインの詳細】 から、ごく簡単なカスタマイズが可能です。　けもやが思うに、これが楽天ブログの唯一の利点ではないかと。（笑）


編集を始める前に、現在のテンプレートを複製しておきましょう。　新たな編集を加える度に複製しておけば、修復不可能なほどレイアウトが崩れてしまったような場合でも、前の状態に戻すことができるので安心です。

編集画面を開いてすぐの状態は [タグのハイライト：OFF] [CSS ハイライト：OFF] ですが、[ハイライト：ON]にしておくと見やすくなります。　変更すべき個所を探す際には、ブラウザの検索機能（Ctrl＋F）を使うと簡単です。　変更を加えた後は、[プレビュー]で確認しましょう。　[更新]ボタンを押すまで、何度でもやり直せます。


おそらく、大抵の場合はCSSの方だけを変更すれば解決すると思いますが、レイアウトに大幅な変更を加えたい場合など、CSSに加えてHTMLの書き換えも必要になる場合があります。　

例えば、けもやのおうち -新館- では、オリジナルの [ japon ] よりサイトの横幅を広げ（CSSを編集）、プラグイン3を右カラムから左カラムに移動＆トップに表示（HTMLとCSSを編集）するよう変更を加えています。

ただし、これは [ japon ] の場合であって、テンプレートによっては最初からサイト幅が広かったり、プラグイン3がメインカラムに表示されるタイプもあります。　繰り返しになりますが、カスタマイズが苦手な方ほど、最初のテンプレート選択が重要になりますよ。


大変長い前置きになってしまいましたが・・・　＾_＾；

けもやが ’呪文 （HTMLとCSS）’ を唱える際にお世話になっているサイトを挙げておきます。　2005年に楽天ブログを始めた時点では知識ゼロでしたが、いじってるうちに何となく使えるようになってきました。　基本さえ分かれば後は応用できるので、ぜひ色々と触ってみてください。　爆発したりしませんから。（笑）

■FC2ブログのカスタマイズ　-基礎から応用まで-
　　　　　　　　　　　　　初心者でもできる簡単FC2ブログの作り方　　　　　るんばば さん
　　　　　　　　　　　　　ブログが作りたい！　+FC2ブログの作り方+　　　　KumaCrow さん

■HTMLタグ ・ カラーコードの検索
　　　　　　　　　　　　　みんなのタグ辞書　　　　　　　　hirarin さん
　　　　　　　　　　　　　HTML CSS インデックス　　　　えじ さん


また、けもやのおうち -旧館- や けもやのおうち -新館- のトップに置いてあるような、ちょっと手の込んだテーブル（表）を作る際には、HTMLエディタを使っています。　この記事に載せている画像は、　HTML Project2 の編集画面をキャプチャしたものです。　

■HTMLエディタ　　　HTML Project2 ダウンロード　　　　　　　　vector

以上、お役立ていただければ幸いです。　＾ｖ＾

旧館 HOME	目次／サイトマップ	WEB内覧会	新館 HOME
J・URBAN 建築日記集	J・URBAN 合同WEB内覧会		WORLD DESIGN 建築日記集
住友不動産ブログランキング		住まい人気ブログランキング