【こぼれ話】FC2ブログのカスタマイズお役立ちサイト集

100万ポイント山分け！1日5回検索で1ポイントもらえる

4541040

ホーム | 日記 | プロフィール

2012/01/22

(2)

カテゴリ：おうちのこぼれ話

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

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

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

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

FC2ブログ紹介　　　　FC2ブログ

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

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

■参照サイト　⇒　公式テンプレート・共有テンプレート一覧　　　　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

新館 HOME