やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

その1

はてなCSSの構成についてはヘルプが充実しているので、そちらで確認します。
→要5/4の日記参照
今回CSSは1からやろうと思いましたが、管理メニューから何から何まで影響があるので、やはり面倒と言うことに行き当たりベースとなるテーマを選んでから開始しました。今回はhatena-orengeだと思う。
はてなの日記の構成には多数ののCSSのクラス名が存在しているので、まずその内容を理解する必要があります。はてなで、CSSを記述するのははてなにログインして管理から[管理]の[デザイン]から、[詳細デザイン設定]を選びページ下部にスタイルシートという記述部分に記述していきます。

1.ページトップにヘッダー部分に当たるはてなのヘッダーがあります。
(やまだ系では有料オプション使用中なのでサービスとして出さないを選択できるため、出していません。しかし出ていないと不便なので有料オプション拡張機能の指定で[メニュー表示]:タイトルの上にメニューを表示するをチェックしています。そのため右上側に[最近の日記][ログイン][ヘルプ]とか表示さます。
個人的にタイトルの上に出したくなかったので、タイトルの右下になるようにCSSで強制的に位置を下げています。でも、まだ、思ったようにできていません。要課題)

2.その下に日記のタイトルが入ります。この日記のタイトルがHTMLのh1タグです。通常タイトルははてなのテーマでも使用しない限りテキスト文字のみが表示される部分です。画像を表示させたいという人は画像を用意して以下の記述をします。で、通常h1タグはもの文章の中でも1番の見出しということになるのでhtmlの文章構造としては、一番重要ということになるので、文字のサイズも大きく、文字も強調されます。そのままではかっこわるいので画像の指定以外の部分でも修正をかけます。
CSSの記述方法
(例)h1(タグ名またはID名、クラス名){(指定内容)color(何を):(コロンで区切る)#ffffff(どうするのか);(セミコロン)}
記述は参考のように改行してもいいし、1行に記述していてもいいです。
>> >> 以下その記述

h1 {
font-size: 16pt; /*文字の大きさ*/
font-weight: nomal; /*文字の太さ。規定でh1は文字が太いので、nomalと指定すると通常の太さになります*/
color:#333; /*文字色です。色指定は通常RGBの数値#333333と数字6文字で表します。R(レッド)の色を2数で表しそれをG(グリーン)、B(ブルー)も同様に2数字で色を表します。同じ数値が重なるなら数字3文字に省略できる*/
text-align: left; /*左よせします。中央にそろえたいならleft部分をcenterに、rightにすれば右よせです*/
background:#FFF url("画像のあるURL") no-repeat 30px 0px; /*背景の指定で画像を指定しますが、cssの記述方法を短くしているので要約しますと文字色、背景画像の場所指定、その画像は繰り返すのか繰り返さないのか、画像の開始位置水平、画像の開始位置垂直です。ここの指定でいうと、背景色はしろ、画像のURL、画像は繰り返さない、水平30px位置、画像の垂直位置は0pxからという指示でになります*/
height: 画像の高さ数値指定; /*ここのように大きい画像を表示したい場合はサイズ指定が必要になります*/
width: 画像の幅を数値指定; /*なぜなら、h1の文字への背景扱いになるので、サイズ指定しないと文字の後ろ部分のみに画像が表示されるのみになって、全ての画像が見えないということになります*/
margin:1px 0px 5px 0px; /*マージン指定。記述方法が短いものを使用しています、数値の意味は上、右、下、左という数値を各半角スペースで区切って指定してます。指定しなくてもいいですし、指定することで余白部分がなくなったり行間がつまってくれることもあります*/
padding:0px; /*余白です。各タグには指示をしなくても余白やマージンが設定されているので、規定のhtmlに影響を受けないように指定しなくてもいいんですが、つい指定しましまします。指定は必要ないならしなくてもいいとお思います*/
}