ホームページ更新中です。

　今日は、みやこ事務所のホームページ更新作業に関するお話しです。
　行政書士事務所的なホームページにしよう！と取りかかったリニューアル、出来上がってみれば完全にブログライクなテイストになっています。本日のお話しは、ホームページ更新に関する独白ではありますが、士業者の皆様方のご参考にして頂けるよう、率直なトコロを書いておきたいな、と思います。

ホームページ更新の経緯

　ホームページをアップロードしてから１年以上が経ち、今回修正に至った訳ですが、リニューアルに踏み切った理由は幾つかあります。

　ここで重要なポイントは、やはり見出しタグの変更ではないかと思います。私は、Wordpressのテーマを見るとき、必ずと言っていいほど、その見出しにh1タグが使われているのかh2タグが使われているのかを確認します。
　SEOフレンドリーを謳っているテーマであっても、タイトルにｈ２タグを使っているテーマが散見されますが、私の考えでは、やはり各頁のｈ１タグでマークアップすべきは、そのタイトルであるべきではないかと考えており、今回は、そのスタンスで構造を見直しています。

士業サイトに必須となりつつCSS3

　士業者のサイトにおいてもスマートフォン表示の最適化が必須と言える時代になっていますが、スマートフォンでの表示を考えるなら、CSS3を用いたスタイリングは避けて通れません。特に、問題となるのは見出し背景の設定です。

日本的な見出し背景

　従来、日本におけるビジネスサイトでは、見出しにグラデーションを少し取り入れた背景を使うのが通常でした。

　このような見出し背景は非常に多く用いられており、デザイン的にも文章を区切る上でも効果的です。ただし、このように、見出しの背景全体に画像を用いた場合、多くのサイズがあるスマートフォンやタブレットで最適に表示させることが困難です。それは、（すくなくとも私の力量では）見出しの背景画像は大きさを可変させる手法がないためです）。
　クラス設定を工夫し、見出し背景のように見せることは可能ではあるでしょう。しかし、見出しそのものに「background」プロパティを用いて画像背景を設定した場合は、レスポンシブレイアウトに対応することがなかなか困難です。

見出しを格好良くする工夫

　しかし、この見出し背景に関する問題は、実はいとも簡単に解決することも可能です。レスポンシブとして設定しているブレークポイント毎に、見出しを設定してやればそれで簡単に解決します。スマホサイズでは背景をなしにして「border」プロパティを少し工夫すれば、それなりの見出しができます。
　そこで、私が取った手法ですが、今回、このリニューアルでは、タイトルの画像的な背景を、CSSを使ってレイアウトしました。

　タイトルの背景、右側の「後遺障害等級認定」のバナーはともにCSSでスタイリングしています。

ＳＥＯ

　Wordpressは、それを用いていること自体が、ＳＥＯ対策の一つになっている、と私は考えています。しかし、HTML5では、より構造分かりやすく伝えられるマークアップができるようになっていますので、それを使わない手はないでしょう。この先、ウェブがどうなっていくにせよ、コンテンツに沿って丁寧にマークアップしていくことはＳＥＯにとってプラスにこそなれ、マイナスになることは絶対にないと思います。
　そういう意味では、サイトの軽量化とか、ヘッダー自体をもっとシンプルにするとか、色々とやるべきことはあるのでしょうが、一応ここは行政書士事務所のホームページですので、その分野でのコンテンツの充実が一番大切であることは言うまでもありませんね。

まとめ

　以上、ホームページ更新の途中経過をまとめました。アイキャッチの制作が追いついてないので、まだしばらく時間がかかりそうですが、よい情報を発信し、見た目も楽しんで頂けるサイトにしていきたいな、と思いつつ作業しています。