2005年01月29日

文字の大きさを変える方法 〜ライブドアブログのカスタマイズ〜

スタイルシート(CSS)をちょちょいと変更して、文字の大きさを変えてみました。

サイドバーの文字は小さめに、真ん中の本文は、それよりちょっと大きめ、にしてみます。

 

カスタマイズ入門としては、とっつきやすい内容ですね。

 

■1. 「HTMLってなに?」「スタイルシートってなに?」 と言う方は、まずこちらで学びましょう。めちゃくちゃわかりやすいです。

1時間でつくるホームページ

HTMLとスタイルシートの何たるかが、わかりましたか?
では、次に行きます。


■2. HTMLとCSSとの関係
HTMLのそれぞれのタグに、CSSで決めたデザインを設定しています。
たとえば、僕のサイトの例ですが、日付(.dateというクラス名)には、小さめの太字、文字色は赤っぽいもの、というように設定されています。HTMLで記述するとき、<h2>という見出しのタグに、dateクラスを割り当てているんです。

ここまでは、簡単ですね。

■3.スタイルシート(CSS)の書き換え
○デザインの設定
 ↓
○スタンダード
 ↓
○CUSTOM
 ↓
○スタイルシート書き換えの例


いろんなクラス名が記述されていますね。

 .blogtitle(一番上のでかいタイトル)
 .description(そのヨコの小さめの説明文字)
 .title(各記事のタイトル)
 .date(日付)
 .main(メイン文章)
 .main-continues(「続きを読む」ってやつ)
 .posted(記事の一番下の「Posted by・・・」ってやつ)

・・・などなど

で、それぞれに、

  font-size

ってありますでしょう?
こいつをすきな値にすればいいんです。

一番小さい文字にするには、
 font-size:xx-small  (僕の場合、サイドバーなどに使ってます)

ちょっと小さめは、
 font-size:x-small   (僕の場合、本文記事などに使ってます)

ちなみに、この「xx-」ってのは、相対的な大きさです。
ちなみに、7段階あります。

xx-small、x-small、small、medium、large、x-large、xx-large

のように。
順に1.2倍ずつ大きくなります。

また、

 12px (12ピクセル) 

のように絶対的な大きさを指定してもぜんぜん平気。

ページ一番上のタイトルは、この方式です。
僕の場合、こんな風に設定してます。
 font-size:34px

■4. Blogの再構築 をちゃちゃっとやって、完了。




■この記事は要チェック!

1時間でつくるホームページ
HTMLの基礎ならここ!

Google
Web blog.askit-bp.com



 ↑  ↑  ↑  ↑
ランキング参加中。
今日は何位だろう?



この記事へのトラックバックURL

トラックバックをされる際、当ブログ、もしくは当記事を参照するリンクを貼っていただけると嬉しいです。
記事と関連性のないトラックバックはご遠慮ください。

この記事へのトラックバック
ブログデザインをカスタマイズする  昨夜新聞社が帰ったのは夜9時を回っていたと思うが、朝刊に両紙とも間に合った。 まだ北日本新聞しか見てないが、富山新聞には顔がわかるくらい大きく写ったと言う。 北日本新聞は僕のコメントを載せてくれた。 「訪れた人たちが.
ブログデザインをカスタマイズする【城端曳山祭庵連合会々長日記】at 2005年01月29日 23:06
http://blog.rank10.net/update/ping.cgiに更新PINGを送信して頂き、誠にありがとうございます。blog.rank10.netは、登録型ランキングサイトの為、未登録サイト様の更新情報を反映する事が出来ません。よろしければ、この機会に御登録頂けないでしょうか。
PING受信のお知らせ【元祖ブログランキング】at 2005年01月31日 14:53
ブラウザが違うと文字が見えにくくなっていたので、ブログの文字サイズを変更しました。こちらの記事は大変参考になりました。
文字の大きさ変更【気の向くまま】at 2005年03月17日 20:00
3カラム化もほぼ完了したので、次にメニューバーを つける事に挑戦。 その中で〜ライブドアブログのカスタマイズ〜 という、まさにドンピシャなページを見つけたので参考にした。 結果として50点。半分しか成功しなかった。 具体的に言うと HOME→パソコン関連→HO
ブログにメニューバー、まだ失敗【アフィリエイト、どきどき体験記】at 2005年05月16日 00:32
今日は離婚に関連した記事をどんどん盛り込んでいく予定だったのですが、どこで道を誤ったのか、ブログのカスタマイズに時間をとられてしまいました。離婚関連の情報が見たい人は別の記事を見て下さいね。 ライブドアブログのデザイン自体に問題はないのですが・・・文字が....
ブログのカスタマイズに四苦八苦【■離婚問題救急ネット■            〜全ての夫婦は離婚予備軍〜】at 2005年08月18日 06:11
今日は、ライブドアのブログをカスタマイズします。 記事が増えてくるとなんだかずらずら長くて見にくかったりします。 という事で、ライブドアブログをカスタマイズしてみましょう。 ■ブログを作成 / 管理ページにログイン ↓ ■ カスタマイズ/管理 ↓ ■デザイ....
文字の大きさを変更する【アフィリエイト発信基地@情報起業家】at 2006年03月21日 10:51
この記事へのコメント
TBを返していただきありがとうございました。
僕のブログはネタがネタなんで、TBを送ってみたくても相手がいなくって…。
今回はじめて(?)一般的な話だったんです(笑)

家作り楽しみですね。 6年前に店と一緒に新築しましたが、
もっと時間があれば、いろいろ工夫できたのに…と悔やんでます。

「Blogランキング」1clickさせていただきますね。
Posted by 庵連合会長 at 2005年01月30日 11:49
 
          

     dell_468x60_2




■■■ も く じ ■■■

迷ったら、トップページへ
スウェーデンハウスで家づくり HOME

はじめにお読みください
beginners' rack とは?

家づくり
41万+α 円の節約
マイホームを考え始めたら
家の模型
本人登記の方法
防犯対策
スウェーデンハウス
家づくりの成功と失敗
家のメンテナンス
加湿器 冬の乾燥対策

住宅ローン
ローンとの戦い
繰り上げ返済とローンの借り換え

DIY
物置をDIYで
レンガアプローチ
表札
手作り木製網戸
トールペイントでネームプレート

ガーデニング
ガーデニングの初心者
チューリップの芽
魅惑のホプシー
芝生の手入れ
シラカバ

ダッチオーブン
ルクルーゼ
火のお話(火おこしキスケ2号)
鶏の丸焼き
スペアリブ
野菜丸ごとスープ
スキレットで餃子
広島風お好み焼き

カスタマイズ
メニューバーのつけ方
独自ドメインでスタート
文字の大きさを変える方法


■オススメ商品

インディアン伝承シャンプー

フランクリン・プランナー

年会費無料クレジットカード比較

引越業者の無料一括見積もり比較

住宅ローン繰上返済と借換 無料相談

ガソリン代節約 燃費改善エコマニア


となりまちショッピングモール Store-mix.com


■DIYの工具のことなら
電動工具市場



キーワードアドバイス
ツールプラス

Powered by SEO対策


URL

サイトタイトル

ディレクトリ登録
by ホームページ登録



アクセス解析