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

     
    HTML編集画面楽天ブログの機能縮小に伴い、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

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


    関連記事
    新館 HOME目次/サイトマップWEB内覧会旧館 HOME
    J・URBAN 建築日記集J・URBAN 合同WEB内覧会WORLD DESIGN 建築日記集
    にほんブログ村 住まいブログ 一戸建 住友不動産へ 住友不動産ブログランキング FC2ブログランキング

    コメント

    HTML・・・

    全くわからない(爆)フリーページなどに書くときの私の裏技は日記を書くところで下書き。色や大きさなど設定してコピペしてました(笑)それで楽天は何とかなってましたがFC2はどうなんだろ?

    Re: HTML・・・

    > 全くわからない(爆)フリーページなどに書くときの私の裏技は日記を書くところで下書き。色や大きさなど設定してコピペしてました(笑)それで楽天は何とかなってましたがFC2はどうなんだろ?

    ん? 記事を書くスペースの上に、HTMLの挿入ボタンがありますよ。

    もしかしてお尋ねの内容は、楽天のようなフリーページを作る方法でしょうか? 
    それでしたら、管理画面 ⇒ ツール ⇒ ファイルアップロードから、HTMLファイルをアップロードすればOKです。

    試しに、旧館のフリーページ(http://plaza.rakuten.co.jp/chemoya/002000)を新館に移植してみました。
    右サイドバーの一番下にある「フリーページ見本」のところです。

    コメント欄では説明しにくいので、ご要望があれば記事で紹介しますよ。 ^v^

    コメントの投稿

    トラックバック


    この記事にトラックバックする(FC2ブログユーザー)

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。