http://customshichao.shiga-saku.net テンプレートを自分好みにアレンジしてみよう！　今よりもっとブログが好きになるかもよ♪ ja Sat, 12 May 2007 21:56:06 +0900 Thu, 13 Dec 2007 00:17:54 +0900 http://blogs.law.harvard.edu/tech/rss CLOG 今回は、文字の色や飾り、フォント指定を紹介したいと思います。まずはそれぞれの書き方から説明します。colorcolor : #000000 ;「color」はそのままの意味で、色の指定です。他の文字設定とは違い、文字の始まりに「font-」は付きませんからご注意下さいね。text-decorationtext-decoration : underline ;「text-decoration」は文字に飾り付けをするという意味です。値には「underline （下線）」、「overline (上線)」、「line-through (取消線）」、「blink （点滅）」、「none （飾らない）」があります。ですが、ブラウザにより対応しないものもあるかもしれません。ちなみにWindows Internet Explorerでは「blink」は反映されないと思います。font-familyfont-family : "ＭＳ Ｐゴシック","Arial",serif ;「font-family」はフォントを指定するという意味です。指定には「ＭＳ Ｐゴシック」のような指定フォントと「serif」のような総称フォント、つまり〇〇系のフォント指定の2種類があります。一部ではありますが、下の一覧を参考にしてくださいね。総称フォントserif明朝系のフォントsans-serifゴシック系のフォントcursive筆記体系のフォントfantasy飾り文monospace等幅フォント各フォントArialCourier NewLucida ConsoleLucida Sans UnicodeTimes New RomanVerdanaArial BlackComic Sans MSImpactGeorgiaFranklin Gothic MediumPalatino LinotypeTahomaTrebuchet MSSylfaeＭＳ ゴシックＭＳ ＰゴシックＭＳ 明朝ＭＳ Ｐ明朝HG祥南行書体HG正楷書体HG教科書体HG丸ｺﾞｼｯｸM-PROHG創英角ｺﾞｼｯｸUBHG創英角ﾎﾟｯﾌﾟ体HG創英ﾌﾟﾚｾﾞﾝｽEBRFG2サンセリフ-Uではフォント説明の続きを・・・フォント名を書く時に注意しなければいけないのは、文字の全角、半角、大文字、小文字を正確に入力しないと適応されません。また、自作フォントや独自に追加されたフォントなどは、見てくださる方のPCでは反映されませんので、ノーマルなフォント指定が必要となります。OSによっても同じことが言えます。例えばMacの場合、「Osaka」や「平成明朝」などが一般的ですから、Macで見ていてくださる方のために、これらも追加してあげるといいかもしれません。次に指定フォントの入力をする場合、フォント名を「" (ダブルクォーテーション）」や「' （シングルクォーテーション）」で囲む必要があります。また、複数のフォントを指定する場合は「, (カンマ）」で区切っていきます。この時、先に指定するフォントほど優勢順位が高くなります。以上、ここまでがフォントの説明となります。前回のあれこれと組み合わせて使用してみてください。一応ここまでの設定を書いておきます。color : #000000 ;text-decoration : underline ;font-family : "ＭＳ Ｐゴシック","Arial",serif ;っが、まだ終われません。今回のテーマは、ブログのタイトル文字に対しての紹介なので、これらをそのまま「.blogtitle」のクラスで設定しても反映されません。それは、ブログのタイトルにはリンク設定がされているからです。なので、今回はリンクの説明もしたいと思います。リンクリンクの設定には、必ず「a」の文字が入っています。スタイルシートを御覧になればお解かりになられると思いますが、「a」には「a:link (未訪問）」、「a:visited (訪問済み）」、「a:active (クリック時）」、「a:hover （マウスカーソルが乗っている時）」の各設定がされています。ですから普通の文字よりも、リンクの方が優先されるのです。前回のあれこれと紹介を分けたのには、今回紹介した属性は、リンク設定の方で設定しないと適応されないからです。では「.blogtitle」ではなく、どこに設定するかと言うと「#banner a」や、各「a」に対して行います。では一通り設定を書いてみます。設定/*タイトルリンク*/#banner a{color:#0000cd;text-decoration:none;font-family:"HGS創英角ﾎﾟｯﾌﾟ体";}#banner a:link{color:#0000cd;text-decoration:none;}#banner a:visited{color:#0000cd;text-decoration:none;}#banner a:active{color:#0000cd;text-decoration:none;}#banner a:hover{color:#ffffff;text-decoration:none;background:#0000cd;}初めの「#banner a」は各「a」全体に反映されるため、「font-family」はここに書きました。それぞれ色や飾りを変更したい場合は、各「a」ごとに行ってください。前回紹介した属性も加えて、いろいろ属性を試しながら設定すると、いろんなアレンジができると思いますよ。まとめいや～今回はめっちゃ長かったですね説明もこれだけでは不十分かもしれませんし、勘違いな部分があるかもしれませんが、一応これでブログのタイトルをアレンジできると思います。その他にも記事のタイトルだったり、コメント欄だったりと、いろんなところでも使えますので自分なりに工夫されてみてはいかがでしょうか。次回はサイドバーの構造を紹介したいと思います。ただ、完全に把握してるわけではないので、参考までに・・・。それでは今回はホントにお疲れ様でした http://customshichao.shiga-saku.net/e43085.html http://customshichao.shiga-saku.net/e43085.html バナー Sun, 22 Jul 2007 02:17:00 +0900 今回はブログのタイトル文字を大きくしたり、太さを変えたり、斜めにしたりしてみたいと思います。イジるクラスは「.blogtitle」になります。では使用できる属性を紹介していきたいと思いますfont-sizefont-size : 20px ;「font-size」は文字の大きさを設定するということです。値は数値でも構いませんし、キーワードでも構いません。キーワードには｢xx-small｣、「x-small」、「small」、「medium」、「large」、「x-large」、「xx-large」があり、小～大となっています。他にも「smaller」と「larger」があり、これらは親要素に対して最小か最大ということになります。font-weightfont-weight : bold ;「font-weight」は文字の太さを設定するということです。値には「bold (太い）」、「bolder (より太い)」、「lighter （細い）」、「normal (標準）」または100～900の数値を100刻みで変更していくこともできます。数値の場合は400が標準となります。font-stylefont-style : italic ;「font-style」は文字を斜体にするということです。値は「italic (斜体1）」、「oblique (斜体2）」、「normal (通常）」があります。「italic」とは、設定してあるフォントのイタリック体にするということで、「oblique」とは、ノーマルのフォントを斜体にするということです。ここまで紹介した3つは、みなさんが記事を書かれるときに使用されていると思いますので、分かりやすいと思います。letter-spacingletter-spacing : 10px ;「letter-spacing」は文字の間幅を設定するということです。文字の間幅が狭かったり広かったりと気になる場合は数値を変更してくださいね。text-aligntext-align : left ;「text-align」は文字の位置を指定するということです。値は「left (左)」、「center (中央）」、「right (右）」、「justify （両端揃え）」があります。今回は「#banner」範囲内での位置指定ということになりますね。padding「padding」の詳細は以前に書いたので省略しますが、「text-align」で大体の位置を決めたら「padding」で微妙な位置を設定しましょう。設定.blogtitle{font-size : 40px ;font-weight : bold ;font-style : italic ;letter-spacing : 2px ;text-align : left ;padding: 25px 0px 0px 20px ;filter:shadow(color=#ff99cc, direction=135);height:45px;}上の例が僕が設定しておくものです。もう書き方も随分慣れられたことでしょうし、分かりますよね。下部の「filter」はブラウザによって反映されないので、今回はあえて説明はいたしませんでした。気になる方は、1度上のをコピー＆貼り付けして確認してくださいね。まとめ今回はたくさんの属性&値が出てきましたが、わりと普段から目にするようなものが多かったんじゃないでしょうか。文字設定には他にも色や形の変更もありますが、それはまた次回ということにしたいと思います。それではお疲れ様でした http://customshichao.shiga-saku.net/e42861.html http://customshichao.shiga-saku.net/e42861.html バナー Fri, 20 Jul 2007 18:35:42 +0900 お待たせしました。今回は大注目（勝手に）のバナーの背景の設定です。うるさい能書はやめて、早速紹介していきます。ではまず、今回説明で使用する画像はこちらです。まぁ僕が作ったCGなんですけど、お気に入りの写真とか使ってもいいと思います。設定まず、スタイルシート内から「#banner,#subbanner」ってところを探してください。そこには大体、#banner,#subbanner{background:#ffffff url("http://shiga-saku.net/usr/customshichao/banner-test.jpg");background-position:left top;background-repeat:no-repeat;width:800px;height:250px;}このようなかんじで書かれていると思います。「background」と「width」の説明は以前に紹介したので今回は省きます。っで、今回はまた新たに「height」という属性が出てきましたね。「height」とは、縦幅のせっていのことです。「width」が横なら「height」は縦と覚えてください。書き方は一緒でheight :250px ;となります。今回のポイントは、これらの「width」と「height」です。どんなにお気に入りの写真を使おうと思っても、サイズが合わなければ話になりませんよね。ですから画像のサイズとバナーのサイズを合わせてください。簡単な方法は、まずスタイルシートで「width」と「height」の値を確認して、次に画像編集ソフトで画像のサイズを加工します。このとき、横幅は今のままがいいと思いますが、縦幅は少しくらいなら大きくしたり小さくしたりしてもいいと思います。上の画像サイズは、横800px、縦250pxに加工してありますから、スタイルシートの方でもwidth : 800px ;height :250px ;とします。※画像編集ソフトはフリーのものから市販のものまでありますからみなさんの使い慣れたものを使用してくださいね。まとめどうですかたったこれだけのことでブログの雰囲気がガラリと変わったと思いませんか季節に応じて変更していくのもいいかもしれませんね次回はブログのタイトルの文字のあれこれをやってみたいと思います。それではお疲れ様でした http://customshichao.shiga-saku.net/e42689.html http://customshichao.shiga-saku.net/e42689.html バナー Thu, 19 Jul 2007 21:58:00 +0900 今回からはブログの顔と言ってもいいかもしれない「#banner」の設定を紹介していきたいと思います。「#banner」とはブログのタイトルや説明文が表示されるエリアのことです。まず下の図を御覧下さい。「#banner」には画像を使って表示されることが多いです。その画像を見て、ブログの内容が分かるといってもいいかもしれません。（言い過ぎか・・・）「.blogtitle」はみなさんがお決めになったブログのタイトルが表示されます。「.description」にはブログの説明文が表示されます。まとめこれさえ分かればあとはデザインするのみですね。今回はこれだけです。（たまには短くないと）次回からバナーの本番です。はじめはバナーの背景画像の設定を紹介したいと思います。これを知りたいと思う人が1番多いのではないでしょうか。それではお楽しみに http://customshichao.shiga-saku.net/e42673.html http://customshichao.shiga-saku.net/e42673.html バナー Thu, 19 Jul 2007 19:21:00 +0900