WEBデザイナーがこっそり公開!ワードプレスをビジネス用WEBサイトにカスタマイズする10のツボ

store
仕事がWEBデザイナーなので、WordPressのカスタマイズをする機会が多いのですが、今回の制作のポイントをメモ。同業者の方やこれからWEBデザインをする人達にも役に立てるかも知れません。私も人のWEB上の情報から学んで来たのでこういうことはギブアンドテイクで当然との気持ちで。

ブログのカスタマイズをポイントだけかいつまんで解説すると、簡単そうだと思うものですが、そのポイントがわかるまで試行錯誤があります。シンプルなWEBデザインになればなるほど、アラも見えやすく、なかなかそういうアラを潰すのに時間がかかります。制作したブログを宣伝する目的では無いのでご了承下さい。お役に立てれば幸いです。

カスタマイズのツボ:1 使う人を見極める


https://matome.naver.jp/odai/2139683482819919301/2139684074127028703
ワードプレスを「使う人は素人」

ブログをデザインするのでは無く、WordPressをCMS(Content Management System)として使うのが目標であり、そこが業務で請け負うのと個人的にブログを作るのとでは異なってくる。「自分はWEBのプロでも使用者は素人」これを忘れてはならない。

左のWEBは今も現役で使用されているドメスティック・ブランドのセレクトショップのWEBサイト。通販とブログを一体化した設計。


https://matome.naver.jp/odai/2139683482819919301/2139684074127028803
使用したテーマファイルについて

今回のWEBはサンキャッチャー作家さんのオフィシャルWEBサイト。CMSとしてWordPressを使用する。使用したテーマはnikeoという海外のデザイナーのCustomizrというテーマ。

自分で使うブログならなんでもいいのだがクライアントが使う場合、メンテナンス性に優れたものを探さなければならない。


https://matome.naver.jp/odai/2139683482819919301/2139684315229293403
ほぼ最高レベルのWPテーマ

決定するまで10数個テーマをテストしたが、Customizrは現在、ほぼ最高レベルの無料テーマだが、デザインが冗長で削ぎ落とす必要あり。しかし、基準は見た目よりもメンテナンス性。

Customizr – Demo
http://demo.themesandco.com/?fp_unlimited=true
Customizr
http://www.themesandco.com/

「ワードプレスのクールなテーマファイル」とかのリストがありますが、ああいうので作って上手く行った試しはありません。見た目のカッコ良さに騙されて、作業を開始して後悔することが昔はよくありました。wordpress.orgで推奨されているテーマは見た目だけで推奨されているわけではありません。テーマの見極めも経験ですが、目的に応じたテーマを見抜ける様になりましょう。

Free WordPress Themes
http://wordpress.org/themes/

カスタマイズのツボ:2 作業時間の配分


https://matome.naver.jp/odai/2139683482819919301/2139684074127028903
重視すべき部分はなにか?

アーティストの生命線は作品。ギャラリーが命と言って良い。日々のブログで苦労話を書かせるようなやり方も悪くは無いが、アーティストはクールでありたいもの。

このデザインはテーマファイルのデフォルトで作っている。元は四角いタイルが並ぶCSSだが、丸くなる様に細工しただけの手抜き仕様だが、元のデザインがしっかりしているのでギャラリー用プラグインを入れなくてもOK。下記に円形にするCSSを記述。重要な部分だとしても、作業の時間配分を考え、適切な時間で仕上げることを意識するのがプロとしての仕事。

/* 円形画像 */
.gallery-item img {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-transition: -moz-transform 3s ease;
-webkit-transition: -webkit-transform 3s ease;
-o-transition: -o-transform 3s ease;
transition: transform 3s ease;
border-radius: 300px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
}

カスタマイズのツボ:3 企業系サイトでもありがちな要求


https://matome.naver.jp/odai/2139683482819919301/2139684171527967803
ポスト記事でブログとページを作る
ブログ記事(ポスト記事)と一般的な記事の違いは日付だろう。しかし、固定ページだと連続で読ませるサイドバーを作らせる仕様にするのとNext、Prevのページ送りが面倒。その為、カテゴリIDが5番の場合はCSSを日付の周りで書き換えることで、日付と著者名の非表示を可能にした。ID5番はブログ記事投稿だが、ページ的に表示したいカテゴリだった為。customizrテーマをカスタマイズするときのご参考になれば。

/public_html/wp-content/themes/customizr/parts/class-content-post_metas.php

/*class-content-post_metas.php 50行名あたりを改造。 */