2018年01月04日

まず始めに、スタイルシート(CSS)の編集について

 現在、ホームページやブログに使用されているプログラム(HTML)には、例えば文字の色を赤にするとかの表示方法を指定する為にスタイルシート(CSS)というのが使用され、HTMLの中で表示方法を指定することは行われなくなっています。

 これは、アクセサビリティを向上させるため、つまり色々な人(障害を持っている人とか)が、色々な機器、色々なブラウザからでもホームページやブログにアクセス出来て閲覧出来るようにするために、内容の構成(構造)を指定するのはHTMLにして、その表示方法を指定するのはHTMLから分離させたスタイルシート(CSS)にするようにWEB技術の標準化を進める“W3C”(World Wide Web Consortium)と言う組織が推奨しているためです。

 なので、皆さんが使っているブログも殆どがスタイルシートが外部ファイルとして別に存在して、それも編集可能になっているのもあると思います。

この、seesaaもそうなっています。

ですが、seesaaでは以下のような但し書きが書いてありました。

「弊社ではCSSに関する技術的サポートは一切行っておりませんので、知識のある方のみ編集等を行なっていただきますよう、お願いいたします。」まぁっ、自己責任でいいですよ〜。。。


 スタイルシートはHTML本文の中でも直接記述することも出来るので、スタイルシートのファイルを直接編集できないブログでも、使用することは可能です。

ただ、その方法もW3Cによって非推奨になってはいますが、ブログで予めメニュー等で設定されているフォントの色を変える等の機能は、この直接記述のスタイルシートが使用されているようです。

(数年後にはどうなっているか分かりませんが。。。)


と言う状況なので、ここでは、

@スタイルシートを編集する方法

AHTMLにスタイルシートを記述する方法

で、説明していきたいと思います。


試しにやってみます。

文字を赤にしてみます。


@スタイルシートの編集

クラスを使って適用させます。

スタイルシートに次の様に記述します。


「.font1 {color:#ff0000;}」

ここで、「.font1」がクラス名で自由に名前を付けれます。

このブログで実際に編集した様子です。

20180106-02.JPG


で、次にブログの本文(HTML)に次の様な記述をします。

「&ltp class="font1"&gt文字色に赤を指定&lt/p&gt」


実際のサンプルです

文字色に赤を指定



次は

Aブログ本文(HTML)にスタイルシートを記述する方法です。

「&ltp style="color:#ff0000;"&gt文字色に赤を指定&lt/p&gt」


実際のサンプルです

文字色に赤を指定



どうでしょう、今見ているブラウザで右クリしてプロパティか何か、ページのソースコードを表示して実際の記述を確認してみてください。

ちなみに、実際のこのブログのHTMLの内容です。

20180106-03.JPG


とりあえず現状をふまえて考えると、ブログ全体のページに共通する内容、今後作るページも含めて指定をしたい時はスタイルシートファイルを編集するのが簡単ですが、一時的に設定をするだけなら、本文に直接書き込んだ方が簡単ですね。


それから、スタイルシートを編集して保存しても、ブラウザ上で変更が反映されない場合があります。

それは、ブラウザがスタイルシートの前のファイルを保存してしまっているためなので、強制的に再読み込みを実施する必要があります。それを“スーパーリロード”と言います。

やり方は、「ctrl」+「F5」です。


次ページ:




関連ページ


posted by Yuuu69 at 18:44| 基本的なこと | このブログの読者になる | 更新情報をチェックする

2016年05月01日

そもそもブログ(blog)って何ってところから

今や誰でも出来る手軽な情報発信としてSNSが大活躍な時代だけど、いわゆるWebサイトと言われているのはホームページ(HP)であり、個人レベルでは日記の様な時系列の情報の発信ツールとしてブログ(Blog)が用いられています。

んで、ブログって何?って言うと、
日記の様な時系列の記事を簡単にインターネット(WEB)上に公開するWEBサイトのことで、基本的にはホームページと同じです。
日記の様な時系列の記録(ログ/Log)の公開目的にしていて"Web Log"(ウェブログ)が省略されてBlog(ブログ)と言われるようになりました。

では、Blogの特徴はと言うと、
1.BlogのWEBサイトを無料で使用できるサービスサイトが多数あって、予め用意されたテンプレートを使用できます。
2.なので、ホームページを作る技術がなくても記事をアップすることができます。
3.なので、ホームページ作成ソフト("ホームページビルダー"や"Dreamweaver"等)を必要としません。
4.全ての記事(ページ)が時系列で表示されます。
5.ので記事のタイトルより上に日付もタイトルになります。
6.したがって、ページ構成を自由にすることはできません。


つまり、簡単な代わりに制約もあるということですね。。。

スマホ等のモバイル端末での使用がメインのSNSに対してパソコンベースのWEBサイトは情報をアップするのにそれなりに手間はかなりかかりますが、Blogはホームページを作るよりはるかに簡単(リーズナブル)です。
手間がかかる、手間をかけられるということは、それなりに質の良い記事をアップできるということ。
良いblger(ブロガー)を目指しましょう!

次ページ:まず始めに、スタイルシート(CSS)の編集について
前ページ:

関連ページ
目次

posted by Yuuu69 at 00:00| 基本的なこと | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。