Home/Blog/覚書き::Web関連

スマホ用CSSで無駄な横スクロールをさせない

昨日までの作業でとりあえずスマホっぽい表示にはなったものの、見る時になぜかいらない横スクロールが発生。これが地味にイラッとするので何とかならないかと思っていたら、ありました。

https://www.firstsync.net/archives/9691

なんでも画面幅以上に設定されている要素があるのが原因のようです。早速確認してみたんですが・・・細かい設定をしまくったPC用のCSSからいじってあるので、どこが悪いのかよくわからない。これはまいったと思っていたら、ありました。

http://d.hatena.ne.jp/izit_kosuke/20110126/1296067112

ページ全体を囲んでいる要素にoberflew: hidden;を設定して、はみ出た部分は非表示にしてしまうようです。これを試したら見事に縦スクロールのみの、いかにもスマホライクなページになりました!

ページがモバイルフレンドリーではありません

少し前から、検索結果に上の文句がくっついてくるようになっていました。ずっと放っておいたのですが、検索順位にも影響するみたいで、このままではただでさえ少ないアクセスが無くなってしまうと思って対策をしてみました。

やったこととしては、スマホ表示の場合別のcssを読み込ませてピクセルで指定していた各種widthをスマホ画面に合わせるようにする、あまり役に立っているとも思えないサイドバーはこの際display: none;でごっそり隠す、タイトル画像を画面に合わせるようにする、といったもの。

以下のサイトを参考にさせていただきました。

CSSの切り替えはこちら。

http://samuri-blog.net/webdesign/5582.html

タイトル画像の可変化はこちら。

http://qiita.com/39_isao/items/009f2382f87988039215

詳しい解説のおかげでとりあえずテストではモバイルフレンドリーと出るようになりました。切り替えの指定以外いじったのはCSSだけ。CSSって凄いですね。

スパムフィルター

先日、2時間余りの間に50件を超えるコメントスパムが来襲するなんて事がありまして、さすがに洒落にならないので対策をとる事にしました。

導入したのは「this calm night」様で公開されているスパムフィルター。プラグイン形式なので設置もいたって簡単です。実は最初別のフィルターの導入を試みたものの、設置が上手くいかなかったのでした(泣

これで解消されるとよいのですが。

画像をマージンなしの別ウィンドウで開く

サンプル

JavaScriptで開く別ウィンドウは、個人的には使い過ぎさえしなければ大変便利なものだと思っています。

画像のポップアップ表示もよく使われるものの一つでしょう。しかし直接画像ファイルを開くと、ブラウザのデフォルトのマージンだかパディングだかが適用されて余白が生じてしまいます。その分ウィンドウのサイズを大きめにすれば済むことですが、画像サイズぴったりのウィンドウを開きたい場合にはちと困りもの。

当サイト「Illustration」の画像は、個々に専用のhtmlファイルを用意しています。それならスタイルシートでマージン・パディングを無効にするだけの話。でも、らくがき程度のものにわざわざhtmlを用意するのはちょっと面倒です。

で、あちこち必死こいて調べながら辿り着いたのが以下の方法。DOMとやらでファイルを書き換える方法にも挑戦してみたのですが、うまく別ウィンドウに引数を渡すことが出来ずに断念。

More...

MacIEの(?)文字化け

友達とのやり取りで文字化けの話が出て、ちょっと気になったので調べてみたら「あーこれ該当するかも」という記事がちらほら。

はてなグループでは文字コードにUTF-8を使っている。MacIEに特有の現象らしい。

文字コードがUTF-8の場合、MacIEで閲覧すると入力フォームで文字化けを起こすという事のようです。とりあえず、対処方法に従ってtextareainputに「Osaka」フォントを指定してみました。MacIEの環境が手元にないので確認は出来ないのですが。

以下、MacIEとは関係ない話。

フォントと言えば、Operaでの表示の乱れも気になっています。現在基本のフォントは「Verdana」にしているんですが、Operaで閲覧すると欧文フォントと和文フォントで段差が出来たり、字間がやたら開いてしまったりと、はっきり言ってかなり見苦しい状態になっていることと思います。でも原因がよくわからず。他にもform周りの表示に妙なクセがあったりで、今回サイトを作っていてちょっとOperaが嫌いになりました。

ブラウザ毎の仕様やらバグやらは本当にどうにかして欲しいです。

SB使用プラグイン・参考Tips

サイトを作るにあたり使わせていただいたSereneBachのプラグインや、参考にした記事を書き留めておきます。

プラグイン

Tips

・・・で、以下は実際の導入についてのメモ。

More...

Serene Bachでサイト構築

ただ今サイトを作っている最中。ようやく少しずつ形になってきたとこです。整形文のテストを兼ねてちょっと書いておこうと思います。

サイトの構築にはSerene Bachを使用させていただいています。サイト本体とブログの部分でなるべく違和感が出ないように試行錯誤して、とりあえず下のようになりました。

More...