--
    --.--

    スポンサーサイト

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

    このエントリーをはてなブックマークに追加
    2013
    10.30

    CSSいぢってみました

    私は開設当初からpotarさん作成の
    leaves」というテンプレートを使わせてもらってます^-^
    落ち着いていて気に入っています♪

    しばらく使っているうちに、細かい所を変えてみたくなってきたりして(^-^;)
    「テンプレートはカスタマイズ○」とのことでしたので、
    この機会にCSSをいじってみることにしました♪


    そうはいっても私、CSSの知識はほとんどゼロ(爆)

    とりあえず、他の方のソースコードやCSSを拝見して、
    値とかをいじってみて、
    自分のブログに適用(ダメなら元に戻す)。
    この繰り返しで何とかなるべ(^-^;)



    FC2ブログのテンプレートの編集


    FC2ブログのテンプレートには自分のブログの管理画面の
    「テンプレートの設定」というところ(画像の赤線部分)からアクセスできます。

    FC2BLOG_CSS_template


    この画面の下の方に「〜のスタイルシート編集」という項目があり、
    そこで直接CSSを編集可能です。
    編集した後、その下の更新ボタンを押せばアップロード完了!
    ブラウザでブログを再読み込みすると
    新しい設定が反映されます。



    hタグの変更


    私は今まで全くhタグを活用してなかったんですが(ぇ
    良い機会なので「自分が使いたくなるようなhタグ」を仕込んでみます (^-^)
    hタグとは見出し(heading)を指定するタグで、例としては
    すぐ上の「hタグの変更」という部分でhタグを使っています。

    当初、ウチのCSSにはh1,h2しか設定されてませんでした。
    しかも文字が大きくなるだけの寂しい設定(汗

    /*---------------------その他----------------------*/
    h1,h2{
    margin:0;
    padding:0;
    }


    さっそく変えてみようとしたら、問題発生!
    h1,h2の記述を変更するとレイアウト等がおかしくなってしまいました(>_<)
    イヤな予感がしたので、この部分の変更は断念。

    その代わり、h3以降に好きなものを追加することに。
    他の方のhタグの記述を参考にしようとしたんですが、
    なかなか分かりやすいものが無くて、脳内変換と試行錯誤でクリア(>_<)
    おかげで勉強になりました(汗

    ・hタグの見栄えを良くするため、borderを工夫する
    ・fontやbackground、paddingやmargin(余白)といったもののサイズ・色・位置を指定してあげる
    ・共通の設定は一度にできる
    ・逆に、一カ所にまとめて書かなくても、何度でも設定できる
     (Pros.気軽に設定できる  Cons.いろんな所に設定がバラけかねない)
    ・絶対反映して欲しい設定には !important と記述(例:padding: 0 !important;)

    試行錯誤してできたのがコレ!
    ってデザインフツーすぎる(6_6;)

    h3,h4 {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0;
    border-bottom: 1px solid #333333;
    }
    h3 {
    border-left: 10px solid #BB0033;
    }
    h4 {
    border-left: 10px solid #0066CC;
    }
    h5,h6 {
    font-size: 14px;
    padding: 2px 15px;
    margin: 0;
    color: #fff;
    background-color: #333333;
    letter-spacing: 1px;
    }
    h5 {
    border-left: 10px solid #BB0033;
    }
    h6 {
    border-left: 10px solid #0066CC;
    }


    試しにhタグ使ってみるテスト。

    h3タグだよ?


    h4タグだよ!


    h5タグ〜

    h6タグはこんな感じ








    引用(blockquote)の変更


    使用しているCSS (leaves)の値を自分好みに改変

    変更前
    /* 引用 */
    .main blockquote{
    padding:3px 9px 3px 16px;
    font-size:0.9em;
    margin:10px 5px 10px 5px;
    background: #fffdfc url(http://blog-imgs-55.fc2.com/p/o/t/potar/leaves-line2.png) repeat-y 1px 0;
    border-radius: 3px;
    border: 1px dotted #777e41;
    }


    これを、左側に出ていた画像パターンを排除、その他数値を微調整してみました。

    /* 引用 */
    .main blockquote {
    padding:3px 9px 3px 16px;
    font-size:0.9em;
    margin:15px 15px 15px 15px;
    background: #fffdfc;
    border-radius: 4px;
    border: 1px dotted #777e41;
    }


    試しに引用してみるテスト。

    変更前:
    Blockquote,before

    変更後:
    ちゃんと引用しようね




    codeタグの追加


    実はこれがやりたかった(笑)

    <code>cat document.txt</code>と書くことで
    cat document.txt ←こんな風に表示できるようにしたかったんです(^-^)

    Bootstrapという有名所のレイアウトパッケージ(v3.0.0)の記述を参考にさせてもらいました。

    code,
    pre {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    }

    code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    white-space: nowrap;
    background-color: #f9f2f4;
    border-radius: 4px;
    }


    色やborderなどを適当にいじって自分のCSSに貼り付け(場所は適当)。
    2013.11.1変更:色合いを変更・white-space: nowrap;を削除。

    /* codeタグ */
    * A script discribed here("code,pre" and "code") is a modified version of "bootstrap.css" of Bootstrap v3.0.0.
    * Copyright 2013 Twitter, Inc

    code,
    pre {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    color: #222;-webkit-border-radius: 4px;
    -moz-border-radius: 4px;border-radius: 4px;
    }

    code {
    padding: 2px 4px;
    font-size: 90%;
    background-color: #EEE;
    border-radius: 4px;
    border: 1px solid #BBB;
    margin:3px;
    }


    センスはイマイチだけど…
    思い通りに出来て余は満足じゃ(^0^)/
    関連記事

    このエントリーをはてなブックマークに追加
    トラックバックURL
    http://w6o6n.blog.fc2.com/tb.php/70-a6046ff2
    トラックバック
    コメント
    管理者にだけ表示を許可する
     
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。