最新情報

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

このサイトに関して



当サイトご利用上の注意

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

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

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



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


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




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

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


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









管理人ポータル

大師小同窓会関連












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


我が町!大師の情報

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

各種ノウハウ集



私家版スクラップブック

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

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

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

友達の輪・お薦めSHOP

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




    かわさき楽大師

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

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


« 【ブログの楽しみ方】今更きけないココログ-(1) ココログのしくみ-HTML文書とスタイルシート | トップページ | 【ブログの楽しみ方】今更きけないココログ-(3) カスタムCSSの使い方 »

2014/07/12

【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには

この記事の目的

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

(1)でスタイルシートの概略を説明しましたが、この記事ではもう少しその役割を説明し、これをカスタマイズする作業に必要なテクニックと知識を紹介します。

段落タグ(<p>~</p>タグ)は行間を広く空けるためのタグではない

このタイトルの意味が理解できない方は、下の記事をお読み下さい。

【ブログの楽しみ方】Enterでの改行とShift+Enterでの改行の違いと行間の関係【ココログ】

答えを言ってしまうと、<p>~</p>で囲まれた段落と段落の間がやや広く空く(ことが多い)のはスタイルシートでマージンの設定をしているからだと言うことが書いてあります。

上で見たように、“<p>といった個々のHTMLタグに対する“装飾”を細かく設定”しているのがスタイルシートです。

もう一つ例を説明すると、下の「ここはblockquoteです」の部分は、ココログ編集画面の Blockquote ボタンを使用しています。ブラウザで閲覧したときに、モス「グリーンの破線で周囲が囲まれていると思いますが、これも、このブログのスタイルシートでそう指定されているからです。

ここはblockquoteです

この部分を「HTMLの編集」モードで見ても、

<blockquote><p>ここはblockquoteです</p></blockquote>

と記述されているだけです。

<blockquote>の装飾方法を設定している部分をスタイルシートから書き出すと、以下のようになります。

blockquote {
    font-size: small;
    border: 1px dashed #8C9801;
    padding: 8px 8px 0 8px;
    margin: 10px 0;            
}

ここでは詳しく説明しませんが、「border: 1px dashed #8C9801;」は、「枠線(「border)は1pxの太さで、グリーン(8c9801 )の破線(dashed)で囲む」という意味です。

ココログの編集画面はBlockquote ボタン(引用ボタン)が押されたら、その行を“<blockquote>と</blockquote>で囲む”ということをしているだけです。

 

スタイルシートの内容を見るには?

既に説明したように、スタイルシートはHTML文書の<head>~</head>の間に記述されているので、HTML文書の生データ(ソース)を見ます。

ソースを表示する方法は『【ブログの楽しみ方】ブログやウェブサイトのソース(HTML)を表示する/HTMLタグとは』で説明しています。

スタイルシートを呼び出す<link>タグを探します。(下図)

Basic12 図-1

当ブログでは(現在使用しているデザインでは)下記のように記述されており、背景色を浸けた部分がスタイルシート(cssファイル)のURLです。

<link rel="stylesheet" href="http://daishi100.cocolog-nifty.com/blog/styles.css" type="text/css" />

この部分をコピーして、ブラウザのアドレスバー(URLが表示される窓)に貼り付けて開きます。

@import:外部スタイルシートを呼び出す

下図は、このブログのスタイルシートを開いたところです。

Basic13 図-2

「@import」というのは、外部、つまり別のスタイルシートを呼び出す命令のようなもので、括弧の中がそのスタイルシートのURLです。

また、このブログではテストなどでユーザ独自に記述した「カスタムCSS」も使っているので、その下(「/* user css */」以下)に表示されています。

『カスタムCSS』は管理画面の「ブログ」タブ→「デザイン」の下の方にある、「カスタムCSSを編集」で、記述した内容です。

Basic09 図-3

自分でCSSを記述すると、図-2のように、既存のスタイルシートの下に追加されるようになっています。

ここで、一番上のURLを見ると、

/.shared-cocolog/themes/common/base-weblog.css

となっており、http:で始まっていません。このような場合は、ブログのURL(トップページが分かりやすい)のフォルダ名(ここでは「blog」)をとったものを先頭(左側)付けます。

このブログのURL「http://daishi100.cocolog-nifty.com/blog/」で言うと、背景色を浸けた部分です。

これで、

http://daishi100.cocolog-nifty.com/.shared-cocolog/themes/common/base-weblog.css

というURLが得られます。このURLにアクセスして内容を見ます。

【メモ】当ブログの外部css呼び出し部分

/* base css */
@import url(/.shared-cocolog/themes/common/base-weblog.css);
/* portal css */
@import url(/.shared-cocolog/nifty_managed/themes/common/base.css);

/* theme css */
@import url(http://theme.cocolog-nifty.com/themes/rich/newdays/screen.css);
@import url(/.shared-cocolog/nifty_managed/themes/rich/newdays/screen.css);

このような作業(文字を切り貼りしたする作業)をするときは、テキストエディタを使用すると便利です。Windows PCなら、「メモ帳」が代表的なテキストエディタです。テキストエディタについて詳しくはwebページ『【ブログの楽しみ方】Windowsアプリ「メモ帳」【ココログ】』で説明しています。

<p>タグの定義を調べる

ここでは、<p>タグに関する記述を例に説明します。“行間”(正確には「段落と段落の間の広さ」)を決定しているからです。

h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote
{
    margin-top: 10px;
    margin-bottom: 10px;
}

という記述です。(「p」には便宜的に背景色をつけました。)

この記述方法に関する説明は次回にしますが、この「h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote」という部分は、<h1>タグ、<h2>タグ~<blockquote>タグのマージンの指定をまとめて一度に行っていることを意味します。「margin-top: 10px;」は上に、「margin-bottom: 10px;」は下に10pxのマージンを空けるという意味です。

 

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

 

 

« 【ブログの楽しみ方】今更きけないココログ-(1) ココログのしくみ-HTML文書とスタイルシート | トップページ | 【ブログの楽しみ方】今更きけないココログ-(3) カスタムCSSの使い方 »

コメント

コメントを書く

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

« 【ブログの楽しみ方】今更きけないココログ-(1) ココログのしくみ-HTML文書とスタイルシート | トップページ | 【ブログの楽しみ方】今更きけないココログ-(3) カスタムCSSの使い方 »

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


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

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

カテゴリー

無料ブログはココログ