iPhone, iPad, iOS / Macintosh, MacOS / プログラム公開 / ホームページ, ブログ / 我が家のイベント

ホームページのリニューアルから1ヶ月、トライアル・アンド・エラーで完成に至る！

公開済み 2020年2月4日 · 更新済み 2020年1月15日

昨年末に、ブログ POOH’ Talk のデザインを一新したわけですが、実を言うと、自分自身で運営しているホームページ的には、2点大きな課題が残っていました。

1点目は、ブログのURL”https://min2club.com/talk/”を”https://min2club.com/”に変更したい。

2点目は、ポータルサイト的に公開している”THE POOH FILES” (https://min2club.com/)のデザインが古臭いので一新したい。

1点目の課題が解決できれば、2点目の課題に取り組む必要がなくなるので、まずはURLの変更にトライしてみました。

< URLのリダイレクト >

“リダイレクト“は、特定のURLにアクセスすると、予め指定しておいた別のURLに自動転送する仕組みです。リダイレクトを活用すれば、”https://min2club.com/”を”https://min2club.com/talk/”に自動転送できそうなので一番お手軽かなあ？と思い試してみました。

リダイレクトの方法はいくつかあるそうですが、Google検索などに影響しない”301 リダイレクト”という方法が一番オススメらしい、ということなので、実際に試してみました。

ルートディレクトリ上の”.htaccess”というファイルに、リダイレクトの指示を書くだけです。

POOHの例で言うと、

ページ単位でリダイレクト設定する場合は、

RewriteEngine on
RewriteRule ^https://min2club.com/$ https://min2club.com/talk/[R=301,L]

ディレクトリ単位でリダイレクト設定する場合は、

RewriteEngine on
RewriteRule ^(.*)$ /talk$1 [R=301,L]

といった具合です。

実際に対応してみると、確かにリダイレクトが想定通りに行われ、ブログ内のリンクにも影響していないので、一見すると問題なさそうに思えました。

但し、ブログ以外のページやリソースにアクセスしようとすると、各URLに”talk”が入れ子構造で沢山追加されてしまい、正しくアクセスできなくなってしまいました。もしかすると、こういったケースへの対策があるのかもしれませんが、ネット検索では具体的な事例を見つけることができず、リダイレクト方式は断念しました。

< WordPress を専用ディレクトリに配置 >

次なる方法は”WordPress“独自のやり方で、既存のサブディレクトリを使ってルートディレクトリに表示するやり方です。

具体的な手順は、WordPressの公式オンラインマニュアル “WordPress Codex“に掲載されている”WordPress を専用ディレクトリに配置する“で分かりやすく解説されているので、そちらを是非ご覧下さい。

細かいところは割愛しますが、解説通りに作業すれば、リダイレクト方式と同様、ブログのURLが”https://min2club.com/”に変更できました。

ただ、この方法の場合、ルートディレクトリ上の”index.html” (ポータルサイト用として配置していたモノ)から”index.php” (WordPressのモノ)に置き換えることになるので、POOHの場合、”Jetpack“のヘルスチェックでサイトがダウンしているような状態になってしまいました。

更に、ブログの各記事のURLも、従来の”https://min2club.com/talk/xxxxx”から”https://min2club.com/xxxxx”に変わってしまうので、これってGoogle検索的に支障ないのかなあ？と心配になってしまいました。

恐らく、”Jetpack“のヘルスチェックの対応策やGoogle検索問題に関する対応策などはあるのかもしれませんが、そうそうゆっくり検討する時間がなかったので、今回は元の状態に戻すことにしました。多分、ブログ立ち上げ時点であれば、この方法はとても有効だと思いますが、ある程度、運用実績があるサイトの場合は、事前に十分な検討が必要な感じがします。

< ポータルサイトのデザインを一新 >

他にも有効な方法があるのかもしれませんが、何分素人なので、ここは順当に、2点目の課題であるポータルサイトのデザインを一新する方法に舵を切ることにしました。

これまで公開していたサイトのデザインは、”RapidWeaver“のバージョン 6辺りで作成したコンテンツです。

RapidWeaverで利用できる”Stacks“というブロック構造でデザインを組める方法でコンテンツを作成したのですが、バージョンが古かったこともあり、スマホやタブレット端末でも見やすいユニバーサルデザインにはなっていないので、Google検索的にも評価が低くなる可能性が高いという心配を抱えていました。勿論、デザイン的に決して見栄えのするコンテンツではないので、スマートでシンプルな今風なデザインに変更したいと、常々思っていた次第です。

昨年のブラックマンデーセールで、RapidWeaver本体は最新版にバージョンアップしたのですが、”Stacks”はそれなりのお値段なので、ここは何とかRapidWeaverの基本機能の範囲で新しいデザインのポータルサイトが作れないかなあ、と悪戦苦闘しながら制作してみました。

そんな経緯を経て完成したのが、現在公開している新しいデザインです。勿論、ユニバーサルデザイン仕様です。

新しいポータルサイトは、全体的に大人な雰囲気のするデザインに仕上げたかったので、一昨年に”若洲海浜公園” (“OLYMPUS OM-D E-M1 MarkIIのライブコンポジットでヒコーキの軌道の撮影に挑戦！ “若洲海浜公園” (4)“)で撮影した風景写真をメインに据えて、

2ページ目の右上には、”伊丹空港“の千里川土手で撮影した写真 (“季節が良くなってきたので伊丹空港でヒコーキを夜間撮影してきました (2) “千里川土手での夜撮””“)をアクセントで採用してみました。

それと、コンテンツは限りなくシンプルにしたかったので、今回初挑戦の”Markdown“で記述してみました。

< ブログのデザインも一新 >

正直なところ、微々たる広告収入でホームページやブログの運営費用 (レンタルサーバーとドメインの維持費用)をまかなっているので、Google検索のヒット率と適度な広告の掲載はとても重要です。

ただ、これまで”WPtouch Mobile Plugin“というプラグインで見栄えの良いモバイル向けの画面を提供してきたのですが、このプラグインの欠点は標準のままでは広告を掲載できないので、今回のホームページリニューアルに合わせて、ブログで使っている”Hueman“のままでモバイル対応をすることにしました。