Crazy Moon Blog
PBCと戯言
メニュー
ブログ説明 プラグイン1 カテゴリ 月別一覧 最新記事 コメント トラックバック リンク 検索 エントリーセレクト ?

フォントの指定変更 * Top * HTMLとCSSの対応
改造しやすいのはどこか?
2005年02月09日 (水) 01:44 :: Edit ::
リンク色の説明の前に、全くHTMLもCSSも初心者だって人が、テンプレートを改造したい場合、どこが改造しやすくて、どこが難しいか説明します。

その前にまず、普通のHPよりブログの方がずっとデザインのカスタマイズは難しいと覚えておいて下さい。
これはページの中に色々な機能が詰め込まれている上に、ページの構成そのものも複雑で、更に独自タグがあるためです。
ブログは記事を書いて公開するだけなら、実に簡単なシステムですが、デザインを自分で弄るという点に関してはそうではありません。

なので、初心者さんが始める場合、以下のようにやってみて下さい。

  1. まず自分が希望する形にもっとも近いテンプレートを根性で探す。
    FC2は共有も含めると、かなりたくさんのテンプレートがあるので、全部見るだけでも大変ですが、探して下さい。
    この程度で挫けていては、カスタマイズは無理ですw
    探す時に大事なことは、色や素材よりも、形で探すことです。
    色や素材は割に簡単に変えられますが、幅や順序を変えるのはもっと面倒だからです。
    テンプレートによっては、コメントの有無や、配置の設定の仕方によって、一見似たようなものでもカスタマイズしやすいものと、そうでないものがありますが、これは試してみるよりありません(^^;
    ただ、初心者さんなら、tableタグを使っているものの方が間違いなくカスタマイズが楽でしょう。

  2. 見付けたら、まず一番変えやすいのは背景や文字の色や大きさです。
    colorやbackground(-color)、font-sizeという部分を見付けて、好きな色や大きさに変えるだけです。

  3. 次に簡単なのが、背景の画像です。
    ただし、これはbody(つまりページ全体)あるいはせいぜいhead部分の背景の話です。
    タイトルの背景などの場合、面倒になりますから、最初は手を出さないことをすすめます。
    変える時は、background-image:url("*******")という部分を探して、***の部分を好きな画像のアドレスに変えます。
    繰り返しの制御などありますが、まずはこれでやってみましょう。
    背景指定の詳細については、また後日書きます。

  4. 正直なところ、初心者さんはこれ以上はきちんと勉強してからというのをすすめます。
    これ以外のところを弄ると崩れる可能性が跳ね上がるからです(^^;

  5. 逆に難しいのはどこか?
    回り込みの指定(float)や、幅の微調整(margin padding width height)です。
    これは慣れるまで手を出さないことです。自分の環境ではよくても、他のブラウザだとぐっちゃぐちゃということにもなりかねません(^^;

  6. な、なんとかこのくらいは…?
    トライしてみるならば。
    サイドバーのメニューの表示順の入れ替えや、ブログペット、解析、カウンターなどの設置はやれるかもしれません。
    ただし、これは元々のテンプレートの分かりやすさに、かなりの影響を受けます。
    私のテンプレートは、基本的にコメントを付けていますから、順序入れ替えはごっそり移動でできるようにはしていますが、それも入れ場所をちょっと間違うと、いきなり崩れます。

  7. ブログペットなどの設置は、HTMLのメニューのタイトル部分とボディー部分を適当に一括りコピーし、中身を入れたいタグに変更します。
    例えば、以下のような部分を入れたい場所にごっそりコピーペーストします。
    なお入れ場所を間違わないように注意して下さい。

    <!-- ▼リンク -->
    <div class="mnttl">Links</div>
    <div class="mnbody">

    <!--link-->
    <div><a href="<%link_url>" title="<%link_name>"><%link_name></a></div>
    <!--/link-->

    </div>
    <!-- ▲リンク -->

    これをコピーして、例えば<!-- ▲ 検索 -->の直ぐ下に入れます。
    (この時、間違っても、</td>の下に入れたりしないように(^^;)
    そして中身を入れ替えます。

    <!-- ▼ブログペット -->
    <div class="mnttl">ブログペット</div>
    <div class="mnbody">
    ブログペットを貼るためのタグ
    </div>
    <!-- ▲ ブログペット -->

    タイトルは不要なら削除しても良いでしょう。
    これで基本的には出来上がりです(あくまで私のテンプレートならです)

  8. ちょっと微妙。
    これはセンタリングです。
    本来、センタリングは簡単なのです。HTMLにalign=centerやcenterタグを入れるか、CSSに text-align:center; と入れるだけだからです。
    ところが、ここに呪われたIEというブラウザが存在し、しかも蔓延しています。
    IEはセンタリング関係のCSSに関して、全くちっとも欠片も信用できません。
    なので正しく書いているのに上手くいかない、崩れるという事態がしばしば生じ、IEのためだけに苦しい手直しを要求されます。
    従って、これは手を出さないことです。センタリングしたいなら、最初からセンタリングになっているテンプレートを探しましょう。

  9. なお、これらの改造は一カ所ずつ保存、確認、成功なら次へが鉄則です。
    そうしておけば、失敗しても戻すのが簡単です。
    また途中のバックアップも忘れないように。
# :: 過去記事 :: Comment (2) :: Trackback (1) ::
Comment
◇ いらっしゃいませ^^
使って下さってありがとうございます^^
私は、エキサイトとFC2でテンプレートの公開をしていますが、近頃は、エキサイト中心で、FC2での公開はお休みしています。
ですが、また気が向いたら、FC2でも公開しようと思っていますので、その時はどうぞよろしくお願いします^^
2005/02/11(金) 01:27:19 * URL * 月蝕 #z8Ev11P6[編集]
◇ はじめまして
blue-plateのテンプレートを使わせて
もらってます。ほんとかわいくて
気に入っております。
いろいろ試行錯誤しながら
私なりにちょこちょこいじってます♪

ほんとブログって奥が深いですね。
これからもがんばってください!
2005/02/10(木) 23:17:45 * URL * RISA #-[編集]

コメントを投稿する
URL
Comment
Pass
Secret 管理者にだけ表示を許可する
 

Trackback
この記事のトラックバックURL
http://crazymoon.blog3.fc2.com/tb.php/44-d9b1a2b7
この記事へのトラックバック
Sun&Moon先ほどの月蝕さんのブログの中にあった記事。全くHTMLもCSSも初心者だって人が、テンプレートを改造したい場合、どこが改造しやすくて、どこが難しいか説明します。とても分かりやすく記述されている。個人的なメモとして残すが、テンプレートのカスタマイズを試みよ
2005/06/13(月) 16:10:59 * sugar pot
2005 Powered By FC2 allrights reserved.
template by Sun&Moon

ホームページ アフィリエイト レンタルサーバー 1GB!FC2ブログ(blog)