CSS – ぽこログ tech

2018-01-08

2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法

手軽にウェブサイトをレスポンシブウェブデザイン(iPhoneなどのスマホに対応)にする方法です。

右側にメインコンテンツ部、左側にサイドメニューがある一般的なデザインで、スマホで見るとサイドメニューをメインコンテンツの下に表示するようにします。
スマホの判別は

@media screen and (max-width: 48em),screen and (max-device-width:480px)

でやります。
ホントは画面サイズによっていろんな要素の最大幅・最小幅を設定した方がいいのですが、とりあえずこれで80%対応できます。
凝りだすとたいへんなんですよね～。だから費用対効果のいいところでやめます。(笑)
“2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法” の続きを読む

2017-12-30

WordPressのテーマTwenty Seventeenのカスタマイズ

WordPressのテーマ、Twenty Seventeenいいですね。シンプルで今風のフラットなデザイン。
でも私は古い人間なので、5～10年ぐらい前に流行ったデザインにカスタマイズすることにしました。
うすーい灰色のバックに、白い紙を置いたイメージで。あとは空白を詰めます。

全体の横幅をデフォルトより広く設定する

まず、PC画面で横幅を1200ピクセルに設定します。

media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;
	}
	.navigation-top .wrap {
		max-width: 1100px;
	}
}

media screen and (min-width: 48em)

は、PC画面などで幅が十分広い機種は、の意味です。
.wrapのmax-widthで横幅を設定(1200px)します。
記事部分の横幅は全体の67%、ウィジェット部分の横幅を29%としています。

@media screen and (max-width: 48em) 
{
  .wrap{
	padding: 0px;
	margin: 0px;
  }
}

逆にスマホでは画面全体にブログを表示させるため、padding・marginともに0px(余白なし)に設定します。
“WordPressのテーマTwenty Seventeenのカスタマイズ” の続きを読む

2017-02-17

Apacheウェブサーバで画像ファイル等をブラウザにキャッシュさせる

ブラウザのキャッシュを活用する

Google アナリティクスのレポート→行動→サイトの速度→速度の提案で、

ブラウザのキャッシュを活用する
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカルディスクから以前にダウンロードしたリソースを読み込むようになります。
次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:

で、どうすればキャッシュさせるか調べてみました。

2017-02-15

Google アナリティクスで画像を最適化する

今回のエントリは次のの前振りです。

Google アナリティクスでウェブサイトの画像を最適化(圧縮)できるのをご存知でしょうか?

レポート→行動→サイトの速度→速度の提案
にあります。

2015-10-06

GMOクラウド、WordPressの高速化

GMOクラウド ALTUS(アルタス)の最小構成ではPHP, Perlの実行がやや遅いので、ネットで調べてWordPressの高速化。

mod_deflateでファイルを圧縮

Apacheのサイトを見ながらファイルを圧縮。httpd.confを編集。

<Directory "/home/foo/www/wordpress">
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Directory>

WP Super Cacheの追加

WP Super Cacheを追加。
最初、エラーが出て設定できなかったけど、wp-config.phpのパーミッションを757にしたら設定できた。

これで、PageSpeed Insightsのスコアが69から84へと急上昇。
満足の結果です。