あのあのあの…。
当サイトの改装デザインが何故か共有テンプレートページに公開されてるｗｗ
テンプレートというまんまの名前で公開されていますが、こちらからソースをまるまる持って枯れました…。
ページを鍵掛けずに制作していたのが間違いでした。。一旦通報はしましたが、どうなることやら。
メールのお返事はもうしばらくお待ちください。
MEMO
更新履歴やメール・拍手のお返事、独り言などを書きます。気が向いたときにしか更新しないです。
動作確認
テンプレートを新たに2つ作成したのですが、ガラケーの表示が不安なのできちんと表示できているかアンケートを取りたいと思います。
メールや拍手で携帯会社と、機種名と崩れているか崩れていないかを送ってほしいです。また、崩れている場合はどのように崩れているか教えていただけると助かります。よろしくお願いします。
また仕様が元通り？
05/30に「共有テンプレに外部リンクが使えるようになった」と書いておりましたが、再度元に戻ったようで、前回上げた【修正版】PC&携帯で崩れないセットのGoogle Web FontのURL部分が綺麗に消えていました。。。いきなり消してしまい、申し訳ございません。再度URL部分を修正し、以前のように「ｈttp://」にして投稿したいと思います。お手数をお掛けいたしますが、よろしくお願いします。
共有テンプレの仕様変更？
今までGoogle Web FontやjQueryを使用するテンプレートを共有テンプレにアップするときは、「ｈttp://」にしてURLが消えるのを防いでいましたが、今テストでアップしてみるとURLが消えませんでした。いつから仕様変更したのかわかりませんが、これで利用者の手間が1つ減りました！Web Fontが反映されない状態で今まで投稿してましたから、これは嬉しいです。
Facebook menu
またもや完全にお遊びで作ってみたのですが、スマホ向けのFacebookのメニュー画面を何とかCSSのみで作成してみました。Facebook menu
今回は動きのみを試験的に作ったものなので、このページの公開予定はありません。そしてガラケーのレイアウトはいれてないです。残念なことにIE6・7では悲惨なことになってます…orz
なので、みなさんIE8以上で見ましょうね！w誰か崩れずに組める方、ご教授お願いします…
見れない方に簡単に解説しますと、初めは左にあるナビゲーションを隠しておき、ヘッダーの左上のボタンをクリックしたら左からアニメーションして出てくるといったものです。。
ポイントは、CSSで「あるリンクをクリックしたときにCSSを変更する」というところです。CSS3では「:target」というセレクタがあり、それを使ってナビゲーションが展開されたレイアウトを作成しております。
遊んでばかりいないで、早く既存テンプレの修正を終わらせなければ…PC&携帯で崩れないセット10の修正と検証作業がそろそろ終わるので、もう少しお待ちください！長らくお待たせして申し訳ないです。。
INFOとLINKページ更新
少しだけINFOとLINKページを更新しました。自己満なくらい微妙な変更なんですけどね…
CSS3でパックマン
を作ってみました。完全にお遊びです。
CSS3 PAC MAN
テンプレ作成してないで何やっているんだ！と言われそうですが、疑似要素とかtrandisitonのお勉強に作ってみましたー。ちなみにパソコンのIEやガラケーは非対応です。。。
黄色い点にマウスカーソルを合わせるとパックマンが食べていく感じです。:beforeで隠すための要素を作り、:afterでパックマンを作成しています。
携帯向けメニュー
最近auのKCP3.0ガラケーで自分のテンプレを確認したら、メニュー同士がくっついてとても読みづらくなってました…自分の使っているCA001（KCP+）で確認すると半角スペースが空くのですが、KCP3.0だとスペースが無くなっていました。
普段はこんな感じで組んでいます。
<div id="nav">
<a href="#">メニュー</a>
<a href="#">メニュー</a>
<a href="#">メニュー</a>
<a href="#">メニュー</a>
<a href="#">メニュー</a>
</div><!-- / #nav -->
<a href="#">メニュー</a>
<a href="#">メニュー</a>
<a href="#">メニュー</a>
<a href="#">メニュー</a>
<a href="#">メニュー</a>
</div><!-- / #nav -->
PCやスマホ向けではaタグをブロック要素にして、ガラケーはそのままという感じです。今までだとaタグの後ろに改行を入れてスペースを付けていましたが、半角スペースが付かないとなると改行を削除して「 」を入れないと駄目なのかな…??
今後のテンプレについて
今後テンプレを作るにおいて、ワンパターン化している自分のデザインを需要に合わせて変えていきたいのですが、どんな機能がみなさん必要としているのか分からなくなってきました…最近はトップのテンプレを量産していて、平凡なデザインだなぁと自分で思ってしまいます。もっと画像を使ったテンプレとかにも挑戦してみたいんですけど、画像の撮影や編集技術はそこまでないですし…まず、再配布OKのサイトさんを探すのが大変です。。。
小説やアルバムは需要が高いらしいですが、実際に小説機能やアルバム機能を使ったことがないので、使いづらいデザインになっているように思うんですよね。
それと、Google Web FontやjQueryを使用したテンプレを公開する際は、外部URLが全て消えてしまうので、対策として「hを全角にして共有にアップする」という自分ルールを作ってきたのですが、やはり利用者としてはとても手間になっているのかなと思いました。携帯から編集している場合だと、HEADを編集すると、テキストボックスの関係で変なところで改行されてCSSが適用されなくなる恐れもありますからね。
iモードブラウザ1.0の対応もtableを使えばどうにかなりそうですけど、とってもHTMLがごちゃごちゃしてしまうんですよね。テンプレートを作って投稿するのは楽しいのですが、テンプレの検証作業がまだまだ不十分ですし、不具合が発生した後の対応も完璧ではないと思っています。テンプレを投稿している方同士でガラケーの検証をお互いに出来たら嬉しいんですけどねぇ…auガラケーしかないので、docomoとsoftbankのガラケーの不具合に対応できないのです。
IE6対策ではまる
IE6で少し困ったことがあったのでここに書いておきます。
何かというと、こんな感じでリストを組んでいて、
<ul>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
</ul>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
<li><span><a hrer="#">メニュー</a></span></li>
</ul>
ul li span {
display:block;
}
display:block;
}
IE6でリストの間に改行が入ってしまうというもの。
liとspanに背景画像を指定して画像の枠を作成したかったんですが、改行が入るためデザイン通りにコーディングが出来ない…
リストの中にあるインライン要素をブロック要素にすると発生するらしいです…解決法としては、zoom:1;を加えると直ります。あーIE6対策めんどくさい！
＊PREV
NEXT＃