スポンサーサイト

一定期間更新がないため広告を表示しています

cetegory : - ✤ - ✤ - ✤ -
2023年05月22日(月)  by スポンサードリンク [ Edit ]

何度目かの正直

やつと・・・
やつとIEでもFirefoxでもGoogle Chromeでも
割と無難に対応できるテンプレートを作ることが出来た・・・ハズツ!

主にIEのお蔭で
前に一瞬公開してみたものもボツにしてたしで。

でもいいお勉強になつたわ。

いい加減モノクロばかりで作つてると寂しくなるから
自分が一番好きらしい深紅で作つてみたわ。

案外
フォームの部品とか
日付表記とか
category (〜)にするか
category:〜にするか
とか些細なことで悩む私だわ。

何かドツと疲れるわ・・・。

WordPressも放置気味だわ。

JUGEMのテンプレートに慣れるのに
一ヶ月程要した気がするわ。

FC2でもやりたかつたけど
何かJUGEMだけで疲れたから予定は未定ね。

謎だつた
<br class="clear" />
の必要性も納得できた気がするわ。

最初、気に入らなくて取つぱらつてみたら
主にIEで支障が出たわ。

clearfixとかでもいいやうな気がするけど
こつちの方が単純でいいのかもしれないわ。

素材は結局自作とか国内のでは
足りなくて某所で購入したわ。

UTFでも
本当はデザインそのものよりも
使用画像の雰囲気がモノを言つてゐる
・・・やうな気がするものが
多いやうな気がしたので〜。

UTFでろくにカスタマイズ出来てないものを公開してるユーザーがゐたけど
アレは自分のサイトの宣伝に利用してんぢやないかしら・・・。
クソくだらないわ〜。
と思つてしまつたわ〜。

もう何種類か作つたら
まとめて公開しちやはうかな〜。

AptanaはGoogle Chrome(Webkit)
UnEditorはIE(Trident)のブラウザ・チェックが出来るので
両方使ふやうになつたわ。

ウェブブラウザ Lunascape - 軽快で革新的な無料Webブラウザ

はGeckoも加へたトリプル・エンジンの切り替へが
便利といへば便利なんだけど
Firefoxが何となく中途半端だから使つてないわ。

ついでにおさらひしたわ。
結局、使はなかつたけど。

日記の書き方〜日付・曜日・天気

英語の日付 [日常英会話] All About

JUGEMテーマ:テンプレート
cetegory : テンプレート ✤ comments(0) ✤ trackbacks(0) ✤ -
2012年06月15日(金) 14:47 by Emmanuel [ Edit ]

IE9にて

色々と作つてみても
IEのお蔭で面倒になるもの多し。

挙げたらキリがないけど、私的な注意事項としては

・私の環境では、Firefox、Google Chromeよりも全体的に色がやや鮮やかに見える。

・リセットCSSでh1のmarginとpaddingを0に指定すると、
ブログのタイトルのh1には、
paddingをある程度つけるか、
line-heightを指定してやらないと、
文字の上半分が途切れる。

・同様に、記事内でフォント・サイズを大きくすると、
最初の1行目の上半分が途切れて表示されることがあるので、
記事内のタグでline-heightを直接指定するか、
CSSにてbodyのline-heightを実数値(1.5emなど)で指定してやる必要がある。
※但し、元のfont-sizeにもよるかも(font-size: small時の場合は、normalでは効果なしだつたので)。

レイアウトの話も大量にあるなあ。

・リセットの段階でdivのmarginとpaddingを0にした場合、よきにつけあしきにつけ、FirefoxとGoogle Chromeではともかく、IEは結構正直に反映されてしまふので要注意。

・フォームのテキストエリアやテキスト入力欄、ボタンなども文字の位置が上にスレがち。
デフォルトではボタン内の両脇の余白も多めにとられるので「overflow: visible;」と指定してやると、無駄がなくなるが、今度はpaddingでの文字の高さ(幅は失念)の指定が効かなくなる。

等々。
評価:
---
ソニー
¥ 16,000
(2011-08-05)
コメント:姪が欲しがっていたので誕生日プレゼントに贈りました。手が小さいので持ちやすいとのこと。

cetegory : テンプレート ✤ comments(2) ✤ trackbacks(0) ✤ -
2012年06月09日(土) 10:45 by Emmanuel [ Edit ]

テンプレート中毒

既存のテンプレートのカスタマイズにしろ、自作にしろ、やり出すと妙にムキになつてやめられないとまらない状態になつてしまふわ(泣)。

まあ、私にとつては現実逃避の為の一種の依存でもあるわけなんだらうけど。

でも、UTFに公開しても、キャプチャ画像がヒドイのが悲しかつたわ(シツコイ)。

結局、まだ手直ししたいところがあつて、一旦引つ込めわ。

しかも、夢中に(ムキに)なつて作るんで、途中から朦朧とし出してたりして、単純な綴り間違ひなんかのケアレス・ミスも多かつたりしたわ(泣)。

HTMLもだけど、特にCSSなんて、たつた一個の「.」「;」とか「}」の閉じ忘れとか/*〜*/の「*」とか「/」とかの記入漏れとか、ごく些細なのミスで全体がパアになつたりするのよね・・・神経を使ひ過ぎて疲れるわ。

文字コードだつけ?とかもややこしいわ。
私のAptanaでも一応使用出来るとは言へ、基本的に「UTF-8」が好きといふか、W3C(のヴァリデータ?名詞失念)が「UTF-8をオススメします」つて、ウルサイのよ。

といふことで、私はモノの名前を覚えるのが苦手なのよ・・・。

とりあへず、JUGEMの公式テンプレートを手直ししたものではなくて、自分で一から作り直した基本のテンプレートをいくつか作成してから、応用に入らうかな、とまだ懲りてゐない私です。

さういや、公式のテンプレートで、

・コメント投稿フォームの中の改行タグともう一箇所の改行タグの閉じ「>」前の「/」が抜けてゐて、
・同じく投稿フォームのテキストエリアのid="description"といふのは、
ブログタイトル部分でも同名のid名なので、

どちらも直した方が吉つて感じだつたわ。

あと、brのclass="clear"つて、あつてもなくてもいいやうなときがタマにある気もしたけど、どうだつたかしら。

でも、私もid、class名に「_」ぢやなくて「-」を使用してたり、適当だわ・・・。

JUGEMテーマ:テンプレート
cetegory : テンプレート ✤ comments(0) ✤ trackbacks(0) ✤ -
2012年06月07日(木) 11:44 by Emmanuel [ Edit ]

QPシリーズ 取扱説明書

CSS3やネガティブ・マージン、透過png使用のせいか

UTFの見本?画像では、

レイアウトなどが崩れて

かなり汚く見える

のが悲しい私です。


ホラ、こんな風に↓

デザイン豊富なユーザー作成ブログテンプレート「utf」 | のえるさんのテンプレート(サムネイルビュー )

QP-YELLOW by のえる | utf

QP-PINK by のえる | utf

プレビューはコチラ↓

黄色:QP-YELLOWのプレビュー

ピンク:QP-PINKのプレビュー

読みやすさよりもデザイン重視で配色が派手目かな〜、エヘッ。
何にしてもキャプチャがこれでは、ド・シンプルか、ある意味仕様がレトロなデザインの方がいいのかもしれませんね・・・(遠い目)。

【♥のえるからの†注意事項†とお願いです♥】

  1. テンプレートの著作権は、利用ユーザーのカスタマイズ後も我(のえる)にあり
  2. 使用画像、テンプレート共にカスタマイズしてもしなくても再配布はしないでね。
  3. テンプレートのフッター内の著作権表示(「Template by のえる」等々)は原則的に削除しないでね。
  4. テンプレート内で使用している画像は、このテンプレート内でのみ利用してね。
  5. テンプレート内の画像(背景画像とMENU内背景画像)をそのまま差し替えずに利用している間は著作権表示(Photograph by 防腐剤)を削除しないでね。
  6. テンプレート内の画像を他の素材屋さんのものに差し替える場合も、画像の著作権表示、リンク、直リン禁止等々、その素材屋さんの規約に従って使用してね
  7. なお、テンプレートのカスタマイズは原則自由だけど、あんまり変な又は過激なカスタマイズをするくらいなら、一から自作したほうが・・・って気がするわね。
  8. サポート、リクエスト(あるのか知らんけど)等については、予定は未定だよ。
  9. 以上、その時々の事情の変化で変更する場合がありますが、悪しからずご了承下さい(><)。

こちらも参考にしてね。
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も未だよいとこどりしかしたことないから網羅できてないし〜。

JUGEMテーマ:テンプレート
cetegory : テンプレート ✤ comments(0) ✤ trackbacks(0) ✤ -
2012年06月05日(火) 12:26 by Emmanuel [ Edit ]

Transparent_No.1(複数背景)の解説など



まだ気になる部分もあり、見切り発車ですが
やってみなくちゃわからないこともあるので
初公開してみようかなと思いました。

でもしてみたら

Transparent_No.1(複数背景) by のえる | utf

・・・なんか画像がイキナリ別物になってました(泣)。

しかも何度かやったけど「非公開」から「公開」にすると
現在、アクセスが集中し閲覧し難い状態となっております。 お手数ですが時間を置いて再度アクセスしてください。

のページが表示されて不安だわ。

(とりあえず律儀なワタクシはよそ様に使用されるかどうかは不明なれども
一応説明文を書いてみたわ。
でも「UTF(共有テンプレート)への公開設定をする」が
登録している全てのテンプレートに該当するなら整理しないとダメなんぢゃ。
と思ったら「UTF(共有テンプレート)への公開設定をする」から先に進んだら
個別設定できるようになっていたわ。
ところで、本人は気が付いてないようだけど
適当にカスタマイズしたというかカスタマイズ途中のものが
公開されちやつてるような気がしたけどアレは一体。)

話がそれましたが、本題に入ります。

User Template File(UTF)をご利用される方へ | JUGEM FAQ よくある質問集
でも説明がなされてはおりますが
基本的にカスタマイズはご自由に。
ただ、著作権部分は外さないで下さい。
使用画像は勿論のこと、テンプレートのカスタマイズ後の再配布もNGですよ。
って感じです。
因みに画像の一部配布元であるステキな素材サイト(「You & I」サマ)が閉鎖されてしまっているようなので、無謀にも規約失念のまま使用させて頂いておりますが(←他人に厳しく自分に甘いワタクシ)、支障があればこの記事で報告の上、撤去させて頂きます
とかいう、注意事項をまとめて箇条書きにすると以下のようになるのかな〜。

【のえるからの注意事項とお願い】

  1. テンプレートの著作権は、利用ユーザーのカスタマイズ後も我(のえる)にあり
  2. 使用画像、テンプレート共にカスタマイズ後の再配布はしないでね。
  3. テンプレートのフッター内の著作権表示(「Template by のえる」等々)は原則的に削除しないでね。
  4. テンプレート内で使用している画像は、このテンプレート内でのみ利用してね。
  5. テンプレート内の画像(ペディキュア画像とMENU内画像)をそのまま差し替えずに利用している間は著作権表示(Photograph by You & I )を削除しないでね。
  6. テンプレート内の画像を他の素材屋さんのものに差し替える場合も、画像の著作権表示、リンク、直リン禁止等々、その素材屋さんの規約に従って使用してね
  7. なお、テンプレートのカスタマイズは原則自由だけど、あんまり変な又は過激なカスタマイズをするくらいなら一から自作すべしって感じかな?
  8. サポート、リクエスト(あるのか知らんけど)等については、予定は未定だよ。

以下、その他の解説など。


■「管理者ページ」へのリンクは上部MENUの「PROFILE」内に入れておきました。

■記事情報部分の「edit」で個別の記事編集画面が開きます。

border-radius(角丸)は
ない方がシャープで
全体のテイストに合っているような気もするけど
どうせIEでは反映されないし
(jsを利用するなどの対処方法はあると思ひますが面倒臭いので放置)
まあいいや、ということで使用してみました。
他にもIEでは反映されていないものが幾つかありますが
今のところ私はFirefoxユーザーなのもあって
面倒臭くなってきたので諦めました。
これからお勉強して改善出来たらするカモしれません。

ついでに、Google Chromeだと
input[type=text]とかが妙にデカくなる
のもとりあえず気にしないで下さい。

■なお、ブラウザ・チェックできたのは
Firefox12.0、Internet Explorer 9、Google Chrome(19.0.1084.52)
の三種類なので、他のブラウザでの表示に不具合がある可能性もあります。

■HTMLのhead内で指定してある
#content部分の背景画像は
他の画像に差し替えたり、好きな画像を増やすことも出来ます。
以下、FC2でゴメンネって感じですが、参考にして下さい(引用感謝)。

背景画像をランダムに変える - FC2ブログのテンプレート工房

タイトル画像をランダムに変える - FC2ブログのテンプレート工房

画像をランダムに変える - FC2ブログのテンプレート工房

■因みに、文法チェックも適当にやっておきました。
JUGEMの独自仕様部分等以外は概ねOKだと思います。

The W3C Markup Validation Service

W3C CSS 検証サービス

正当なCSSです!


JUGEMテーマ:テンプレート
 
cetegory : テンプレート ✤ comments(0) ✤ trackbacks(0) ✤ -
2012年06月03日(日) 08:42 by Emmanuel [ Edit ]