12/18からまったりと作り始めた新テーマ。
1日10分～1時間程度の作業だったので結構時間がかかっちゃいましたｗ
今まではPCでもモバイル端末でもPCと同じ構成のテーマで表示の折り返し方法は端末任せだったけれど、今回からモバイル端末にも対応させました。
CSSが違うだけじゃなくて、ちょっとだけHTML構成も違うのでそれなりに見ることができるはず。
それに合わせて、今使っているプラグインでメンテナンスされていない物とかを片っ端から最適化しました。
同じテーマでもプラグインを最適化するだけで応答速度が0.8sから0.5sまで速くなった。(`･ω･)ｂ
更に、新しいテーマに変えると0.3～0.4sの応答速度に。
他者のテーマを改造するんじゃなくて、自分で作ってよかったｗ
ブログの新デザインがほぼ完成しました。
もう各PHPに分割してWordPressで動的表示できる状態に。
全体のスクリーンショットはこちら
携帯端末用のデザインも準備万端に(`･ω･)ｂ
幸いスマフォもCSS3に対応しているので、ＰＣ用テーマを療養できました。
PCか携帯端末かはテーマのfunction.phpで設定します。
（判定部分のメインはこちらに公開されていた物を参考にしました。）
// instance $kti = new kerberos_theme(); // define mobile if ($kti->is_mobile()) { define('IS_MOBILE', true); } else { define('IS_MOBILE', false); } // function class public class kerberos_theme { ...(略)... public function is_mobile() { $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // Android 'Windows.*Phone', // Windows Phone 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); return preg_match('/'.implode('|', $useragents).'/i', $_SERVER['HTTP_USER_AGENT']); } ...(略)... }
処理は簡単、正規表現でユーザーエージェントを元に判定してその結果を定数にするだけ。
defineはグローバル定数なので、function.phpで記載しておくだけでどのテーマファイルからでもglobal宣言やスーパーグローバルを使わずにアクセス可能。
それに判定を行うのは1回だけなので余計な負荷がかからないのも良いところ。
後は各テーマファイルでIS_MOBILEをチェックするだけ。
contentの場合content.phpへ以下のように記入するだけ。
if (IS_MOBILE) { include THEME_DIR.'/content-mobile.php'; } else { include THEME_DIR.'/content-pc.php'; }
最近、スカイプでグループメッセージを送信できないメンバーが増えてきた。
その時の画面がコレ。
インスタントメッセージは現在ご利用いただけません。
この問題は、チャットが更新されればまもなく解決される可能性があります。
または、通話とIMの同時利用に対応していないSkypeの古いバージョンを、どなたかが使用している可能性があります。
と言うメッセージ。
通話自体は可能だけどメッセージを送受信できないけれど、１：１なら今のところ発生はしない。
体感的にSkype 6.22が出てきた頃から発生するようになった感じかな。
今使っているバージョンは6.20.0.104で最新版は6.22.64.107。
使ってるバージョンが古いからなのか？と言うことで、試しに6.22をインストールしたけれどメッセージの送受信は不能のまま。
改善されるどころか１：１のメッセージも送受信不能にｗｗ
なんだこれ ヽ(｀Д´)ノ
そしてこのSkype 6.22からはチャットのデザインが変更されLINEっぽくなりました。（Skype公式ブログ）
左は6.22、右が6.20
公式ブログにもあるように、確かに見やすいんだけれどPCの画面上でこれは要らない。
ちょっとしたコードを貼ったりしたときは最悪な状態ｗ
このLineっぽいデザインをON/OFFできるようになれば良いんだけど。
結局解決方法はわからず・・・。
現状、最新版にしても特定のグループチャットは使えないので、新デザインが嫌な方はダウングレードしても問題ないでしょう。
前回は記事一覧とかを完成させました。
今日は記事の個別ページにあるコメント一覧とコメントフォームを作りました。
全体のスクリーンショットはこちら
コメントの表示は今の超シンプル・・悪く言えば味気ないデザインとは違い、シンプルかつわかりやすいように変更しました。
コメントフォームは入力ヶ所の大きさ的には今と殆ど変わりませんが、何を入力する所なのか？必須項目なのか？をわかりやすくしました。
必須項目は入力されていないと赤で強調され、それ以外の項目は特に何もなし。
しかし、メールアドレスやWebサイトに記載があった場合は、有効なものかチェックしダメだった場合は強調するように。（画像左）
ついでに、エラーで強調された所が再入力されているときはちょっとだけ注意を促す意味で黄色く強調されますｗ（画像右）
なんでやたら周囲を強調するかと言うと、文字色がコロコロ変わると結構目にくるんですよねー
なので、リンク以外の文字色は変動しないようにしてみました。
それもこれもDビデオの黒背景、白文字の長文を読まされたおかげ！
観たい動画がまだあるから、自分の見やすいようにuserChromeで弄ってやったよ。
本当に文字色って大事。
続きを読む
昨日から作っているブログの新デザイン、作り出すと面白いので時間を忘れちゃいますｗ
今のテーマも多少HTML5とCSS3を使っているけれど、新しいデザインはHTML5とCSS3多用。
CSS3でごにょごにょ遊んでいたらこんな感じになりました。
昨日（画像右）と比べるとかなり違いますｗ
全体のスクリーンショットはこちら
背景画像も盛り込む前提で作ってあるので、今のように既存のデザインに取って付けた感じはなくなると思います。
上にあるページナビとパンくずナビがまだちょっと考えている感じだけれど、記事が列んで表示されるインデックス部分は完成しました。
アーカイブ、カテゴリー、タグ、検索等、一覧で表示するページはこのテンプレートが流用できるので一気に進んだ感じ。
あとは記事単品ページ、普通のページって所かな。
記事とページはコメント等の部分があるので、インデックスの記事部分＋コメント辺りを作っていく感じ。
ここがメンドウな所なので暫く放置するかもしれませんがｗｗ
最近のコメント