最新情報

  • 2019/07/14
    ブログを更新しました。
    2018/04/30
    冷やし中華...じゃなかった、Twitterはじめました。

このサイトに関して



当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。

    2019/04/14現在、コメント欄の認証方法やNGワード設定等、時々変更しています。メールアドレスの入力が求められる場合、とりあえずメールアドレスの形をしていれば(@の前は適当でも)OKです。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会









管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« 【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには | トップページ | 【ブログの楽しみ方】siteコマンドの使い方/検索サイトからのアクセスを増やすには »

2014/07/15

【ブログの楽しみ方】今更きけないココログ-(3) カスタムCSSの使い方

この記事の目的

この記事は過去の記事が既読であることを前提としています。

今回は、ココログの「カスタムCSS」に自分で記述できるよう、CSSの記述ルール(「セレクタ」、「プロパティ」)について解説します。

実際に、様々な“修飾”を加えるためには、「プロパティ」についてまとめたサイトや本を読む必要がありますが、その前提となる知識です。

また、この記事の中で使用している見出し、例えば上の「この記事の目的」は、左側に葉の画像 Icon01 が付いたり、サイドバーで使われている見出しと同じ書式になっていますが、いちいち画像を貼り付けているわけではなく、HTMLタグを弄って、このように表示させているだけです。どうやったらこのようなことができるのかを説明します。

前回のまとめ

前回説明した内容を図に表しました。

Basic14

そのブログが使用するスタイルシートは<head>~</head>内に書かれていて、これにより、ブログがブラウザに読み込まれるとき=表示されるときにスタイルシートの内容を参照(①)します。

更に、外部スタイルシートimportしている場合、上から順番(②~⑤)に読み込み、次に、その下に記述されているカスタムCSSを読み込みます。したがって、重複した記述があった場合、下に書いてある方が優先されます。(←ここ重要)

ココログのカスタムCSS

前回記事『(2) ブログのスタイルシートの中を見るには』でも少し触れましたが、使い方は公式FAQにも掲載されています。

公式FAQ『CSSを使って自分でデザインを編集できますか?

前述のように、CSSはブログが表示されるときに読み込まれるので、カスタムCSSを修正して保存したときは、(ブログが既に開かれている場合、)F5キーを押すなどして再読み込みをする必要があります。

CSSの記述ルールと行間(段落間)を変更するCSS

記述方法は下の図を参照して下さい。

Basic16

文字(スペースも)は必ず半角英数字を使用します。見やすいように、上のように、セレクタやプロパティを改行して書くのが一般的です。

上のように記述されているCSSを使用しているブログの場合、例えば、下のようなCSSをカスタムCSSに記述したとすると、<p>タグに関してのみ、上下のマージンの値が10px→15pxと変わります。(上下に5px増えるので、行間は10px分より広く空くようになる。)

p
{
    margin-top: 15px;
    margin-bottom: 15px;
}

たいていの場合、この記述をカスタムCSSに加えて、マージンの値を調整することで行間を変えられと思いますが、必ず、自分のブログのCSSが現在どのように定義しているのかを確認してから行って下さい。

セレクタの種類

スタイルシートをブラウザで開いて見たときに、大きく分けて、「セレクタ」が「#」で始まっているもの、「.」(ピリオド)で始まっているもの、それらが付いていないもの(前項で説明したような、個々のHTMLタグの属性を直接指定するもの)があるかと思いますが、それぞれ、「IDセレクタ」、「クラスセレクタ」、「タイプセレクタ」と呼びます。

この項では、補足説明として「クラスセレクタ」のみ紹介します。

まずは簡単なサンプルです。

あいうえお

このブログのスタイルシートでは、引用ボタン( Blockquote )を押して、<blockquote>~</blockquote>で囲むと、グリーンの破線で周囲が囲まれるように定義してあると、前回説明しました。(文字の色や大きさは<p>タグと同じです。)

「あいうえお」という文字に色が付いていますが、これは編集画面の「フォントカラー」ボタンで色を付けたわけではなく、下のように記述してあります。(背景色は便宜的に付けました。)

<blockquote class="emphasize4"><p>あいうえお</p></blockquote>

この「emphasize4」という「クラス名」は、このブログのカスタムCSSで次のように指定してあります。

.emphasize4 {
        color: #8C9801;
}

この例のように、ピリオドに続けて任意の名前を付けたセレクタをCSSに記述すると、その属性を様々なHTMLタグで使用することができます。使い方は上のように、タグの「<>」の中に「class="クラス名"」のように記述します。(「HTMLの編集」モードで自分で記入する)

この「emphasize4」という「クラス名」を<p>タグ内で使い、<p class="emphasize4">かきくけこ</p>と記述すると、下のように表示されます。

かきくけこ

使えるタグを限定してスタイルシートに指定する方法もあり、例えば、<p>タグだけに使う場合は、「p.emphasize4」のように、タイプ(タグ)を前に付けて記述します。

なお、サンプルとして、web_css_test というwebページを用意したので、ご興味がありましたら、ソース(HTML)やカスタムCSSの内容をご覧下さい。

クラスセレクタの使用例

この記事の中で使っている見出し(例えば上の「クラスセレクタの使用例」)は、「HTMLの編集」で下のように書いているのですが、サイドバーに表示されている見出しと同じ書式になっています。(左側に“葉”のイラストが付いたり、文字の大きさなどもサイドばーの見出しと同じです。)

<h2 class="module-header">クラスセレクタの使用例</h2>

これは、ブログのソースを見たときに、サイドバーの見出し部分の記述を真似したもので、見出し等、サイト内で頻繁に使う書式に名前をつけておき、必要に応じて「class="~"」でその書式を適用するというのが、クラスセレクタの一般的な使い方です。

下は、他の方のブログのHTML(ブログA)で見出し部分を見たところですが、たまたまこのブログ(ブログB)と同じ「module-header」というクラス名を使っていますね。

Basic15

 

この記事は前後の記事との兼ね合いで加筆修正する可能性があります。

 

 

« 【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには | トップページ | 【ブログの楽しみ方】siteコマンドの使い方/検索サイトからのアクセスを増やすには »

コメント

コメントを書く

(ウェブ上には掲載しません)

« 【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには | トップページ | 【ブログの楽しみ方】siteコマンドの使い方/検索サイトからのアクセスを増やすには »

最近のコメント

counter since 2018/12/25

  • Flag Counter

    FLAG Counterのロゴをクリックすると、更に詳しい分析結果が表示されます。
    ココログのアクセス解析よりは少ない数字になるようです。
サイト内検索
ココログ最強検索 by 暴想
2019年7月
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

sponsored link


ドールハウス工作おすすめ参考図書

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ