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による「読みやすく見やすい」リストデザインの作り方

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

まとめ

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

読みやすく分かりやすいリストデザイン

先日サイトをリニューアルしましたが、なかでもリストのデザインには少し凝ってみました。たとえばolタグを使ったリストで作業手順を示す場合、以下のような感じになります。（注釈部分はulの入れ子になっています）

1. 最初の手順を行います。
   最初の手順は□□□です。
2. 次の手順を行います。
   • このとき、まず○○を行うことに注意してください。
3. 第3の手順を行います。
4. 最後の手順を行います。

手前味噌な言い方になってしまうのですが、作業手順が分かりやすく、注釈も入れやすいデザインになったのではないかと思います。

技術系ブログやサイトなどでも、意外とひとつひとつの手順（ステップ）は読みにくいことが多いように感じていたため、こんなデザインを自作してみました。

上記のCSSコード

上記のリストはすべてCSSで実現しています。
以下に、CSSのコードを記載します。

/* olリストデザイン */
.text ol {
	counter-reset: li; /* カウンターリセット */
	overflow: hidden;
}
.text ol > li {
	float: left;
	background: url('images/list_back.png') no-repeat 0px 12px;
	border-bottom: 1px solid #EBEFF5;
	padding: 5px 0px;
	padding-left: 85px;
	text-indent: -70px; 
	font-size: 0.9em;
	width: 500px;
}
	.text ol > li:before {
		content: "Step" counter(li) ".";
		counter-increment: li;
		float: left;
		margin-right: 0px;
		color: #2B313C;
		font-weight: bold;
		display: block;
	}
	.text > ol > li:first-child {
		border-top: 1px solid #EBEFF5;
	}
	
/* ulリストデザイン */
.text ul > li {
	background: url('images/list_back3.png') no-repeat 0px 12px;
	padding: 5px 0px 5px 15px;
}

/* リスト入れ子デザイン */
.text ol li li,
.text ul li li {
	padding: 10px 40px 5px 30px;
	text-indent: 0px;
	font-size: 0.95em;
	border: none;
}
.text ol li li { background: url('images/list_back2.png') no-repeat 10px 17px; }
.text ul li li { background: url('images/list_back4.png') no-repeat 10px 17px; }

コード解説

counterによる連番挿入

ポイントはcounter(li)を使って連番を挿入している点です。
これにより、「Step」という文字と一緒に連番を記載できるようになります。
単純にbeforeだけで文字（Step）を追加すると、連番の左側に文字が追加されてしまうためです。

counterを使うには、まずカウントをリセットする必要があります。
リセットにはcounter-resetを使います。

.text ol { counter-reset: li; }

これでliのカウントがリセットされます。
それから、各liにbeforeとcontentを使って文字（Step）と連番を足します。

.text ol > li:before {
	content: "Step" counter(li) ".";
	counter-increment: li;

counter-incrementを設定することで、liがひとつ増えるたびに自動で数字が増えていく、いわゆる連番が実現できます。

連番部分と文章部分の切り離し

さらに、2行目以降の文頭の位置を、1行目の位置と揃えます。
これにより、手順ごとの区切りをはっきりさせて可読性の向上を目指します。

まず、連番部分と文章部分を完全に切り離すために、それぞれにfloatを設定します。

なぜこんな面倒なことをするかというと、そのまま連番部分にmargin-rightを設定してしまうと、連番の桁数が増える場合（ようするにStep9.→Step10.になる場合）に数字1文字分だけ1行目の文頭がずれてしまうためです。

.text ol {
	counter-reset: li;
	overflow: hidden;
}

.text ol > li {
	float: left;
}
.text ol > li:before {
	content: "Step" counter(li) ".";
	counter-increment: li;
	float: left;
	display: block;
}

私はclearfixはあまり使わない派なので、かわりにolにoverflow:hiddenを設定しておきます。

それから文章部分（li）と連番部分にそれぞれfloat:leftを設定します。
また、beforeで追加された連番部分はdisplay:blockでブロック要素に変換しておく必要があるので注意してください。

text-indentによる文頭位置の調整

floatの設定が終わったら、text-indentを使って文頭位置を調整します。
といっても正確にはtext-indentだけでなく、paddingやmarginも含めて三つの数字を設定する必要があります。

まずpadding-leftで全体を右にずらします。
さらに、text-indentをマイナス数値で設定して一行目だけ左に移動します。

ただし、そのままだと文章部分まで合わせて移動してしまい、連番と文章が重なってしまいます。
なので、最後にmargin-rightをtext-indentと同じ量だけ設定します。

.text ol > li {
	float: left;
	padding-left: 85px;
	text-indent: -70px; 
}
	.text ol > li:before {
		content: "Step" counter(li) ".";
		counter-increment: li;
		float: left;
		display: block;
		margin-right: 70px;
	}

以上でリストデザインが完成します。
あとはborderや文字サイズなど、お好みで設定してください。

そのほか入れ子になっているリストの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にキーワードを英語で入れた方が後々管理が楽だと思います。