タグアーカイブ： CSS

スタイルシートをLESSにかえてみた。

れいま 2016/06/06 (月曜日) - 21:27:42 2016-06-13T04:59:33+00:00 | Web
タグ： コメントをする

サーバー側のCSS/JavaScriptをまとめて最適化＋難読化するシステムを作り直して、The Dynamic Stylesheet language (LESS)に対応させました。
LESSのコンパイルにはlessphpライブラリを使用。

LESSってナニー？って感じですが、LESSは主に開発者側がCSSを使いやすく、メンテナンスが容易にするためのCSSプリプロセッサなんです。
CSSでネックだった変数、関数、演算が使えるので、開発者からすればCSSの視認性の上昇やコードの短縮ができます。

なのでWebを閲覧するユーザー側からしたら特にメリットはなく、クライアント側コンパイラを使う場合はページ表示速度低下があるのでデメリットしかありません。
しかし、コンパイルをサーバー側でやっておくとユーザー側のストレスはCSSと全く同じ。

これはメンテナンスをし易くするために使ってみねば！という事で・・・
とりあえず、よく使うアンカーエレメントの訪問済みリンクやマウスオーバーの色を指定するやつはこうなります。

CSS

a:link {
    color: #0d85cc;
    text-decoration: none;
}
 
a:visited {
    color: #0d85cc;
    text-decoration: none;;
}
 
a:active, a:hover {
    color: #12a7ff;
}
 LESS

a {
    &:link {
        color: #0d85cc;
        text-decoration: none;
    }
 
    &:visited {
        color: #0d85cc;
        text-decoration: none;
    }
 
    &:active, &:hover {
        color: #12a7ff;
    }
}

 
少しややこしいCSSのサンプル。
このブログのフォームにも使っているCSSで、inputやtextareaのマウスオーバーやフォーカスを当てた時に縁が変化するやつはこうなる。
CSS

input, textarea, select {
    color: #666;
    background: #fff;
    font-size: 12px;
    line-height: 18px;
}
 
input:not([readonly]):not([disabled]):hover, 
textarea:not([readonly]):not([disabled]):hover, 
select:not([readonly]):not([disabled]):hover {
    background: #f6f6f6;
}
 
input:not([readonly]):not([disabled]):focus, 
textarea:not([readonly]):not([disabled]):focus, 
select:not([readonly]):not([disabled]):focus {
    transition-duration: 0.3s;
 
    background: #fff;
    border-color: #75b9f0;
    outline: 0px none;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px #75b9f0;
}

LESS

input, textarea, select {
    color: #666;
    background: #fff;
    font-size: 12px;
    line-height: 18px;
 
    &:not([readonly]):not([disabled]):hover {
        background: #f6f6f6;
    }
 
    &:not([readonly]):not([disabled]):focus {
        transition-duration: 0.3s;
 
        background: #fff;
        border-color: #75b9f0;
        outline: 0px none;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px #75b9f0;
    }
}

ロケーション疑似クラスを使ってたり複数指定しているCSSは格段に見やすく、そしてシンプルになりますねー！
 
うちのブログのCSSもLESSにかえてみたら、CSSで62.5Kb、LESSで37.7Kbのファイルサイズに。
LESSをコンパイルすれば同じぐらいのサイズになったので、書き方の違いがあるだけでCSSとLESSをコンパイルした物はかわらなかった。
CSSとLESS
画像はCSSをLESSに作り直しをしているところだけれど、視認性が高くファイルサイズが小さくなってるのがよくわかりますねｗ

本当にこれは使いやすくて良い感じ(`･ω･)ｂ

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 ブログデザイン 作成中
昨日（画像右）と比べるとかなり違いますｗ
全体のスクリーンショットはこちら

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

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