ILLUSTRAMBLE

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

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とやらでファイルを書き換える方法にも挑戦してみたのですが、うまく別ウィンドウに引数を渡すことが出来ずに断念。

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

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

• MacIEでの文字化け対策：はてな

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

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

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

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

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

プラグイン

ページナビゲーション展開（番号センタリング） 1.00 b03

前後の以外のページへのリンクも表示してくれるプラグイン。うちは大した記事数ではないのですけど、やっぱり便利。

Serene Bach on the Prairie：ふうこ様

Tips

コメントリストの「⇒」を変更する

コメントリストの表示はそのままにしているんですが、「続きを読む」の表示を変更する方法を参考にさせていただきました。「Read more...」って、変更後の表示まで真似てるんですが（汗

blog*citron：ユヅ様

いろいろ使える（？）折りたたみ

記事の一部分を隠す方法を紹介されています。こちらを参考に、タグだけちょこっといじって使用させていただきました。

Abi Labo *Days*：あびのすけ★様

Movable Type作業メモ

上の「いろいろ使える（？）折りたたみ」で参照されている記事です。

ARTIFACT ―人工事実―：加野瀬未友様

記事のインデックスを作る

個別記事のページではなくて、ページ内の該当記事にジャンプするインデックスを作る方法を紹介されています。イラストページの「Titles」部分で参考にさせていただきました。

1つのテンプレートでデザインを変える

テンプレートを切り替えずにカテゴリ毎に表示を替える方法。こちらの記事を参考にメニューの表示色を変えています。

Studio Ponytail

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

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

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