CSS3やネガティブ・マージン、透過png使用のせいか
UTFの見本?画像では、
レイアウトなどが崩れて
かなり汚く見える
のが悲しい私です。
ホラ、こんな風に↓
デザイン豊富なユーザー作成ブログテンプレート「utf」 | のえるさんのテンプレート(サムネイルビュー )QP-YELLOW by のえる | utfQP-PINK by のえる | utfプレビューはコチラ↓
黄色:
QP-YELLOWのプレビューピンク:
QP-PINKのプレビュー読みやすさよりもデザイン重視で配色が派手目かな〜、エヘッ。
何にしてもキャプチャがこれでは、ド・シンプルか、ある意味仕様がレトロなデザインの方がいいのかもしれませんね・・・(遠い目)。
【♥のえるからの†注意事項†とお願いです♥】
- テンプレートの著作権は、利用ユーザーのカスタマイズ後も我(のえる)にあり。
- 使用画像、テンプレート共にカスタマイズしてもしなくても再配布はしないでね。
- テンプレートのフッター内の著作権表示(「Template by のえる」等々)は原則的に削除しないでね。
- テンプレート内で使用している画像は、このテンプレート内でのみ利用してね。
- テンプレート内の画像(背景画像とMENU内背景画像)をそのまま差し替えずに利用している間は著作権表示(Photograph by 防腐剤)を削除しないでね。
- テンプレート内の画像を他の素材屋さんのものに差し替える場合も、画像の著作権表示、リンク、直リン禁止等々、その素材屋さんの規約に従って使用してね。
- なお、テンプレートのカスタマイズは原則自由だけど、あんまり変な又は過激なカスタマイズをするくらいなら、一から自作したほうが・・・って気がするわね。
- サポート、リクエスト(あるのか知らんけど)等については、予定は未定だよ。
- 以上、その時々の事情の変化で変更する場合がありますが、悪しからずご了承下さい(><)。
こちらも参考にしてね。
User Template File(UTF)をご利用される方へ | JUGEM FAQ よくある質問集
UTF公開時に注意すること
- 公式テンプレートや他のユーザーが公開したテンプレートをそのまま公開することは禁止です。(のえる注:よくわからないまま公開してしまっているユーザーもよく見かけるんだけど・・・。)
- UTFは登録する事により他のJUGEMユーザーが公開されたテンプレートを使用する事ができるようになります。
- 画像の二次利用は禁止です。HTML/CSSを参考にするのは基本的に可能とします。しかしながら、UTF公開者がルールを明記している場合はそのルールに従うようにしてください。
- 有名人の画像やキャラクター画像などのご使用はご遠慮ください。
- また、素材配布サイトの画像を利用する際は配布元のルールに違反しないことを確認してから公開を行ってください。
以下、その他の特徴・解説など。■最初にスミマセン。
全体の行間(line-height)が狭かったかもです。
全体のフォント・サイズも見直そうかと公開後に思フ私です。
(いや、誰も見てないとは思ふけど・・・)
■
「管理者ページ」へのリンクは上部MENUの「PROFILE」内に入れておきました。
■記事情報部分の「edit」で
個別の記事編集画面が開きます。
■カテゴリー、アーカイヴ、サイト内検索の結果表示ページでは、
記事本文なし(本文リンク付きのタイトル、記事情報のみ)のリスト風に表示されます。
■
背景色の変更について。背景には透過pngを多用しておりますが、
他の色に変えたい場合は(以下、ベンダープレフィックスがチョット適当かもですが)、
background: #好きな色;
filter: alpha(opacity=80); /* for IE */
-webkit-opacity: 0.8; /* for Google Chrome */
-moz-opacity: 0.8; /* for Firefox(old) */
opacity: 0.8;
と指定したり
rgba(赤, 緑, 青, 透明度)
という書式
↓例:(色は白、透明度は0.5) / [透明度は0が透明〜1が不透明]
background: rgba(255, 255, 255, 0.5)
などで指定すれば
(何れもテキストや画像も透明度に従って半透明にはなりますが)
よいかと思います。
※但し、ブラウザによっては反映されない場合があるかもしれないので注意して下さい。
なので今のところ、やはり透過pngや透過gifの使用が最も手堅いかもしれません。
(自作出来ない場合は、配布しているサイトもたまにあるのでそちらから入手できるかと。)
※また、文字の色などについては、既にご存知の方が殆どかと思うので略します。
■
レイアウトにネガティブ・マージンを使用しているので、
#sideの
margin-left: -100%;
の部分は変更しないで下さい。
■
各部位のサイズの変更について。(余裕があればCSS記述例を掲載するカモ)
ぺージ全体の幅、
サイド(左側)、
メイン(右側の可視部分:記事、関連する記事、コメント、トラックバック、プロフィール・エリア)の幅、
もある程度変えられます。
■
ぺージ全体の横幅「のみ」を変更したい場合は、
ラッパー(#wrapper)の幅(width)のpx数を変更して下さい。
■
メインの幅を広くしたい場合は、
サイド(#side)の横幅(width)のpx数を減らして、
メイン(#main)の左側のマージン(margin-left)のpx数をその分減らして下さい。
(#contentはかまわないでよい。)
■
メニュー一覧の幅を広くしたい場合は、
サイド(#side)の横幅(width)のpx数を増やして、
メイン(#main)の左側のマージン(margin-left)のpx数をその分増やして下さい。
(#contentはかまわないでよい。)
■
サイド(#side)と、メイン(#main)の隙間の横幅の変更は、
メイン(#main)の左側のマージン(margin-left)を変更することで可能です。
広くする場合は#mainのmargin-leftのpx数を増やし、
狭くする場合は#mainのmargin-leftのpx数を減らして下さい。
■
レイアウトの変更(メインとサイドの左・右の位置を逆にする場合)について。CSSにも記述しましたが、再掲しておきます。
/*〜*/
内に記した通りに変更して下さい。
/*=== content(コンテント=メインとサイドの不可視の枠) ===*/
#content {
float: left; /*サイドとメインの左右を入れ替える場合はfloat: right;に変更*/
width: 100%;
text-align: center;
height: auto;
margin: 0 0 20px 0;
}
/*=== main(メイン=右側の枠,記事,コメント,トラックバック,プロフィール各エリア,ページ送り,トップへのリンク含む) ===*/
#main {
margin-left: 240px; /*左側に設置する場合はmargin-right: 240pxに変更*/
padding: 0;
}
/*=== side(サイド=左側の枠,メニュー含む) ===*/
#side {
float: left; /*右側に設置する場合はfloat: rightに変更*/
display: block;
width: 220px;
height: auto;
padding: 0;
margin-left: -100%; /*右側に設置する場合はmargin-right: -100%に変更;*/
}
■微々たる変化とはいえ、やや軽くなる(表示が速くなる)かもしれないので、慣れたらCSSの長ったらしい説明やコメントや無指定の部分などの不要な部分は削除してもかまいません(自分が超初心者だったときのことを思い出して、結構いろいろな注釈をつけちゃったものですから)。
■
border-radius
(角丸)は
IEでは反映されないやうですが
(jsを利用するなどの対処方法はあると思いますがJUGEMでは面倒臭いので放置)
まあいいや、ということで使用してみました。
他にもIE、Google Chromeでは反映されていないものが幾つかありますが
今のところ私はFirefoxユーザーなのもあって
面倒臭くなってきたので諦めました。
これからお勉強して改善出来たらするカモしれません。
■なお、ブラウザ・チェックできたのは
Firefox12.0、Internet Explorer 9、Google Chrome(19.0.1084.52)
の三種類なので、他のブラウザでの表示に不具合がある可能性もあります。
以上、現在の私の知識による限界などあるとは思いますが、こんな感じです。
21012/06/05 12:10〜19:20記。
【RGB値参考リンク集】(リンク先に感謝合掌。)
Web Safe Color一覧表/カラーチャート RGB値・カラーネーム対応表 RGBで色指定 CSS3大接近:第2回 OpacityとRGBa実践テクニック|gihyo.jp … 技術評論社 [CSS] - 残像ブログ 無料RGB値取得ソフト一覧 - フリーソフト100 RGB値 - W3G Webカラー
【呟き】
いやーん、UTFって設定とかメ・ン・ド・イ。
ジャンルとか色とかを設定する度に再読み込みとか〜(泣)。
・・・けど審査とかなくて気楽でいいとも言えるわ。
デモッ、デモッ、初心者が生意気ながら
見本画面のキャプチャ機能がトンデモナイ点とか「公開設定」にすると
「現在、アクセスが集中し閲覧し難い状態となっております。お手数ですが時間を置いて再度アクセスしてください。」画面になるのは
どうにかした方がよろしいのではないかと〜。
ということもあって
メチャクチャ細かい作業の連続で
疲れたわ・・・どっと疲れたわ。
でも色違いヴァージョンもあったらいいなって感じだわ。
(と思ったから、YELLOWに続いてPINKも作ってみたわ。)
しばらく間を置いてから公開した方が
綴り間違いなんかのケアレス・ミスに
気が付いていいんだろうな・・・
とは思うけど面倒臭くなってきたので見切り発車でGOよ。
IEのボタンの横幅が妙に長くなるのは
overflow: visible;(←綴りうろ覚え)で解決するらしいけど
今回は指定不要のようね。
何にしてもreset.cssで色々と指定しても反映されていないものもあるような気がするわ・・・。
Google Chromeだと無指定でも、height:auto;にしても、input[type=text]とかが妙にデカくなったり、IEだと下が開きすぎたりするので色々と細かく指定してみたけれども、もっと簡単な方法があれば改善する予定。
透明化については、テキストと画像だけ強引に何とか出来るような気もしないでもないけど、おいおい考えることにするわ。
opacityのベンダープレフィックスは
JUGEMだと-webkit-も入れてやらないと
Google Chromeで反映されなかつたりしたわ・・・。
手持ちのCSS3の本には
「ベンダープレフィックスなしの指定を最後に書く」と書かれていたけど、
そうするとborder-radiusが(何かウルトラマンメビウスみたいで覚えやすかったわ・・・)
Firefox最新版では反映されなくなってしまうからやめたわ・・・。
他にもっといい正しい順序があるのかもしれないケド。
でもWordPressではどうでもいいということは元々何か仕込んであるからかしら。
IEはよく解説されているような長ったらしいものは不要というか
記述すると却って反映されなくなったわ。
これも記述した順番のせいかしら。
お蔭で透過pngを大量に作成してどっと疲れちゃったわ。
おまけに公開後にfont-sizeを1px大きくしただけで
form部品のレイアウトがあちこちおかしなことになったわ。
何たって、正直どうでもいいと言えば言い割には
かまい出すとここが一番てこずるところなのよ
・・・特にIEでは(もうイヤッ・泣)。
今度基礎から調べ直したいわ・・・。
これでも見て和むわ。
ダウンロード:日立の樹オンライン:日立そんなこんなで私もまだまだ適当ってことね。
XHTMLとHTML5(4.01はまだ何とかだけど)やCSS3も未だよいとこどりしかしたことないから網羅できてないし〜。