Web - webruary

FC2ブログのテンプレートをhtml5でリニューアル。

Category:Web

2013-03: 06
Comments: 4
TrackBack: 0

気がつけばブログを始めてから早5年…。
まぁ、節目ということでブログのテンプレートデザインをリニューアルしてみました。

前のテンプレートデザイン →
(↑前のデザインのスクリーンショット取る前に画像ファイルを上書きしちゃったので、ビミョーに変。)

前回のテーマと言う名の目標は『なるべくdivを多用しない。』でしたが、今回は『html5の基本に沿って。且つシンプルに。』。
前のデザインはグランジ系で画像をそこそこ使ってましたが、今回は半分くらい減りました。ソースも割かしシンプルになったかと。

べっ…べべべべ別に手抜きをした訳ｊ(ry
あと、footerがMicrosoftっぽいとかは秘密です。

もし、こんなブログでもソースを覗いちゃう様な方がおられましたら、じゃんじゃん見て「タグの使い方間違ってる」とかありましたらご指摘いただけると幸いです。

ちなみに、現在はリニューアル仕立てで、細かいとこはまだチェックしきれてないので不具合とかあるかも。
早速、前使ってた『shadowbox』の名残でaタグのrelに『[]』が入ってる関係上fancyboxが動作しない…(´・ω・｀)

不具合も直しつつ、jqueryとかCSS3あたりで何かしら動くようにしたいです。

スポンサーサイト

Outlook.com(hotmail)で@より前に.(ドット)があると送受信出来ない罠。

Category:Web

2012-12: 31
Comments: 0
TrackBack: 0

XPERIA Solaを買い、うはうは気分な今日この頃、ふとPCからOutlook.comにアクセスしてメールを送ろうとしたら、アドレスが赤文字になり「アドレスが有効でない可能性があります」と出て送れない。

Gmailからインポートしたアドレス帳に登録してあるアドレスなので、アドレスの打ち間違いではないです。
でも「アドレスが有効でない可能性」ってことらしいので、なんでだろ？とアドレス見てたら、その送ろうとしたアドレスは「@(アットマーク)」の直前に「.(ドット)」が入ってる。
試しにそのドットを消したらエラー表示が消えた。

ってことで、調べたらどぉやら「世界共通となるインターネット通信規格のRFC」のルールが関係してるらしい。

今までその人とはdocomoのメール(←解約済み)かgmailかtwitterで連絡してたため、まったく気が付きませんでした…。

gmailもRFCを考慮してるようですが、docomoとAUに関しては例外にしてるっぽい。

先日のGmailがGoogle Syncをやめた関係(？)でOutlook.comがイロイロ頑張った気配がありました(←それから3日後くらいに復旧しました。)が、ついでに例外として認めるように仕様変更してくれないかなぁ(´・ω・｀)

あっ。
2012年も終わるじゃないか。

※2012/12/31 追記: と思ったら、ExchangeしたXPERIA Solaから送信だけはできました。
ただし、相手から送ることは出来ない様子。

Ajaxで動的に生成されたリンクにもfancyboxを適用させてみる。

Category:Web

2012-09: 11
Comments: 1
TrackBack: 0

忘れないうちに。

自分が出くわしたのは、jqueryを使用してaタグが入ってる親要素全体をクリックエリアになるようにしてたら『fancybox』が適用されなかったっていう。
まぁ、やろうと思えばjqueryじゃなくてCSSのみでイケるコーディング状況だったんですが、脳内で「あきらめないあきらめないあきらめないあきらめないあきらめない」とももクロが歌い始め…。

ちょっと調べてみると、jqueryに限らずAjaxで動的に生成されたリンクだとfancyboxは動作しないっぽい。

ただ、やっぱり、他にも動的なリンクにfancyboxを適用させようとしている方がおり、解決策を紹介していましたので参考にさせていただきました。

ちょっと気になったのでオンラインストレージ探してみた。

Category:Web

2012-05: 14
Comments: 0
TrackBack: 0

ウェブストレージいろいろ

Goolgeドライブも始まり、オンラインストレージがどんどん増えていく今日この頃。
自分もいくつか登録してるんですが、ちょっと気になったので今どんだけオンラインストレージサービスがあるのか調べてみた。

調べたと言っても、英語はめんどいんで省いたり、「A Drive online storage」「B Drive online storage」「C Drive online storage」…で検索してみたりと、テキトーです。
あくまで参考ということで。

隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。

Category:Web

2012-05: 11
Comments: 0
TrackBack: 0

今更ながらCSSのセレクタがちょー便利。
IEも場合によっては強制自動更新で8もしくは9になった関係上、ココ最近結構多用してました。
(↑正直、もぉIE6については他のブラウザと表示が違くなっててもスルーしたり…。)

そこで、自分が使い方を勘違いしてたところがあったのでメモしつつ、誰かの参考になれば。

CSSで背景画像をcenterにした際に1pxずれる時の対処法

Category:Web

2011-12: 05
Comments: 0
TrackBack: 0

とあるサイト制作時に背景画像をCSSでセンターにしたら、なぜかIE6、IE7、chrome、safari(←全部Windows環境。)で右に1pxズレる現象が発生。
しかも、いつもならchromeとかじゃなく、IE8なのに。

実は以前にもこんなことがあって、仕方ないんでhtmlとCSSをちょっと変更して対処しましたが、今回はデザインの関係上うまくいかない…。
かといってdivを無駄に増やすのは自分のポリシーに反する(｀･ω･´)
いや、まぁ、自己満足なんですけど…。

で、イロイロ調べた所<body>にpadding-left:1px;とかで解決するとかありましたが、ナニかが違うのか上手くいかない上に横スクロールまで出る始末(´･ω･`)
イロイロ試行錯誤した結果、とりあえずなんか出来たっぽいのでご紹介。

またまた、需要ないと思いますが…。
こんな方法もありますよ的な感じで(・∀・)つ

高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。

Category:Web

2010-07: 09
Comments: 0
TrackBack: 0

webbiboさんにて紹介されていた『floatを使わずにinline-blockで横並びにする方法』を参考に自分用メモ。

高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。のサンプルページ。

html

<ul>
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><
</ul>

css

ul{
  list-style:none;
  width:330px;
  padding:0;
  margin:0;
}

ul li{
  display:inline-block;
  vertical-align:top;
  width:78px;
  padding:10px;
  margin:0 10px 10px 0;
  border:1px solid #ccc;
  background:#f7f7f7;
}

* html ul li{display:inline; width:100px; zoom:1;}
*:first-child+html ul li{display:inline; zoom:1;}

GreasemonkeyでYahoo!・Google・bingの検索結果に順位表示。

Category:Web

2009-09: 15
Comments: 2
TrackBack: 0

Greasemonkey

実はいつの間にやらLunascapeからFirefoxに心変わりしていたという事実。
たしかに、ひとつのブラウザで3エンジン切りかえれるのは便利ですが、やっぱあの起動の遅さはいただけない…。

ってなわけで、Web関係の仕事をしている人はたぶん今更感もっこりだと思いますが。
知らなかったという人の為に。実は自分も最近まで知らなくて(←ってか、最近までLunascape。)いちいち順位を数えてたとかは秘密で。

CSSで画像の上に背景画像を乗っける方法。

Category:Web

2009-04: 21
Comments: 11
TrackBack: 0

タイトル通りのことなんですが、CSSを使って画像の上に背景用画像を表示するやり方を紹介します。
画像の上に背景画像を乗っけたら、画像が見えなくなるだろ。ってのはなしで、サンプルを見てもらえば分かるかと思いますが、アレですこのブログの右側にあるiTunesとかオートバックスとかのバナーの装飾にも使ってる方法です。

まぁ、正直需要は少ないと思いますが…。
こんな方法もありますよ的な感じで(・∀・)つ

Netvibesにストレージ機能を追加。

Category:Web

2008-11: 29
Comments: 0
TrackBack: 0

Netvibes + Box.net

たまたま知ったのですが、パーソナライズドページの『Netvibes』に実はストレージ機能を付けれるっぽいです。
まぁ、基本的に自分が使ってるWebストレージはWindows Liveの『SkyDrive』なんですが、Netvibesをスタートページにしている関係上、こっちの方がログインする手間が省けるんじゃね？ってことで使ってみようかと。

My favorite link

Tag Cloud