最近少しずつブログなどの記事の完成度を高めていっています。

記事の画像を自動でポップアップ表示

最近導入したのが、まず記事の画像を自動でポップアップ表示可能にしました。

それに至った経緯は、記事内に画像の横幅が最大の画像を設定してしまうと、ちょっと画像が大きすぎてサイトのデザイン的に微妙になってしまいました。

横長の画像ならまだ分かるのですが、問題は縦長の画像。毎回縮小してから画像をアップロードすればいいのですが、それも毎回面倒なので、記事内の画像は最大幅を70%とかに固定しました。

ただ、そうなると横長の画像は小さくなりますし、画像内の小さな文字や部分を見たい時に、スマホならスワップで拡大すればいいのですが、パソコンはそう簡単にはいきません。

そこでポップアップ表示を思い付いたのですが、もちろん記事書く時に画像毎にclassとか付けたくないので、PHPやjQueryを使って自動でポップアップ機能を付けました。

自動リンク生成

あと、wikipediaみたいにDBに単語があればリンクにするようにしました。

これも記事書くときに、わざわざリンクしたい文字にリンクタグを入れて保存するといった面倒なことはしなくてよいように、本文にデータベース内の単語があるか自動で判別してリンクを付けるようにしました。

苦手な記事作成も出来るだけストレスなく書くようにしたいので自動だと助かります。

あと一文中に同じ単語があれば、リンクは一つ目だけにするようにしました。

そしてそのリンク文字は色を変えることで強調された語句になり、色鮮やかでデザイン的にも見やすくなりました。

あとそれぞれの単語の前後はひらがたと漢字と句読点のみ対応にしました。

そうしないと複合語などが対象になり、複合語の一部がリンクになってしまうからです。

ランダム広告

それから広告をDBに入れ込んで自動でH4とH5の前にランダム表示するようにしました。

記事は文字だけだと読みにくく、読んでいると途中で疲れます。
特に最近は記事中に広告があるブログが多くなって来ており、それに慣れたせいか、ずっと記事が続くより、定期的に画像などがあった方が気休め的にもなるなと思いました。

そこで、もちろん手動で広告を入れるのは面倒なので、自動でH4とH5の前に広告をランダムに表現させて挟むようにしました。


自分でWordPressプラグインのような機能を作っていくのはすごく楽しいですね。
ちょっとした工夫をするだけで、記事の完成度が上がり、読み手も受け取り方が変わってきます。

なかなかここまで自分でプログラム組んで今風の記事になっていくと、自己満足と達成感もあって、苦手な記事を書くのも楽しくなって来ました。