タグアーカイブ： HTML

W3C Validatorに合格

れいま 2015/01/03 (土曜日) - 17:37:01 2015-01-03T17:37:01+00:00 | Web
タグ： コメントをする

年末に変更したこのテーマ、ふと「W3C Validatorにかけてないなー」と思ったので早速かけてみました。
W3C Validator
W3C HTML Validator
文句なしの合格。(`･ω･)ｂ
情報が2と表示されているのは合格した証のバーナーのソースが表示されています。

Feed Validator
これもHTMLと同じ、これはWordPressが出力してるので問題なしでしょう。

HTTP Checker
警告が1なのは古いヘッダー「Pragmaが使われている」ってやつでした。
WordPress側かなー？
そのうちコードをチェックしてみよう・・ｗ

W3C Internationalization Checker
これはi18n・・言語やエンコードが統一されているか等のチェックのよう。
全部UTF-8で統一しているので大丈夫だったみたい。

W3C CSS Validatorは何度やってもシステムエラーっぽい物を返してくるので、復旧を待つしかなさそう。
まあ出たとしてもCSS3の規格にないベンダープレフィックス関係と、linear-gradientを古い規格用にも指定してある所ぐらいかなー。

主要な所は通ってるのでよかった。ヽ(ﾟ∀ﾟ)ﾉ

新デザインがそろそろ完成

れいま 2014/12/27 (土曜日) - 23:14:08 2014-12-27T23:14:08+00:00 | Web
タグ： コメント (6)

ブログの新デザインがほぼ完成しました。
もう各PHPに分割してWordPressで動的表示できる状態に。
ブログ オリジナルテーマ - 作成状況： 2014/12/27
全体のスクリーンショットはこちら

携帯端末用のデザインも準備万端に(`･ω･)ｂ
ブログ オリジナルテーマ - モバイル用表示 ブログ オリジナルテーマ - モバイル用表示 メニュー
幸いスマフォもCSS3に対応しているので、ＰＣ用テーマを療養できました。
 
PCか携帯端末かはテーマのfunction.phpで設定します。
（判定部分のメインはこちらに公開されていた物を参考にしました。）

<?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へ以下のように記入するだけ。

<?php
if (IS_MOBILE) {
    include THEME_DIR.'/content-mobile.php';
} else {
    include THEME_DIR.'/content-pc.php';
}
?>

続きを読む

コメントフォームのデザインが完成

れいま 2014/12/21 (日曜日) - 22:00:14 2014-12-21T22:03:08+00:00 | Web
タグ： コメント (1)

前回は記事一覧とかを完成させました。
今日は記事の個別ページにあるコメント一覧とコメントフォームを作りました。
ブログ オリジナルテーマ - 作成状況： コメント表示
全体のスクリーンショットはこちら
コメントの表示は今の超シンプル・・悪く言えば味気ないデザインとは違い、シンプルかつわかりやすいように変更しました。
 
コメントフォームは入力ヶ所の大きさ的には今と殆ど変わりませんが、何を入力する所なのか？必須項目なのか？をわかりやすくしました。
ブログ オリジナルテーマ - 作成状況： コメントフォーム1 ブログ オリジナルテーマ - 作成状況： コメントフォーム2
必須項目は入力されていないと赤で強調され、それ以外の項目は特に何もなし。
しかし、メールアドレスやWebサイトに記載があった場合は、有効なものかチェックしダメだった場合は強調するように。（画像左）
ついでに、エラーで強調された所が再入力されているときはちょっとだけ注意を促す意味で黄色く強調されますｗ（画像右）
 
なんでやたら周囲を強調するかと言うと、文字色がコロコロ変わると結構目にくるんですよねー
なので、リンク以外の文字色は変動しないようにしてみました。

それもこれもDビデオの黒背景、白文字の長文を読まされたおかげ！
Dビデオ 白背景・黒文字
観たい動画がまだあるから、自分の見やすいようにuserChromeで弄ってやったよ。

本当に文字色って大事。
  続きを読む

新デザイン 進捗状況

れいま 2014/12/19 (金曜日) - 22:18:35 2014-12-19T22:26:58+00:00 | Web
タグ： コメントをする

昨日から作っているブログの新デザイン、作り出すと面白いので時間を忘れちゃいますｗ
今のテーマも多少HTML5とCSS3を使っているけれど、新しいデザインはHTML5とCSS3多用。

CSS3でごにょごにょ遊んでいたらこんな感じになりました。
ブログ オリジナルテーマ - 作成状況 2014/12/19 ブログデザイン 作成中
昨日（画像右）と比べるとかなり違いますｗ
全体のスクリーンショットはこちら

背景画像も盛り込む前提で作ってあるので、今のように既存のデザインに取って付けた感じはなくなると思います。
 
上にあるページナビとパンくずナビがまだちょっと考えている感じだけれど、記事が列んで表示されるインデックス部分は完成しました。
アーカイブ、カテゴリー、タグ、検索等、一覧で表示するページはこのテンプレートが流用できるので一気に進んだ感じ。

あとは記事単品ページ、普通のページって所かな。
記事とページはコメント等の部分があるので、インデックスの記事部分＋コメント辺りを作っていく感じ。
ここがメンドウな所なので暫く放置するかもしれませんがｗｗ

ブログテーマを作り直してみる

れいま 2014/12/18 (木曜日) - 21:30:33 2014-12-18T21:30:33+00:00 | Web
タグ： コメントをする

今日の昼頃サーバーからメールが届いたので何事かと見てみると・・・
うちのブログテーマ「mantra」の脆弱性を狙った攻撃が行われている　との自動送信メールでした。

脆弱性は独自に修正済なので問題は無いけれど、11時～12時までの間に18402回もの攻撃目的のリクエストが飛ばされていました。
問題ないリクエストでもやっぱり鬱陶しいので気分転換をかねてブログのテーマを新しくすることに。
 
その辺からテーマを拾ってきて改造すれば楽なんだけれど、どれもしっくりこなかったのと安全確認のためにコードを読むのがメンドウなので自作しますｗ

まずは基本の配置を決めてCSSで大まかなデザインを作っていって約2時間ほどでこんな感じに。
ブログデザイン 作成中
今のmantraのデザインはヘッダー、記事、サイドバー、フッターなど全て同じ色で繋がっていて一枚な感じだけれど、
新しいデザインはあえて隙間を開けるような感じにしていました。
その時にできた角はCSS3を使って丸めるように。
 
デバッグはFirefoxやchromeに付いているWeb開発ツールが結構便利。
marginやpaddingがどこにどれだけ出ているのかわかるし、スタイルがどの順番で継承されているか簡単にわかる。

そんなこんなで、テストするブラウザはFirefoxとchrome。
IEは最新のエンジンでレンダリングするように記載してあるし多分大丈夫。
メンドウなので視野に入れないけどｗ
 
大体のデザインはできたので、あとは時間が空いたときとかにチマチマと変更する予定。
序でにテーマ自体にスマフォ等のモバイル端末用テーマ切替機能を内蔵しようと思っています。
機能に制約があったり、システムが不安定になりがちなスマホ表示に対応するプラグインを使用しなくていい。

至急完成させる訳じゃないのでまったりやっていきます(`･ω･)ｂ