◆【賢威】のマニュアルノウハウの番外編
〜CSS | スタイルシートを使い倒そう〜
CSSとは・・・、
「Cascading Style Sheets:カスケーディング・スタイル・シート」と言われ、HTMLと組み合わせて使用する言語です。
HTMLがウェブページの『構造』だとすると、CSSは『装飾』というイメージが近いと思います。
この『装飾』とは次のモノを指します。
●色、サイズ、レイアウトなどの表示スタイル
●プリンタなどの表示スタイルや出力スタイル
●音声などの再生スタイル
などなど、多岐に渡って用途があるんです！！
『でも！！』
『別にCSSを使わなくたって、プラグインなどHTMLで変更できるけど！？』
っとブログをそこそこしている方からすれば、思いますよね？
その【何故？】を解決致しますね。
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
どーも、よっしです。
星の数ほどあるブログの中から、起こしいただき、誠にありがとうございます。
この【ご縁】が、末長く続きますように、本日も全力投稿致します。
宜しくお願いします♪( ´θ｀)ノ
『実際に文字が書けてれば、何でもええやん！』
って僕も少し前までは思っていました。
しかし、
HTMLでも出来てしまう、文字の装飾（色やマーカー、大きさの変更など）を、
どうして別の方法でやるのか。どうして賢威は別の方法を用意しているのか？
この意味を考えたことがありますか？
そもそも、意味の無いモノを作るために時間を費やす企業はありませんよね？
ですから【CSS】を使うと、何かメリットがあるということなんです。
単刀直入にいいますね。
SEO対策になり、検索エンジンからの評価が上がるからなんです！！
それでは、この違いに関して解説していきます。
◆図１
<p><font color=”#ff0000″ size=”5″>HTML上で色を変える</font></p>
↑このようになります
では、CSSを使うと・・・・
◆図２
<p>スタイルシートで色を変える</p>
文言が少なく済むことが、最大の魅力になっています。
この様に、HTMLで装飾をすると長くなってしまいますが、CSSにすることによりスッキリしますね。
本来、全ての装飾をHTMLでやることは間違いだと言われています。
正しい表現をすることで、検索エンジンからも正しい評価がされるということです。
ちょっと細かいですが、少しでもHTMLを少なくすることで、ソースが見えやすくなります。
すると、検索エンジンのクローラーがキーワードを見つけやすくなるんです！
◆『賢威』の今から使えるCSSまとめ
これから『賢威』のCSSをご紹介していきますが、使い方はとっても簡単！！
このPDFをクリックして、右側に書かれているソースをコピペです。
ではいきますね〜♪( ´θ｀)ノ
◆文字位置の変更
文字を中央寄せ
文字を右寄せ
文字を左寄せ
◆文字を大きさを変更する
文字を大きく
さらに大きく
文字を小さく
◆文字の太さを変更する
文字を太く
文字を元に戻す
◆文字に色をつける
文字を赤色に変える
文字を青色に変える
文字をピンク色に変える
文字をオレンジ色に変える
文字を水色に変える
文字を灰色に変える
文字を紫色に変える
文字を緑色に変える
文字を黄土色に変える
文字を黄緑色に変える
文字を黄色に変える
文字を黒色に変える
◆文字にマーカーをつける
青色のマーカー
灰色のマーカー
赤色のマーカー
黄色のマーカー
◆画像位置と文字位置
◆アイコン使う
文字の先頭にPDFのアイコン
文字の最後にPDFのアイコン
文字の先頭にRSSのアイコン
文字の先頭にメールのアイコン
文字の最後にメールのアイコン
文字の先頭にZIPのアイコン
文字の最後にZIPのアイコン
文字の先頭に初心者マークのアイコン
文字の先頭に「CHECK!」アイコンPart1
文字の先頭に「CHECK!」のアイコン Part2
文字の先頭に「CHECK!」のアイコン Part3
文字の先頭に「POINT!」のアイコン Part1
文字の先頭に「POINT!」のアイコン Part2
文字の先頭に「POINT!」のアイコン Part3
文字の先頭に「注意!」のアイコン Part1
文字の先頭に「注意!」のアイコン Part2
よく使うのは、この辺りではしょうかね！！
どーでした！？
こんなにも、たくさんのアイコンやら、文字変更が可能になるんです。
何度もお伝えしていますが、これをHTMLですると、文言が長くなってしまい、
検索エンジンからの評価を落としてしまうんです！！
これだけのバリエーションがあれば、読者さんにも、検索エンジンにも、高評価が得られること、間違いなしです♪( ´θ｀)ノ
是非とも実践してみてください-_-b
このページを『ブックマーク』して、いつでもコピペできるようにしておけば、かなり使い勝手がいいのではないでしょうか？
ではでは、本日はこのあたりでドロンします*\(^o^)/*
ありがとうございました。
一日一歩
よっし
