最新情報

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

このサイトに関して



当サイトご利用上の注意

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

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

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



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


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




特設コーナー

  • Banner_kanan_fund


















外部サイト(その他)

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


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









管理人ポータル

大師小同窓会関連












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


我が町!大師の情報

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

各種ノウハウ集



私家版スクラップブック

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

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

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

友達の輪・お薦めSHOP

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




    かわさき楽大師

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

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


« 【我が町】2014年 川崎大師風鈴市日程(2014/07/17~21) | トップページ | 【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには »

2014/07/10

【ブログの楽しみ方】今更きけないココログ-(1) ココログのしくみ-HTML文書とスタイルシート

この記事の目的

ブログは本来、難しいHTML(インターネット上で公開するページ)の知識がなくても、気軽に書けるもので、基本的な操作方法、例えば、画像の挿入や文字の色を変える、などといったことは、だいたい編集画面を見れば想像が付くし、公式FAQ(ヘルプ集)に解説されているので、このシリーズでは対象とはしていません。

しかし、ちょっとしたトラブルに対応したり、ブログをカスタマイズしようとするときには、もう少し基本的なことが分かっていないと理解できないことがあります。

カスタマイズとは、例えば、「ブログ全体の文字を大きくしたい」とか、「ブログ全体の文字の色を変えたい」、「行間を広げたい」といったブログ全体に関わることは、「スタイルシート」(CSSファイル/シーエスエス・ファイル)という、ブログのデザインをコントールしている情報(ファイル)をカスタマイズしなくてはなりません。

「スタイルシート」に記述するタグのようなものはプロパティと呼ばれますが、ネットで検索すれば、その記述方法はいくらでも見つかります。したがって、この「今更きけないココログ」シリーズでは、その詳細を説明する予定はなく、それを理解する前提の知識を提供するこことを目的としています。

最終的にはスタイルシートを使って下のようなことが何故できるのか?ということが理解できることを目標としますが、今回の記事では、スタイルシートの基本的な役割を理解します。

Basic00 図-1

上の画像で、②と③はCSSで色と文字の太さが変わるようにしています。④と⑤は通常の改行(正確には改段落)をしていますが、CSSで行間(段落と段落の間)が広くなっています。

 

HTML文書、スタイルシートとは

HTML文書やHTMLタグについては、こちらの記事(webページ)を参照して下さい。『【ブログの楽しみ方】ブログやウェブサイトのソース(HTML)を表示する/HTMLタグとは

HTMLタグはココログが自動的に追加してくれ、ユーザがブログを書くときは、提供されている編集画面を使ってワープロソフト感覚で書けばよく、HTMLタグを意識する必要はありません。

ここでは、編集画面を使って書いた文章や貼り付けた画像から、ココログが自動的にHTMLタグを付加してHTML文書を生成してくれるということを理解して下さい。

 

次にスタイルシートについて基本的な説明をします。

ブログを始めるときに、ココログなら「テーマ」(ブログデザイン)を選択し、これによって背景画像がついたり、2カラムや3カラムといったカラム数、文字の色や大きさといった、デザインが決定します。

HTML文書そのものには、デザイン情報を直接記述しないのが現在では一般的で、このデザイン情報は別のファイルに記述されています。これをスタイルシートと呼び、ファイル名は「styles.css」という名前がよく使われます。「styles」の部分は他の名前でも構わないのですが、拡張子(ピリオド以下の文字は、「css」をいうものを使い、このため、「css(シーエスエス)ファイル」などとも呼びます。

テーマを変えることで、文章や画像には影響なくデザインだけが変えられるのは、このスタイルシートを変えているだけだからですが、スタイルシートを使わないと、ブログやホームページはどう見えるのか?というのは、簡単に試すことができます。

下はIE11(Internet Explorer11)の例ですが、「スタイルなし」を選択(図-2)すると、スタイルシートを使わないでページを表示(図-3)することができます。

Basic05 図-2

Basic06 図-3

これでスタイルシートの役割がだいたいおわかりになると思います。

なお、上の画面を元に戻すには再びメニューから「規定のスタイル」を選択します。

 

ここまでのまとめとして、HTML文書とスタイルシートの関係を表したのが下の図です。

Basic03_3 図-4

上図に一部誤りがあります。スタイルシートの記述が<body>~</body>の中の「ヘッダー」にあるとしていますが、正しくは、<head>~</head>の中です。図を修正次第差し替えます。 →修正済み

ココログ独自の用語もありますが、ブログは一般的にこのような仕組みになっています。

なお、上の図で分かるように、ユーザが記事を書くと言うことは、HTML文書の一部分だけを書いており、その部分のHTMLタグを確認するには、編集モードを「HTMLの編集」に切り替えれば見ることができます。

記事部分以外のHTMLタグは、ブログ全体で共通(同じ内容)になっていて、どのスタイルシートを使うかというのは、ヘッダー部分<head>~</head>部分に記述されています。

ブログのデザインを変えてブログ全体に“反映”すると、過去の記事もデザインが変わるのはこのためで、例えば、「9月になったから、今日の記事から秋らしいデザインに変えたい」と思っても、記事毎にデザインを変えることはできません。

また、ブログ毎に使われているスタイルシートを直接編集することはできませんが、ココログには「カスタムCSS」という機能があり、ここに自分で追記することで、スタイルシートを変更することができます。

 

よくあるトラブルと対応方法

ブログのデザインを変えたのにブログを見ても変わっていない

  

次回は、「HTML文書」→「スタイルシート」についてもう少し詳しく見ていきます。

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

 

« 【我が町】2014年 川崎大師風鈴市日程(2014/07/17~21) | トップページ | 【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには »

コメント

コメントを書く

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

« 【我が町】2014年 川崎大師風鈴市日程(2014/07/17~21) | トップページ | 【ブログの楽しみ方】今更きけないココログ-(2) ブログのスタイルシートの中を見るには »

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


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

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

カテゴリー

無料ブログはココログ