ネットとブログで副収入生活

ポイントサイト、アフィリエイト、アンケート、クラウドソーシングなどネットで出来る小遣い稼ぎを攻略中。相互リンク、相互RSSは常に受け付けています。コメントより気軽にどうぞー。
PR

ブログに必要!? 記事内に『見出し』を使いたくなったら

今回はCSS(スタイルシート)とHTMLのお話です。
といってもそれぞれの意味を理解する必要はありません。
あくまで『見出し』に利用するというだけのことです。




見出しとは


ブログをよく閲覧する人なら一度は見たことがあるかと思います。
この記事でまさに今使っている『見出しとは』の部分ですね。
真似をして独自に作ろうとする人も、もしかしたらいるかもしれませんね。

ただしブログ内の機能に備わっているかというと実はそうではありません。
見出しはスタイルシートで作成し、それを記事内で命令して出しています。



スタイルシートを編集


『Fc2』『Seesaa』など最近のブログサービスはスタイルシートを簡単に編集できる仕様なので、困ることは特に無いかと思います。
注意点としては分からない部分の編集は避けること、そして何を編集しているのか認識することです。
適当に編集し、その後更新してしまうとブログのテンプレートが変わってしまったり、意図しないデザインになることもありますよ。

今回の場合は見出しなので、テンプレートにもよりますが追加するだけでオッケーなこともありますね。



『見出し』を構成するプログラムの例


<例1>

h(数字) {
font-size: 105%;
padding: .25em 0 .5em .75em;
border-left: 6px solid #999999;
border-bottom: 1px solid #CCCCCC;
}


例1


先程から使っていますが、上記のプログラムでこういった見出しになります。
『font-size: 105%;』の部分が文字サイズです。
ブログ記事では横線は簡単に出せますが、縦線は出せないので地味に便利なテクニックです。『border-left: 6px solid #999999;』の『6px』でサイズ調整ですね。



<例2>

h(数字) {
font-size: 105%;
padding: .5em .75em;
background-color: #f6f6f6;
}


例2


シンプルに色だけ付けました。『#f6f6f6』が色を示す部分ですね。



こういったプログラムをスタイルシートに書き込み更新すれば見出しを構成するプログラムは完成です。
記事に出力させるプログラムを記述すれば好きな場所に見出しを入れることができます。
(数字)の部分は任意で構いませんが、優先順位を気にする人もいるようです。Googleはそういったことは気にしないと回答しているんですけどね。

h1ならh1、h2ならh2を呼び出しましょう。




オススメの見出しサンプルサイト


管理人が愛用している見出しのサンプルサイトです。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

こちらをさらに編集して好みにアレンジしています。
若干の知識はいりますが、説明文もあるので初心者でも何とか理解できるかと思います。




ブログランキング
にほんブログ村 小遣いブログ 初心者のお小遣い稼ぎへ 




コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

最近の記事
参加中ランキング
にほんブログ村 小遣いブログ 初心者のお小遣い稼ぎへ


クリック有難うございます。
励みになっています。
リンク
RSS
お小遣いサイト

クラウドワークス
サグーワークス【オススメ】
CROWD【オススメ】

ポイントサイト
げん玉【オススメ】
ネットマイル【オススメ】
ちょびリッチ【オススメ】
GetMoney!【オススメ】
モッピー【オススメ】
お財布.com
ECナビ
POINT PAY
PointShop
PONEY!
ポイントボックス
warau.jp
予想ネット
e-bet
チャンスイット
ハピタス【オススメ】
フルーツメール

アンケートサイト
マクロミル【オススメ】
リサーチパネル
キューモニター

アフィリエイト
忍者AdMax【オススメ】
リンクシェア
アクセストレード

ポイント交換サイト
PeX

プロフィール

ナツキ

Author:ナツキ
ネットで稼ぐ方法を模索し、その中で活用しているところだけ紹介してます。
閲覧した人が得して自分も得する。そんなブログを目指します。


リンクはフリーです。
相互リンクはコメントからお願いします(詳しくはこちら
相互RSSも大歓迎。


サイト開設日:2008.6.1

ツイッター
ブログ内検索