 |
|
|
|
| |
とりあえず今日は、「横幅固定の２段テンプレート」を作る前に、
「横幅可変の２段テンプレート（赤×クリーム）」を作ってみることにしました。
こちらでっす。
で、これを実現する為に色々と大変な事がありましたので、とりあえずメモしておきますね。
１：コメントの区切り線用に、サンプルにない隠しクラス「etRule」があります
２：右メニューバーと左メニューバーでは、同じwidth幅を指定しても揃わない場合があります。その場合、右メニューバーにだけ用意されている隠しクラス「cont_center」で、微調整を行なうとよいようです。
ま、そんなこんなでcssを作ってみましたので、興味がある方は、
１：以下のcssを、丸ごとコピー（トリプルクリックで選択できます）
２：カスタムフリーのテンプレートを選択
３：cssの編集のところで貼り付け
って感じでいじってみちゃってくださいねっ♪
/* ページ全体の背景と余白と各メニューリスト以外の文字 */
BODY {
color: #E9090F;
background-color: #FFF6C1;
}
/* 各メニューのリストの文字 */
TD{
}
/* ブログタイトル、ブログ概要、記事タイトルの文字飾りの指定 */
h1{
font-size:100%;
line-height:100%;
font-weight:normal;
height:20px;
}
h2, h3 {
font-size:100%;
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;
}
/* ページの指定 */
/* margin-right: auto;
margin-left: auto;
*/
#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;
}
/* 記事部分の指定 */
#center {
position: absolute;
left: 200px;
top: 90px;
margin:0px;
padding-right:20px;
}
/* 左メニューの指定 */
#menu {
padding-top:10px;
margin:0px;
width: 180px;
background-color: #FFFBEB;
}
/* 右メニューの指定 */
/* overflow: hidden;*/
/* float: left;*/
#menu2 {
padding:1px;
width: 180px;
background-color: #FFFBEB;
}
/* 左右のメニュースペースの余白 */
.sidebar {}
.cont_center{
width: 160px;}
/* ブログのタイトル */
.bTitle {
position: absolute;
top:15px;
left:20px;
color: #ffffff;
font-size: 26px;
line-height:30px;
font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
}
/* ブログタイトルのリンク（で使用） */
.bTitleLink{
text-decoration: none;
}
/* ブログの概要 */
.bDesc {
position: relative;
top:5px;
left:20px;
color: #ffffff;
font-family: VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
font-size: 13px;
line-height:16px;
}
/* カレンダー背景 */
.calendar {
width:160px;
}
/* カレンダー年月 */
.calMonth {
font-size:80%;
font-weight:bold;
}
/* カレンダー曜日 */
.calWeek {
color: #022F81;
font-size:80%;
font-weight: bold;
}
/* カレンダー日付 */
.calDay {
font-size:80%;
}
/* カレンダー日付のリンク */
.calDayLinked {
text-decoration: underline;
font-weight: bold;
}
/* カレンダー前月、翌月 */
.calLink {
font-size:80%;
}
/* カレンダー内の区切り */
.calRule {
background-color:#E9090F;
}
/* 左メニューの各見出し */
.menuBar {
font-size:80%;
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-size:80%;
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-size: 80%;
font-weight: bold;
}
/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
font-size: 80%;
}
/* 最新のコメント（RECENT COMMENT）のリスト */
.comLink {
font-size: 80%;
}
/* 最新のコメント（RECENT COMMENT）のリスト：投稿者名 */
.comText {
font-size: 80%;
}
/* 最新のトラックバック（RECENT TRACKBACK）のリスト */
.traLink {
font-size: 80%;
}
/* 最新のトラックバック（RECENT TRACKBACK）リスト：ブログ名 */
.traText {
font-size: 80%;
}
/* カテゴリー（cotegory）のリスト */
.catLink {
font-size: 80%;
font-weight: bold;
}
/* ブックマーク（book mark）のリンク：サイト名 */
.bmLink {
font-size: 80%;
font-weight: bold;
}
/* ブックマーク（book mark）リスト：説明 */
.bmText {
font-size: 80%;
}
/* プロフィールの見出し */
.pfTitle {
color: #022F81;
font-size:80%;
font-weight: bold;
}
/* プロフィールの内容 */
.pfText {
font-size:80%;
}
/* プロフィール、search下の区切り */
.rule {
background-color:#E9090F;
}
/* 「URLを送信する」 */
.miscLink {
font-size:80%;
}
/* 「（for PC & MOBILE）」 */
.miscText {
font-size:80%;
}
/* 「ブログの作成・編集」 */
.adminLink {
font-size:80%;
}
/* テーマサロンのリストの「・」「携帯からもアクセス」「QRコード（）」 */
.gooText {
font-size:80%;
}
/* ログアウト時、ログインフォームの文字 */
.lgText {
font-size:80%;
}
/* ログアウト時、ログインフォーム下の区切り線 */
.lgRule {
background-color:#E9090F;
}
/* エントリーの背景 */
.entry {
}
/* エントリータイトル */
.etTitle {
color: #E9090F;
font-size: 110%;
font-weight: bold;
}
/* エントリータイトルの飾り（で使用） */
.etTitleLink {
text-decoration: none;
}
/* エントリー本文 */
.etBody {
position:relative;
top:-30px;
font-size: 80%;
line-height: 160%;
font-family: VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
}
/* エントリーに表示されているカテゴリ */
.etCategory {
}
/* エントリーに表示されている日時 */
.etTime {
font-size:80%;
}
/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
font-size:80%;
}
/* エントリーに表示されている「トラックバック（）」 */
.etTBLink {
font-size:80%;
}
/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
font-size:80%;
}
/* 前のページ、次のページ */
.etNextPrev {
font-size:80%;
border-top:2px solid #E9090F;
padding-top:10px;
}
.etRule {
background-color: #E9090F;
}
/* エントリー内の画像位置 */
.thumbnail {
}
/* --エントリー枠固定用（変更不可）-- */
.Posi{
text-align: left;
width: 100%;
}
/* コメントの背景（別ウィンドウ、エントリー下ともに） */
.comment {
}
/* エントリー下の「コメント」 */
.cmHeadText {
font-size:80%;
}
/* エントリー下の「コメント」の囲み */
.cmHeadFrame {
}
/* エントリー下「コメントを投稿する」、別ウィンドウ「コメント」「コメントを投稿する」 */
.cmText {
font-size:80%;
}
/* コメントタイトル（エントリー下、別ウィンドウともに） */
.cmTitle {
font-size:80%;
font-weight:bold;
}
/* コメント投稿者名（エントリー下、別ウィンドウともに） */
.cmName {
font-size:80%;
}
/* コメント投稿日時（エントリー下、別ウィンドウともに） */
.cmDate {
font-size:80%;
}
/* コメント見出しの各タイトル（エントリー下、別ウィンドウともに）と規約導入の文字 */
.cmForm {
color: #022F81;
font-size:80%;
}
/* コメント本文（エントリー下、別ウィンドウともに） */
.cmBody {
font-size:80%;
}
/* トラックバックの背景（エントリー下、別ウィンドウともに） */
.trackback {
}
/* エントリー下の「この記事のTrackback Ping-URL」 */
.tbHeadText {
color: #022F81;
font-size:80%;
font-weight:bold;
}
/* エントリー下の「この記事のTrackback Ping-URL」の囲み */
.tbHeadFrame {
}
/* 別ウィンドウの「この記事のTrackback Ping-URL」 */
.tbtrackback {
color: #022F81;
font-size:80%;
font-weight:bold;
}
/* トラックバックURL（エントリー下、別ウィンドウともに） */
.tbUrl {
font-size:80%;
}
/* トラックバックされた方のサイト名（エントリー下、別ウィンドウともに） */
.tbBTitle {
font-size:80%;
}
/* トラックバックされた記事名（エントリー下、別ウィンドウともに） */
.tbETitle {
font-size:80%;
font-weight:bold;
}
/* トラックバック本文（エントリー下、別ウィンドウともに） */
.tbDesc {
font-size:80%;
} |
|
|
|
| この記事のトラックバック Ping-URL
|
|
・30日以上前の記事に対するトラックバックは受け取らないよう設定されております
※ブログ管理者のみ、編集画面で設定の変更が可能です。
|
|
| 手っ取り早く2段化する方法 (psychic.goo:1008) |
| 昨日の続きと事後報告。
どれも3段レイアウトになっているgooのカスタム・テンプレを2段化する方法は、右サイドバーに配置されているgoo関連リンクボックスの扱い方によって、2通りある。一つは、お行儀よく（笑）表示させたまま左サイドバーに持ってくる方法。これについて |
|
 |
|
|
| いじってみました (にゅきログ) |
| スタイルシートを始めて触りました。
一応職業的にプログラムを書いているのですが
デジタルテレビ用のプログラムをＣで書いている
だけなので、それ以外の言語には疎いのです。
特にＷｅｂ系っていうの？Ｊａｖａスクリプトとか
ＣＳＳとか「何だべな？」ってカンジでした |
|
|
|
|
| ブログ読んでれば、CSS編集も簡単だよ！ (★☆★じゅん吉ブログ!!★☆★) |
| 今日はまたまた、CSS（カスケードスタイルシート）をいじってみました。今回使ったのは、ブログはじめますた：カスタムフリーの隠し？クラスのCSSをお借りして、「横幅固定の２段テンプレート」にチャレンジしてみました。カスタムブルーのテンプレでも、できるようですが、 |
|
|
|
|
| ＣＳＳ編集中 (『見ました！』鋼のＢ級魂) |
| 『俺育て！〜』化計画」実行中。
ブログ人のと仕様が違う部分は、記事の個々のタイトルがリンクになっているため、若干色をいじらないと見づらくなってしまう。
時間があるときにＣｌａｓｓをいじればそのへんは解消するんじゃないかと思われますが・・・。
とりあえず、ぱ |
|
|
|
|
| CSS大幅改変。 ((;´Д`)ﾉｼ 零進法) |
| ブログはじめますた様参考にさせてもらいましたThanks!
文字サイズの調整にものすごく手間取った、左サイドに集めたメニューの文字を強制的にsmallに
公開でもしようかなぁと思ったけど
注釈は適当だし汚いしやめた。どうしてもほしいという方はメールかコメントで。
|
|
|
|
|
| lhqlpaz (lhqlpaz) |
| wwhcznn xvvdvxl qpnscqi yklslap qxcmeej |
|
|
|
|
|
|
|
トップ
ブログ
メール
公式ブログ
最新記事一覧
やっぱり、略さんが、配布してくださってますね。ホント感謝です。
今度休みの日でもじっくりいじってみたいと思ってます。
headerのmarginだったんですね。
どうもありがとうございました。
私はなんとか初期状態の可変長３段組みで頑張ってみます。
。。。すぐ挫折するかもしれませんが。
誰かがサンプルを作って、みんなでそれを使いまわしたほうが早そうですよ。カスタムフリーは。。。
かなり、しんどかったですう。
先日南無さんCSSいじって、いろいろ試していたけれど、自分の思うようにならなくて挫折していました。
ここんところ忙しいから、いつのことになるかわからないけど、そのうちこのソースを改変してみます。
おお！気付きました？？
なんでか分かりませんけど、paddingをつけないと上に余白が出来ちゃうんですよね。
やー、めんどくさいですよ、これは・・・
誰かがカスタムフリーでまず作ってくれたりなんかしちゃうと、そっからが楽なんですよね。
いや、しかしですねえ。
position:relativeは大嫌いなんですよ。
しかもtopにマイナス使っちゃったりして。
でもそれを使わざるをえませんでした・・・
文字のサイズが合わなくて困ってたの〜
あと、メニューの横棒も出なくてね〜
cont_centerとかあるのか〜
ありがとー。弄らせてもらいまっす！
はじめま略さんは本当にすごい。
心から思います。
完璧にマスターしてるし・・・しかもこの短期間で。
カスタムフリーはちょっときついなーって思ってたんですが・・・
ほんと助かります。
gooブログでははじめま略さんは本当に大切な人だなーと思いました。
これからもよろしくお願いします。
おもしろいなぁ
これっす。。。
今日はもうダメー。
頭が働きません。
とにかく、とにかくこの枠組みはしんどいっすよぅ
ありがとうございます。
カスタムブルーの２段型のCSSでやってみようと思いましたが、やっぱりカスタムフリーでやってみました。いや、いろいろまだいじりたいところはありますが、ホント助かりますた。
それから、にゃんこテンプレートのCSSもちょっと見てなるほどって思って利用してみました。
＞じゅん吉さん
こんなのでよろしければ、どうぞお使いください、です〜。
でもこれ、「かなり無理して」作ってる感が強いですよ。。。