Sabakura Blog

先日、当サイトのデザインをリニューアルしました。
といっても細かいところで不備があったりして、まだちょくちょく修正中ですが。

さて、今回WordPressでサイトをリニューアルするに当たっては多くのサイト・ブログの情報が役に立ちました。というわけで、これからサイトデザインを一新しようと考えているの方への参考、および自分自身への備忘録もかねて、どんなページが役立ったかを一覧にしておきます。

ウェブデザイン

デザインを考えるのに役立つ記事・サイト

・WebデザイナーにおすすめのEvernote活用術 – Webクリエイターボックス

本エントリーの半分ぐらいは上記記事を紹介するためといっても過言ではないです、というぐらいに役に立った記事です。

詳しいことは記事を直接読んでもらえればと思うのですが、簡単に言うと、良いと思ったデザインのページはバシバシとキャプチャ（スクリーンショット）して、Evernoteに溜めていこう！というものです。

この「良いと思ったデザインはとにかく溜めていく」というのが非常に参考になりました。デザインの丸パクリはもちろんNGですが、他の方のセンスを良い意味で盗むためのベストな方法ではないかと思います。

なお、私自身はEvernoteはプレミアムでない上にサイズ縮小するのが面倒だったので、Dropboxにどんどん放り込んでいます。

また、ページ全体の丸ごとキャプチャも使いますが、細かな見出しのデザインや、画像へのさりげないドロップシャドウなど、気になった部分はパーツパーツで取り込むようにしています。

・配色に自信がなくても！Webデザインが好きになる配色ツールと使い方

同じくWebクリエイターボックスさんの記事から。配色についてのツール紹介と使い方です。私も一応カラーコーディネーター資格を昔にとったんですが、そのときに勉強したことをあらためて思い出したりしました。

・kuler – Adobe

前述の配色ツール紹介記事でも紹介されている、Adobeによる配色パターンの投稿サイト。すべてそのままの配色が利用できることは少ないと思いますが、どういう色の組み合わせが美しいか勉強になります。

・ikesai.com

イケてるサイトのデザインばかりを一同に集めたサイトです。ブログデザインなどの場合は「ポータル・ブログ」のカテゴリが参考になります。

・見出しデザイン

こちらは見出しのデザインばかりをまとめてくれているサイトです。h2～h6あたりの見出しタグのデザインを考える際に有用です。

・素人っぽく見えないドロップシャドウのつけ方 – FIREWORKS BROS

Fireworksによるドロップシャドウのつけ方の解説です。とはいえ、Fireworksにこだわらずとも、ドロップシャドウ自体の綺麗なつけ方について、非常によくまとまった記事だと思います。

素材サイト

・Styraise

すべて無料の素材配布サイトです。その上素材データがPSDおよびPNGの両方で配布されていますので、簡単に加工をすることができ（加工もOKのサイトです）、使い勝手が非常に良いです。実際、今回はほとんどのサイトをこちらから使わせてもらいました。

・デザイン素材.com

こちらはとくに16×16や32×32のアイコン素材が豊富な素材サイトです。こちらからも何点か素材をお借りしました。

WordPress ＆ JavaScript ＆ CSS

・Wordpress オリジナルテーマの作り方 3.0+ – Webクリエイターボックス

またまたWebクリエイターボックスさんの記事から。WordPressのテーマの作り方としては、この記事がいまのところ一番分かりやすいものではないかと思います。

・get_terms – 私的WORDPRESSマニュアル

WordPressのget_terms関数についての詳しい説明です。

WordPressにはcategoryやtagなど様々なものがありますが、じつはこれらはすべてtermオブジェクトの一種であるため、get_terms関数が理解できると、他のget_the_categoryなどの関数を使わなくても様々な処理ができます。

この辺りのことはまた記事にしたいと思います。

・表示内容の切り替え(JavaScript) – KANTENNA

JavaScriptを使って表示内容を切り替える方法です。
コードの行数はやや多いですが、非常に単純で分かりやすく参考になりました。

・CSSによる「読みやすく見やすい」リストデザインの作り方

おまけで自サイトの記事から紹介です。可読性の高いリストデザインの作り方について解説しています。

まとめ

このほかにも多くのサイトを参考にさせてもらいましたが、ここではとくに役立った記事に厳選して紹介させてもらいました。ありがとうございました！
そしてまた、この記事がこれからサイトを作ったりリニューアルしようと考えている人のお役に立てれば幸いです。

サイトリニューアルに伴ってカテゴリ構成の見直しを行ったのですが、これに際して「WordPressのパーマリンクURLにはカテゴリ名を含めないほうが良い」という結論に達しました。

なぜカテゴリ名を含めない方が良いか

WordPressではカテゴリ名を含めたURLにしていると、後からカテゴリ変更を行った場合に、URLそのものが変更されてしまいます。

たとえばですが、WordPressの「All in One SEO Pack」プラグインの設定に関する記事を書いたとして、これをWordPressカテゴリに分類するのか、それともSEOカテゴリに分類するのか（あるいはその両方か）、といったのは難しい問題です。

無論、タグで両方とも紐づけることもできますが、個人的にはカテゴリはカテゴリとしてきちんと分類したいので。

当初はWordPressに分類していたのに、後になってからSEOに分類しなおしたりすると、URLが以下のように変わってしまいます。

～/wordpress/123　→　～/seo/123

そうすると、はてブやTwitterなどのカウントもすべてリセットされてしまいますし、これまでの被リンク効果も薄れてしまう恐れがあります。

リダイレクトを色々といじることも考えたのですが、そんな複雑なことをするぐらいなら、たぶん最初からカテゴリ名を含めない方がスマートです。

パーマリンクURLの設定変更

カテゴリ名を含めず、シンプルに記事IDのみの表示（.htmlは付加）だけにします。

1. WordPressのダッシュボードを開き、「設定」→「パーマリンク設定」をクリックします。
2. 「カスタム構造」にチェックを入れます。
3. 「/%post_id%.html」と入力
4. 「変更を保存」をクリックします。

そもそもなぜカテゴリ名をURLに含めていたのか

これまでカテゴリ名をURLに含めていたのは、ささやかなSEO対策のつもりでした。

URLにキーワードを入れても検索順位上昇にはほとんど貢献しません。しかし、少なくともキーワードを含めておけば、検索結果でキーワードが太字表示されて目につきやすいと言われているため、これまではカテゴリ名を含めていました。

しかし、今回URL変更に伴う問題を認識したおかげで、そんな微々たる効果のためにカテゴリ名を含めるぐらいなら、いっそ省略したほうが良いという結論になりました。

なお、どうしてもURLにキーワードを含めたい場合は、毎回面倒でも投稿時に手動でパーマリンクURLにキーワードを英語で入れた方が後々管理が楽だと思います。

WordPressを使っていて、特定のカテゴリの投稿記事だけ、日付などの情報を消去したい場合があります。このような場合、jQueryを使うと簡単に実現できます。
（カテゴリ別の指定ではなく、タグ別の指定も行えます）

どういった場合に便利？

たとえばこのサイトでは、レンタルサーバーのレビューを固定ページではなく投稿として追加しています。しかしこの場合、日付情報はあまり重要ではありません（随時更新しているため）。

WordPressのプラグインのなかには投稿から固定ページへの変換を行ってくれるものもありますが、投稿ではタグ付けが行えるのに、ページではタグ付けが行えないなど、そのまま変換するのはためらわれる場合も多いです。

そこで、かわりにjQueryを用いて不要な情報だけを消去にすると便利です。

例：jQueryを用いて日付情報を非表示にする

jQueryでは、CSSのクラス・IDを用いてコンテンツを操作するため、まずカテゴリや日付情報の部分にクラスを指定しておきます。

カテゴリにクラスを指定

まずsingle.phpを開き、記事のカテゴリが表示されている部分にCSSのクラスを割り当ててください。具体的な例を以下に示します。

<p class="category"><?php the_category() ?></p>

日付情報にクラスを指定

同様にsingle.php内で、日付情報が表示されている部分にCSSのクラスを割り当ててください。

<li class="date">更新日：<?php  the_time('Y年m月d日') ?></li>

ヘッダーにjQueryを追加

次にheader.phpを開き、以下のようにjQueryのスクリプトを追加します。

<script type="text/javascript">
jQuery(function() {
	//.category内のaタグのhref要素がcookingまたはrecipeであれば
	if (jQuery(".category a").is("[href*='cooking'],[href*='recipe']")) {
		//.dateタグ内の要素を削除
		jQuery(".date").remove();
	}
});
</script>

なおWordPress内でjQueryを使う場合、上記のように「$」記号は「jQuery」に置換して記述します。これがスマートでない場合は、以下のように書き換えてもらってもOKです。
（参考：WordPressでjQueryを動かす方法）

<script type="text/javascript">
jQuery(function($) {
	if ($(".main_nav a").is("[href*='review'],[href*='select']")) {
		$(".date").remove();
	}	
});
</script>

検索エンジンスパムに該当しないか？

このような画面上の情報消去は、検索エンジンに対しての情報を操作する検索エンジンスパムだと誤解される場合があります。

実際、CSSの「display:none;」を利用して特定の文字列を人間には見えないようにするのは、この検索エンジンスパムに該当してしまいます。
これは「display:none;」は人間にはその文字列が見えないにもかかわらず、検索エンジンには見えているためです。

しかし、jQueryのremove()を使う場合、HTMLそのものから文字列を削除するため、その文字列は人間にも検索エンジンにもまったく認識されません。（逆に言うとインデックスさえされません）。

そのため検索エンジンの評価を操作しようとする要素はまったくないため、スパム行為に該当することはまったくないので安心してください。