Entries

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。
    この記事にトラックバックする(FC2ブログユーザー)
    http://yamatoiebakawa.blog.fc2.com/tb.php/36-d3c196a6

    トラックバック

    コメント

    コメントの投稿

    コメントの投稿
    管理者にだけ表示を許可する

    見出しと引用のCSSカスタマイズまとめ

    ヒットカウンタ powered by  シンプルパーツ

    CSS Carved Pumpkin
    CSS Carved Pumpkin / mauricesvay
    BloggerからFC2に引っ越してきて2週間。

    見出しと引用の見栄えをどうしても良くしたくて、CSSのカスタマイズを思い立ちました。

    FC2ブログに『公式カスタマイズマニュアル』があるので、チェックしてみたところ、自分のやりたいことが全然載ってない(1)。

    そこで、ウェブ検索しまくったら、いろいろ有益なサイトを見つけることができて、おかげさまでなんとか完成できました。

    今後のためにカスタマイズログを残しておきます。

    CSS基礎の基礎


    CSSはまったく分からなかったので、構文の意味からお勉強しました。
    FC2ひまわり動画マニュアルの『CSSカスタマイズ機能』が一番分かりやすかったです(2)。

    CSSを編集した後、HTMLでどう記述すればいいのかについてはCSSリファレンスの『クラスセレクタ』を読んで理解しました(3)。

    見出しのデザインは、日刊ウェブブログ式『見出しデザインの参考にしたい CSSで作るhタグのサンプル集』の「見出し(Headline)のサンプル集」をベースにしました(4)。

    引用のデザインは、Webクリエイターボックス『Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える』の「引用文の装飾」をベースにしました(5)。

    CSSテンプレートはそのまま使うと、背景や罫線の色が自分のテンプレートの配色と合わなかったので、適宜アレンジしました。色はWeb Safe Colorの『カラーチャート』を参照しました(6)。

    CSS編集手順と出来映えの確認

    見出しと引用の順で説明します。

    ① 見出し


    1.管理画面 > 環境設定 > テンプレートの設定
    スタイルシート編集内の「==body==」の欄にクラスセレクター「.selectorXX」を挿入。

    2.ホーム > 新しく記事を書く > 追記の編集
    HTMLで定義し、プレビューで確認。

    仕上がりはこの記事の見出しです。

    ② 引用


    1.管理画面 > 環境設定 > テンプレートの設定
    スタイルシート編集内の「== deco ==」の欄にID・セレクター「#bqX」を挿入。

    2.ホーム > 新しく記事を書く > 追記の編集
    HTMLで定義し、プレビューで確認。

    仕上がり

    引用部分のデザイン。本文を引用したら、この部分に文字が入力されます。背景の色も薄めなのでとても気に入っています。


    参考サイト


    (1)FC2ブログ|カスタマイズマニュアル

    (2)FC2ひまわり動画マニュアル|CSSカスタマイズ機能

    (3)CSSリファレンス|クラスセレクタ

    (4)見出しデザインの参考にしたい CSSで作るhタグのサンプル集|日刊ウェブブログ式

    (5)Webクリエイターボックス|Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える

    (6)Web Safe Color|カラーチャート


    それではまた。 最後までお読みいただき、ありがとうございました。


    ↑記事の感想は、SNSやコメント欄で頂けると嬉しいです。よろしくお願いします。



    ↑講読の際はRSSボタンをご利用下さい。

    この記事にトラックバックする(FC2ブログユーザー)
    http://yamatoiebakawa.blog.fc2.com/tb.php/36-d3c196a6

    トラックバック

    コメント

    コメントの投稿

    コメントの投稿
    管理者にだけ表示を許可する

    Appendix

    自己紹介

    1328587240_twitter-follow60.jpgchampleです。
    実用書やTV番組を通して得た気づきをまとめていきます。


    *Blog: 山といえば川
    *Twitter: @chample_ytk
    *Booklog: champleの本棚
    *Facebook: 山といえば川 ファンページ
    *Tumblr: 気になることをいろいろと

    fc2.png twitter.png booklog.png facebook.png tumblr.png

    *RSS登録

    Now tweet




    ビジネスパーソン の成長をちょこっと支援 BizRavel-ビズラベル-

    公認書評ブロガーに認定して頂きました。

    ブロとも申請フォーム

    この人とブロともになる

    QRコード

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