一枚の画像をCSSでPC表示とスマホ表示の両方に対応する方法

例えば社長の挨拶のようなページで、PC表示では300ピクセル程度の社長の画像を、右または左にフロートさせて、画像に回り込むように本文を配置し、スマホ表示ではフロートを解除し画像を100%表示して、画像の下に本文を配置する場面は多々遭遇する。

毎度毎度、眉間にしわを寄せながら試行錯誤するので自分用備忘録。

HTML

<img src="img/photo01.jpg" width="2950" height="2094">

何の変哲もないPタグの中に画像を配置。今回は横幅2950ピクセルのわざと大きな画像を用意して、PC表示にしてもはみ出すほどの画像を使用し、PC表示も調整し、更にスマホも最適化する。

CSS

/* スマホ表示 */
.pcsp01 img {
max-width:100%;
height:auto;
}
/* PC表示 */
@media (min-width: 768px) {
.pcsp01 img {
width:320px;
height:auto;
}
}

スマホ表示は「max-width:100%;」とすることでデバイスの画面一杯にピッタリ表示される。

スマホ表示

PC表示はメディアクエリを指定し、PC表示のみに適応させる箇所にピクセルで指定して表示させる。

PC表示

Postfixで「qq.com」からのメールを拒否する設定

どこで何を踏んだのかわからないのですが、あるときから「qq.com」からのスパムメールが来るようになり、日に日に数が増えていき、あまりにウザいので拒否することにした。postfixの設定ファイルを開き

#vi /etc/postfix/main.cf

下記を最終行へ追記し

smtpd_sender_restrictions = reject_unknown_sender_domain reject_non_fqdn_sender hash:/etc/postfix/reject_sender

保存して終了します。更に新たな設定ファイルを作成し

#vi /etc/postfix/reject_sender

qq.com REJECT(この1行だけを追記)
メールを受信拒否し、相手にもメッセージを送信

または

qq.com DISCARD(この1行だけを追記)
相手にはメッセージを送らずメールを破棄

と設定します。本来は「REJECT」で相手に通知するのが正しいのかもですが、今回は中華のウザいスパムなので「DISCARD」でスルーすることとします。ファイルを保存して終了し

#systemctl restart postfix

でpostfixを再起動して設定完了

参考サイト
中国の qq.com から大量に届く迷惑メールの対応方法まとめ

【postfix】送信元(From)によるメール拒否(smtpd_sender_restrictions )

Apacheのmod_deflate(gzip圧縮)を利用してコンテンツを圧縮して転送量を下げ表示を表示速度を向上させる設定

そもそも何故こんなことをしなければならないか?というと、WordPressを利用してブログを運営していると徐々に記事数も増え、利用するプラグインも増え、データベースの容量も増え、時と共に重くなるWordPressの表示速度を少しでも速くしたい。

何故表示速度を速くしたいのか?中々コンテンツが表示されず、長い読み込み中の画面から立ち去るブラウザバックを少しでも減らしたい、そして1件でも多くのPVを獲得したい・・という切実な思いの表れであり、SEOの非常に重要な一環であります。

まぁ、このサイトは雀の涙ほどしかPVがないわけでありますが・・・それは置いておいて。

実際の設定方法

「httpd.conf」を開き

#vi /etc/httpd/conf/httpd.conf

最終行に下記を追記

ソースは下記サイトのものをそのままパクらせて利用させていただきました。ありがとうございます。m(_ _”m)

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
# htmlやcssなどは圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

設定が完了したら「httpd」のサービスを再起動。

#systemctl restart httpd

下記サイトで実際に反映されているか?を視覚的に非常にシンプルで分かりやすく確認できます。

Evaluation Tools(圧縮をチェックできるサイト(英語))」

参考サイト
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法
正しく圧縮、素早く送信、mod_deflateの設定方法

WordPressを高速化するMariaDBのInnoDB(CentOS7)の設定

WordPressを高速化する一つの手法としてMaiaDBをInnoDBで運営している際にクエリキャッシュを有効にさせてデータベースの読み込みを高速化する設定の備忘録です。

サーバー上のMariaDBの設定ファイルを設定するので、サーバー管理者、もしくはレンタルサーバーのroot権限を持った管理者向けの設定方法です。なので今回の設定ではWordPress自体はいじりません。

MariaDBの設定ファイルの書き換え

#vi /etc/my.cnf.d/server.cnf

[mysqld]
・
・
innodb_buffer_pool_size = 512M
query_cache_size = 64M

[mysqld]部分の最後に上記の2行を追記

MariaDBのサービスの再起動

#systemctl restart mariadb

現在のクエリキャッシュの設定値の確認

シェルでMariaDBにログインしてコマンドラインで

>SHOW VARIABLES LIKE '%query_cache%';
+------------------------------+----------+
| Variable_name | Value |
+------------------------------+----------+
| have_query_cache             | YES      |→クエリキャッシュを利用
| query_cache_limit            | 1048576  |→クエリキャッシュ最大サイズ
| query_cache_min_res_unit     | 4096     |
| query_cache_size             | 67108864 |→クエリキャッシュ領域
| query_cache_strip_comments   | OFF      |
| query_cache_type             | ON       |
| query_cache_wlock_invalidate | OFF      |
+------------------------------+----------+
7 rows in set (0.00 sec)

キャッシュが有効になっていることを確認

WordPressでSEO観点からのrobots.txtとsitemap.xmlの設定まとめ

今の今まで大きな間違いを犯していました・・・orz

事の発端はGoogleの「Search Console」の「重複するメタデータ(descriptions)」に該当ページがぞろぞろと表示され、その内容をよく見るとWordPressが自動的に生成する「タグ」のページ、「カテゴリー」のページ等でした。

これらはいわゆる「低品質なコンテンツ」であり、SEOの観点からしてもいいものではありません。

Googleの引用によると
「低品質なコンテンツがサイトの一部にしか存在しない場合でも、サイト全体の掲載順位に影響を与えることがあるということにご注意ください。」
とのこと。

そこで重い腰を上げて対策に乗り出したわけですが、そのときにググりまくってあれこれ情報を蓄積しすぎて頭がごちゃごちゃになっていたのも事実です。人間、トラブルは手っ取り早くサクッと解決させたいと思うのが人情、でもそれは深い闇への入り口でもありました・・・。

失敗例

この後に改善したものを紹介しますので、以下は失敗例ですので決して真似しないでください。

まず、「robots.txt」でそれらをクロールされないようにブロックしました。

User-agent: *
Disallow: /page/
Disallow: /archives/category/
Disallow: /archives/tag/
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Sitemap: http://www.hogehoge.jp/sitemap.xml

覚悟はよいか?うははは、と上機嫌に設定しましたが、どこからともなく「お前がな・・」という声が聞こえたような聞こえなかったような・・・。

以下は改善例です。

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Sitemap: http://www.hogehoge.jp/sitemap.xml

「ページ」、「カテゴリー」、「タグ」は「robots.txt」でブロックしてはいけません。
ググれはよく見かけるこの設定でファイナルアンサーです。では、「低品質なコンテンツ」はどうやって対処するのでしょうか?

「低品質なコンテンツ」をクロールさせない正しい対処法

それは「noindex」を設定してやることです。そうすることによってGoogleのクローラーに「これはインデックスしないでね」という意思表示になります。

ここがごっちゃになりやすいところなのですが、「robots.txt」でブロックするのと一緒じゃないの?思い込みそうですがそうではありません。

クローラーをおまわりさんの職務質問を例にすると、「鞄の中を見せてもらってもいいですか?」と言われ、「いいですよ、どうぞどうぞ、でも人に見せないでくださいね」というのが「noindex」。「いや、持ってねーし、持ってねーから、見んなよ!触んじゃねーよ!」というのが「robots.txtでのブロック」。

具体的な「noindex」の設定の方法は「All in One SEO Pack」でやります。有名なWordPressのプラグインで、以下はWordPress限定の話になります。

「ダッシュボード」→「All in One SEO Pack」→「一般設定」→「Noindex設定」とクリックします。

「NOINDEXをデフォルト」の投稿のみをチェックはずします。
「NOFFOLLOWをデフォルト」の投稿のみをチェックはずします。
その他は全てチェックを入れます。

画像は途中で切れていますが、画像に移っていない下の部分の項目も全てチェックです。そして「設定を更新」ボタンをクリックします。

「ページ」、「カテゴリー」、「タグ」のページを表示し「ページのソースを表示」し

<meta name="robots" content="noindex,nofollow" />

このメタタグが表示されていれば、Googleのクローラーに「noindex」の意思表示が伝わります。もちろん設定が反映されるのはクローラーが回ってきてからということになります。