リンク部分にマウスカーソルを乗せると動くようにしてみた。

2018年09月23日 21時00分 正午の月齢:13.8  月名:待宵月  潮汐:大潮 月齢:13.8[待宵月] 潮汐:大潮
7年前に投稿 | WordPress | 1件のコメント

1分ぐらいで読めます。

えー、たまに画像の上にカーソルを乗せると、画像が白っぽくなるサイトがありますよね。あれ嫌いなんですよ。まるで目が悪くなったかのように画像がすごく見にくくなるので。

ただ、「この画像はハイパーリンク張ってますよ」というのを強調したいというのは理解できるので、当サイトもリンク部分にマウスオーバーしたらピコッと画像やテキストが動くようにCSSを修正しました。

a:link{
color: #009999;
}

a:visited{
color: #009999;
}

a:active{
color: #009999;
}

a:hover{
color: #FF0099;
position: relative;
top: 1px;
left: 1px;
}

現在のところ、1pxで設定しているので、マウスオーバーとともに下に1px・右に1px動きますが、マイナスの値にすると逆方向に動きます。値を大きくするほどビヨンと動くのですが、あまり大きく動くととても下品になるので、1~2pxくらいがいいかなー。

別にあってもなくても大して変わらない機能なのですが、ちょっとウェブサイトに動きをつけるだけでずいぶん華やかになりますね。

WordPressでランダムに記事を表示させる。

2018年09月22日 21時00分 正午の月齢:12.8  月名:十三夜  潮汐:中潮 月齢:12.8[十三夜] 潮汐:中潮
(最終更新日:2019年09月17日)
7年前に投稿 | WordPress | コメントはありません

2分ぐらいで読めます。

ふだんはカテゴリ別だったりアーカイブ別だったりで記事を表示させることが多いのですが、該当する記事がなかったときに表示される404ページが味気なさすぎるので、ランダムに記事を表示させてみたくなりました。

404.phpの中身はこんな感じです。

<?php get_header(); ?>

<div id="docuarea">
<div id="documents">

<div class="entry">
<h2 class="entrytitle">ページが見つかりません…</h2>
<p>お探しのページは存在しません。</p>

<h2 class="commenttitle">こんな記事はいかがですか。</h2>
<ul>
<?php query_posts('showposts=20&orderby=rand');?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>
<?php endwhile; endif; ?>
</ul>

</div>

</div>
</div>
<?php get_footer(); ?>

これでランダムに記事を表示できます。「showposts=20」の値を変えると表示する記事の数が変わります。

こんなふうに表示されました。かなり古い記事が出てきて、なかなか面白いですねー。

WordPressで記事の中にPHPのコードを書くと、下書き保存もプレビューもできずに501エラー。

2018年09月19日 21時00分 正午の月齢:9.8  月名:十日月  潮汐:長潮 月齢:9.8[十日月] 潮汐:長潮
(最終更新日:2019年09月04日)
7年前に投稿 | WordPress | コメントはありません

2分ぐらいで読めます。

WordPressで同じカテゴリーの最新記事を数件表示させる方法を書いているとき、途中までは普通にプレビューや下書きとして保存できたのに、急にプレビューを開いたら501エラーの画面が開く現象、保存できなくなる現象が発生しました。

どうも記事内にPHPのコードを入力したあと、この現象が発生するようです。

WordPressではなく、サーバーがエラーを返すということはなんでかなとしばらく調べたところ、よく似た現象が起こった人の情報を発見しました。

読み進めていくと、いろいろと条件が見えてきました。

  1. エックスサーバーを使っている。
  2. WAF設定(不正なアクセスを検知し遮断するWebアプリケーションファイアウォール)を設定している。
  3. PHPのコードを書いたときだけエラーが出るので、何かのセキュリティ関係ぽい。

たしかに先日、WAFの設定をしました。せっかくあるのだからということで全機能をONに。むー、それが原因かー。

waf

さっそく、「コマンド対策」の箇所をOFFにして、しばらくしてからプレビュー・保存すると問題なくできました。10年以上使っているけれど、改めてエックスサーバーの機能のすごさを思い知った感じですー。


WordPressで同じカテゴリーの最新記事を数件表示させる方法。

2018年09月17日 21時00分 正午の月齢:7.8  月名:弓張月(上弦)  潮汐:小潮 月齢:7.8[弓張月(上弦)] 潮汐:小潮
(最終更新日:2022年05月02日)
7年前に投稿 | WordPress | 1件のコメント

4分ぐらいで読めます。

以前は「Similar Posts」というプラグインで関連するような記事を表示していたのですが、PHPのバージョンアップの際にプラグインを使うのをやめました。けど、やっぱり関連記事は表示させたいな、ということで、テーマに直接記述してみます。

参考にしたのはこれらのサイトたち。

それぞれのサイトで少しずつコードの書き方が違います。これらをもとに1件も記事がないときは「同じカテゴリの記事はありません。」と表示させ、時系列どおりに直近のものからタイトルを表示し、自分自身の記事は表示されないようにということで、こんなコードにしてみました。

1 2 3

EdgeとBingのかわりにFirefoxとGoogleを使いたい。

2018年08月30日 21時00分 正午の月齢:19.1  月名:更待月  潮汐:中潮 月齢:19.1[更待月] 潮汐:中潮
(最終更新日:2019年09月02日)
7年前に投稿 | Windows | コメントはありません

3分ぐらいで読めます。

Windows2000には全然かなわないものの、Windows10はそれなりに使いやすいOSだと思っています(少なくともWindows7・8よりはマシ)。さて、Windows10のイヤなところに「何かとEdgeを使わせようとする」「何かとBingを使わせようとする」点があげられます。Edgeは機能がスカスカで使いにくいし(軽いけど)、Bingは的外れな検索結果ばかりだし、もうお腹いっぱい。「bing」と入力して「bing 削除」なんて検索候補が返ってくる時点で検索エンジンとして終わってるよね。

EdgeからFirefoxへ BingからGoogleへ

ところがこの2つは、Windows10に深く突き刺さっていて、なかなかしぶとい。完全に使わないようにしようと思うとひと手間必要です。今回はそのあたりをまとめてみました。

まずはEdgeをヤってしまいます。ふだんはFirefoxを使っていて、もちろん既定のアプリに設定しているのですが、コルタナから呼び出したり(コルタナもふだん使わないけど)、ロック画面に興味深いメッセージが現れたときにクリックしたり、そういうときには既定のFirefoxではなくEdgeがノコノコと嬉しそうに起動してきやがります。この対策として使ったのが「EdgeDeflector」というソフト。そもそもなんでEdgeが立ち上がるのかというと、

Windows10では「設定」アプリの[システム]-[既定のアプリ]画面にある“Webブラウザー”を変更すると、リンクを「Microsoft Edge」以外のWebブラウザーで開くことができる。しかし、パーソナルアシスタント“コルタナ”で開くリンクや組み込みの一部ヘルプリンクの表示には、[既定のアプリ]の設定にかかわらず「Microsoft Edge」が使われる。これはリンクのプロトコルが“http”や“https”ではなく“microsoft-edge”となっているためだ。

本ソフトは、この“microsoft-edge”プロトコルのリンクを、既定のWebブラウザーへリダイレクトするヘルパーアプリ。このソフトを利用すれば、“コルタナ”やヘルプのリンクも好みのWebブラウザーで開くことができる。動作するのはシステムがリンクを受け取った瞬間だけなので、システムに常駐することもない。

“コルタナ”が既定のWebブラウザーを使ってくれない問題を解決する「EdgeDeflector」

ということです。まったくややこしいことを…

使い方は「Cortana のウェブ検索結果を、既定のブラウザで開けるようにする!「EdgeDeflector」。」がわかりやすい説明をしてくれています。

ただ、これだけではブラウザだけ変わっても相変わらずBingの洗礼を受けてしまうので、Firefoxのアドオン「Bing to Google」を入れました。これを入れると、bing.comドメインに一切アクセスできなくなりますが願ったり叶ったり。完全にBingを駆除できて気分爽快!! ちなみに「Bing2Google」というアドオンもありますが、挙動はたぶん同じでしょう。

エックスサーバーでmod_pagespeedを試してみた。

2018年08月29日 21時00分 正午の月齢:18.1  月名:寝待月  潮汐:中潮 月齢:18.1[寝待月] 潮汐:中潮
(最終更新日:2019年09月02日)
7年前に投稿 | ウェブ・IT関係 | コメントはありません

2分ぐらいで読めます。

ひさびさにエックスサーバーのコントロールパネルを見たら、高速化という欄に「mod_pagespeed設定」というものがあったので、なんとなくONにしてみました。

mod_pagespeed設定とは

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。

「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。

この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

本機能を有効にすることで以下のような最適化処理が実施されます。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

など。

ということで、ウェブサイトの表示が速くなるらしい。もっと早く知っておけばよかった…

さて、効果は「PageSpeed Insights」で測ってみました。

1 2

Translate »