スタイルシートを始めて触りました。
一応職業的にプログラムを書いているのですが
デジタルテレビ用のプログラムをＣで書いている
だけなので、それ以外の言語には疎いのです。
Perl、BASIC、PLOLOG、Parl、Ruby、C++
とかとかを必要に応じて齧ってるくらいで
よく知らないんです。いかんですよ。
特にＷｅｂ系っていうの？Ｊａｖａスクリプトとか
ＣＳＳとか「何だべな？」ってカンジでした。
さすがにＨＴＭＬ程度は書いたことがありますが
デザインのためではなく、TeXの代わりにならんかな？
と思って使っただけなので無知も同然…
そんなワタクシもＣＳＳがイジレルトなれば
やっぱりイジルしかありませんよ。
なんつったって、一応オトコノコですからね
穴があったら入れるのは当然ですからね。
ほんでもって、イチオウ技術者ですからね
イジレル部分はイジってみるのは当然ですからね。
ってワケでとりあえず、赤×クリームをＣＳＳで表現してみよう
と思ったのですが、簡単じゃないのね。
色見は元のＣＳＳ見れば書いてあるので真似すればいいんだけど
様々な問題にぶつかりましたよ。
悩んだポイントと解決方法はこんなカンジでした。
・カスタムフリーには存在しないフィールドがある
とりあえず、一個ずつ色を変えたりしてどこに影響するのか確認。
ほんで、変わったところに対応するフィールドに書き換え
.headerRule 、.menu 、.menuBar 、.login 、
.lgFrame 、.recLink 、.helpLink 、.etRule
略っちによると .etRule はコメントの区切り線用だそうで
・タイトルが上手く表現できない
カスタムブルー＆メタルでしか使えないセレクタを
触っていた。そりゃ無理だわな。
.headerLight と .rule と .headerDark ね
#header のみで作り上げて解決
・カレンダーの横棒が出ない
設計図があるのに出来ない自分は馬鹿かと思いましたが
いまだに何で出なかったのか不明
・文字のサイズが合わない
font-size:120%; ってカンジで％で表現しようと奮闘しましたが
全然あいません。ぬぐぁ！というカンジで諦め気味でしたが
そこで救世主が登場です！はいそうです。略っちです。
ブログはじめますた「カスタムフリーの隠し？クラス」
で、「赤×クリーム」の２段組のＣＳＳを公開してくれましたよ！
あんたは神か！とか思いましたよ。
font-size:26px; とか書かれていますよ。そっかー。
サスガっつーか、こういう勘所がカッコイイんだよよね。
・font-size の％の謎
え～とですね、至るところに font-size:80%; って書いてあるので
まとめようと思って BODY に font-size:80%; って書きましたが
これと各クラスの％は掛け算になっちゃうんですね。
すっかりスコープは内側優先だと思い込んでたので、
80% は 80% だろうと思ってました。嗚呼勘違い
最初はフォントが妙に小さいな～とか思ってましたが…
っつーワケで、 BODY 、TD に font-size:80%; って書いて
他の部分は消しちゃいました。
その代わり本来 100% の部分は 125%、110% は 138% に
する必要がありますけどね。これで随分コード量が減りました。
・メニューを一列にしたい
南無さんちのメニューが一列になってるんで、なんだべ？と思ったら
Float 外して絶対指定してる模様ですよ。
そっか～、と思ってやってみたら割と簡単に出来たんですけど、
なんつーか、カレンダーを上にしたいのにならないんですよ。
右に置こうとしたのも敗因かもしれませんが。
で、gooのタイトルくらいは入れようかと思って
height:100;、overflow: hidden; でタイトルのみ残して
下はカレンダーで潰したりしてみたんですが…むむむ…
ほんで結局、綺麗にまとまってる略っちのＣＳＳを
使わせてもらったんですが、Operaでは崩れるとか…
で、これまた略っちに紹介してもらった
psychic.goo:1008さんトコの「手っ取り早く2段化する方法」で
開眼しました。display: none; ってイウのがあるんだ…
っつーワケで消させていただきました。
これで Opera でも崩れないのかな？
詳細は psychic.goo:1008 さんちを見てくださいね。
・メニューを右に置きたい
上の項でも書きましたが、なんだかカレンダーを右に
置いてみたかったんですよ。
right:0;で指定すると右には引っ付くんですけど
ウィンドウ縮めると本文に食い込んじゃうんですよね…
width を指定すると上のタイトルが切れちゃうし…
ん～。ウィンドウサイズは人それぞれだしなぁ…
ってカンジで、こんなカンジになりました。
あ、ちなみにＣＳＳは速度重視で不要な部分を
全部消してあるのであんまり参考にならないですね。
っつーワケでＣＳＳ全部書き出しときます。
ちなみに下の記述で 8KB なのですが、
登録してあるＣＳＳは 3KB 程度になってます。
ここを削っても、あんまり意味無いのかな？
ま、いっか。
そんなカンジで。
判んない事は略っちに聞いてねっ。ぷふ～
あ、ちなみに本職のプログラムはコメントタップリでお送りしてますよ
コンパイラはコメント量を気にしなくていいのが良いです。
はじめま略っちの「カスタムフリーの隠し？クラス」
南無さんちの「はてなアンテナが」
psychic.goo:1008さんトコの「手っ取り早く2段化する方法」
にトラックバックでっす。
一応職業的にプログラムを書いているのですが
デジタルテレビ用のプログラムをＣで書いている
だけなので、それ以外の言語には疎いのです。
Perl、BASIC、PLOLOG、Parl、Ruby、C++
とかとかを必要に応じて齧ってるくらいで
よく知らないんです。いかんですよ。
特にＷｅｂ系っていうの？Ｊａｖａスクリプトとか
ＣＳＳとか「何だべな？」ってカンジでした。
さすがにＨＴＭＬ程度は書いたことがありますが
デザインのためではなく、TeXの代わりにならんかな？
と思って使っただけなので無知も同然…
そんなワタクシもＣＳＳがイジレルトなれば
やっぱりイジルしかありませんよ。
なんつったって、一応オトコノコですからね
穴があったら入れるのは当然ですからね。
ほんでもって、イチオウ技術者ですからね
イジレル部分はイジってみるのは当然ですからね。
ってワケでとりあえず、赤×クリームをＣＳＳで表現してみよう
と思ったのですが、簡単じゃないのね。
色見は元のＣＳＳ見れば書いてあるので真似すればいいんだけど
様々な問題にぶつかりましたよ。
悩んだポイントと解決方法はこんなカンジでした。
・カスタムフリーには存在しないフィールドがある
とりあえず、一個ずつ色を変えたりしてどこに影響するのか確認。
ほんで、変わったところに対応するフィールドに書き換え
.headerRule 、.menu 、.menuBar 、.login 、
.lgFrame 、.recLink 、.helpLink 、.etRule
略っちによると .etRule はコメントの区切り線用だそうで
・タイトルが上手く表現できない
カスタムブルー＆メタルでしか使えないセレクタを
触っていた。そりゃ無理だわな。
.headerLight と .rule と .headerDark ね
#header のみで作り上げて解決
・カレンダーの横棒が出ない
設計図があるのに出来ない自分は馬鹿かと思いましたが
いまだに何で出なかったのか不明
・文字のサイズが合わない
font-size:120%; ってカンジで％で表現しようと奮闘しましたが
全然あいません。ぬぐぁ！というカンジで諦め気味でしたが
そこで救世主が登場です！はいそうです。略っちです。
ブログはじめますた「カスタムフリーの隠し？クラス」
で、「赤×クリーム」の２段組のＣＳＳを公開してくれましたよ！
あんたは神か！とか思いましたよ。
font-size:26px; とか書かれていますよ。そっかー。
サスガっつーか、こういう勘所がカッコイイんだよよね。
・font-size の％の謎
え～とですね、至るところに font-size:80%; って書いてあるので
まとめようと思って BODY に font-size:80%; って書きましたが
これと各クラスの％は掛け算になっちゃうんですね。
すっかりスコープは内側優先だと思い込んでたので、
80% は 80% だろうと思ってました。嗚呼勘違い
最初はフォントが妙に小さいな～とか思ってましたが…
っつーワケで、 BODY 、TD に font-size:80%; って書いて
他の部分は消しちゃいました。
その代わり本来 100% の部分は 125%、110% は 138% に
する必要がありますけどね。これで随分コード量が減りました。
・メニューを一列にしたい
南無さんちのメニューが一列になってるんで、なんだべ？と思ったら
Float 外して絶対指定してる模様ですよ。
そっか～、と思ってやってみたら割と簡単に出来たんですけど、
なんつーか、カレンダーを上にしたいのにならないんですよ。
右に置こうとしたのも敗因かもしれませんが。
で、gooのタイトルくらいは入れようかと思って
height:100;、overflow: hidden; でタイトルのみ残して
下はカレンダーで潰したりしてみたんですが…むむむ…
ほんで結局、綺麗にまとまってる略っちのＣＳＳを
使わせてもらったんですが、Operaでは崩れるとか…
で、これまた略っちに紹介してもらった
psychic.goo:1008さんトコの「手っ取り早く2段化する方法」で
開眼しました。display: none; ってイウのがあるんだ…
っつーワケで消させていただきました。
これで Opera でも崩れないのかな？
詳細は psychic.goo:1008 さんちを見てくださいね。
・メニューを右に置きたい
上の項でも書きましたが、なんだかカレンダーを右に
置いてみたかったんですよ。
right:0;で指定すると右には引っ付くんですけど
ウィンドウ縮めると本文に食い込んじゃうんですよね…
width を指定すると上のタイトルが切れちゃうし…
ん～。ウィンドウサイズは人それぞれだしなぁ…
ってカンジで、こんなカンジになりました。
あ、ちなみにＣＳＳは速度重視で不要な部分を
全部消してあるのであんまり参考にならないですね。
っつーワケでＣＳＳ全部書き出しときます。
ちなみに下の記述で 8KB なのですが、
登録してあるＣＳＳは 3KB 程度になってます。
ここを削っても、あんまり意味無いのかな？
ま、いっか。
/* にゅきログのスタイルシート(略っち作にゅきみ改) */
/* 赤×クリーム配色 */
/* タイトル赤 #E9090F */
/* 境界橙色 #FFB362 */
/* 白色部分 #FFFBEB */
/* 文字色 #FFFFFF */
/* バック #FFF6C1 */
/* ページ全体の背景と余白と各メニューリスト以外の文字 */
BODY {
font-size:80%;
color: #E9090F;
background-color: #FFF6C1;
}
/* 各メニューのリストの文字 */
TD{
font-size:80%;
}
/* ブログタイトル、ブログ概要、記事タイトルの文字飾りの指定 */
h1{
font-size:125%;
line-height:100%;
font-weight:normal;
height:20px;
}
h2, h3 {
font-size:125%;
line-height:100%;
font-weight:normal;
}
/* 全体のリンク飾り */
A {
text-decoration: underline;
}
/* リンク（まだ見ていない状態） */
A:link {
color: #0F92D9;
}
/* リンク（マウスポインタを乗せた状態） */
A:hover {
color: #47C6F2;
}
/* リンク（クリックされた状態） */
A:active {
color: #47C6F2;
}
/* リンク（すでに見た状態） */
A:visited {
color: #47C6F2;
}
/* ページの指定 */
#content {
text-align: left;
margin:0px;
padding:0px;
width:100%;
}
/* ヘッダーの指定 */
#header {
height:90px;
width:100%;
background-color: #E9090F;
border-bottom:2px solid #FFB362;
padding:1px;
margin:0px;
background-image: url
(http://blogimg.goo.ne.jp/user_image/70/4e/3fd3e741e5957b1efe2cfc7a1387eacc.png);
background-position: right center;
background-repeat: no-repeat;
}
/* 記事部分の指定 */
#center {
position: absolute;
left: 200px;
top: 90px;
margin:0px;
padding-right:20px;
}
/* 左メニューの指定 */
#menu {
padding-top:10px;
margin:0px;
width: 180px;
background-color: #FFFBEB;
}
/* 右メニューの指定 */
#menu2 {
display: none;
}
/* 左右のメニュースペースの余白 */
.sidebar {}
.cont_center{
width: 160px;
}
/* ブログのタイトル */
.bTitle {
position: absolute;
top:15px;
left:20px;
color: #ffffff;
font-size: 26px;
line-height:30px;
}
/* ブログタイトルのリンク（で使用） */
.bTitleLink{
text-decoration: none;
}
/* ブログの概要 */
.bDesc {
position: relative;
top:5px;
left:20px;
color: #ffffff;
font-size: 13px;
line-height:16px;
}
/* カレンダー背景 */
.calendar {
width:160px;
}
/* カレンダー年月 */
.calMonth {
font-weight:bold;
}
/* カレンダー曜日 */
.calWeek {
color: #022F81;
font-weight: bold;
}
/* カレンダー日付のリンク */
.calDayLinked {
text-decoration: underline;
font-weight: bold;
}
/* カレンダー内の区切り */
.calRule {
background-color:#E9090F;
}
/* 左メニューの各見出し */
.menuBar {
font-weight:bold;
padding:3px;
margin-left:6px;
margin-right:6px;
text-align:center;
border-bottom:2px solid #E9090F;
}
/* 左メニューの背景 */
.menuBg {
margin-left:8px;
margin-right:8px;
}
/* 右メニューの背景 */
.menuBg2 {
margin-left:8px;
margin-right:8px;
}
/* 右メニューの各見出し */
.lgBar {
font-weight:bold;
padding:3px;
margin-left:6px;
margin-right:6px;
text-align:center;
border-bottom:2px solid #E9090F;
}
/* エントリータイトル枠飾り */
.entryTitle {
position:relative;
top:-52px;
border-top:2px solid #E9090F;
padding-top:50px;
}
/* 過去の投稿（ENTRY ARCHIVE）のリスト */
.arcLink {
font-weight: bold;
}
/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
}
/* 最新のコメント（RECENT COMMENT）のリスト */
.comLink {
}
/* 最新のコメント（RECENT COMMENT）のリスト：投稿者名 */
.comText {
}
/* 最新のトラックバック（RECENT TRACKBACK）のリスト */
.traLink {
}
/* 最新のトラックバック（RECENT TRACKBACK）リスト：ブログ名 */
.traText {
}
/* カテゴリー（cotegory）のリスト */
.catLink {
font-weight: bold;
}
/* ブックマーク（book mark）のリンク：サイト名 */
.bmLink {
font-weight: bold;
}
/* ブックマーク（book mark）リスト：説明 */
.bmText {
}
/* プロフィールの見出し */
.pfTitle {
color: #022F81;
font-weight: bold;
}
/* プロフィールの内容 */
.pfText {
}
/* プロフィール、search下の区切り */
.rule {
background-color:#E9090F;
}
/* 「URLを送信する」 */
.miscLink {
}
/* 「（for PC & MOBILE）」 */
.miscText {
}
/* 「ブログの作成・編集」 */
.adminLink {
}
/* テーマサロンのリストの「・」「携帯からもアクセス」「QRコード（）」 */
.gooText {
}
/* ログアウト時、ログインフォームの文字 */
.lgText {
}
/* ログアウト時、ログインフォーム下の区切り線 */
.lgRule {
background-color:#E9090F;
}
/* エントリーの背景 */
.entry {
}
/* エントリータイトル */
.etTitle {
color: #E9090F;
font-size: 138%;
font-weight: bold;
}
/* エントリータイトルの飾り（で使用） */
.etTitleLink {
text-decoration: none;
}
/* エントリー本文 */
.etBody {
position:relative;
top:-30px;
line-height: 160%;
}
/* エントリーに表示されているカテゴリ */
.etCategory {
}
/* エントリーに表示されている日時 */
.etTime {
}
/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
}
/* エントリーに表示されている「トラックバック（）」 */
.etTBLink {
}
/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
}
/* 前のページ、次のページ */
.etNextPrev {
border-top:2px solid #E9090F;
padding-top:10px;
}
.etRule {
background-color: #E9090F;
}
/* エントリー内の画像位置 */
.thumbnail {
}
/* --エントリー枠固定用（変更不可）-- */
.Posi{
text-align: left;
width: 100%;
}
/* コメントの背景（別ウィンドウ、エントリー下ともに） */
.comment {
}
/* エントリー下の「コメント」 */
.cmHeadText {
}
/* エントリー下の「コメント」の囲み */
.cmHeadFrame {
}
/* エントリー下「コメントを投稿する」、別ウィンドウ「コメント」「コメントを投稿する」 */
.cmText {
}
/* コメントタイトル（エントリー下、別ウィンドウともに） */
.cmTitle {
font-weight:bold;
}
/* コメント投稿者名（エントリー下、別ウィンドウともに） */
.cmName {
}
/* コメント投稿日時（エントリー下、別ウィンドウともに） */
.cmDate {
}
/* コメント見出しの各タイトル（エントリー下、別ウィンドウともに）と規約導入の文字 */
.cmForm {
color: #022F81;
}
/* コメント本文（エントリー下、別ウィンドウともに） */
.cmBody {
}
/* トラックバックの背景（エントリー下、別ウィンドウともに） */
.trackback {
}
/* エントリー下の「この記事のTrackback Ping-URL」 */
.tbHeadText {
color: #022F81;
font-weight:bold;
}
/* エントリー下の「この記事のTrackback Ping-URL」の囲み */
.tbHeadFrame {
}
/* 別ウィンドウの「この記事のTrackback Ping-URL」 */
.tbtrackback {
color: #022F81;
font-weight:bold;
}
/* トラックバックURL（エントリー下、別ウィンドウともに） */
.tbUrl {
}
/* トラックバックされた方のサイト名（エントリー下、別ウィンドウともに） */
.tbBTitle {
}
/* トラックバックされた記事名（エントリー下、別ウィンドウともに） */
.tbETitle {
font-weight:bold;
}
/* トラックバック本文（エントリー下、別ウィンドウともに） */
.tbDesc {
}
|
そんなカンジで。
判んない事は略っちに聞いてねっ。ぷふ～
あ、ちなみに本職のプログラムはコメントタップリでお送りしてますよ
コンパイラはコメント量を気にしなくていいのが良いです。
はじめま略っちの「カスタムフリーの隠し？クラス」
南無さんちの「はてなアンテナが」
psychic.goo:1008さんトコの「手っ取り早く2段化する方法」
にトラックバックでっす。
