当ブログはWordPressで運営中。５ヶ月前のブログ開設時からずっと、テーマはSimplicityという無料のものを使っている。
Simplicityを選んだ理由は、右も左もわからない当初にあれこれ調べたところ、無料テーマであればたいていのサイトでこちらが勧められていたからという理由だけ。とはいえ、SimplicityはSEOの対策も標準でばっちりとされており、良い選択だったと思っている。
目次
ブログのカスタマイズ記事を個別であげてきたので、まとめる
一週間ほど前に、数日間かけて当ブログのデザインをずっといじっていた。まあ、数日間ずっとカスタマイズしていた割には、大して凝ったことはして（出来て）いないんだが、どうかそんな意地悪な指摘はしないで欲しい。
自分なりに色合いの調節や、線の太さなど、だいぶ試行錯誤していたのだ。そして、その結果、確認のため自分のサイトを見すぎて、一瞬だけサーバーがパンクしたり、人気投稿の順位を変動させてしまうという、アホなこともした。
それはさておき、数日間頑張った甲斐もあって、自分的には、「なかなかかっこよくなったんじゃないかな」と満足している。
というわけで今回は、自分が当ブログを開設して以来、行ってきたカスタマイズの総括記事を書こうと思う。ただし、自分でもどこをいじったのか忘れている箇所もあるので、あくまで参考程度に。
また、当ブログを定期的に見ていただいている方なら知っていると思うが、先日から小出しで、項目ごとに特化したWordPressのカスタマイズ記事を書いてきたので、説明が細かくなる項目は、そちらの方を見て頂きたい。（元は、下書きの段階でこちらの記事にずらっと書いていたら、めちゃくちゃ長い記事になったので、このような手法を取ることにした次第）
Simplicityの標準機能でカスタマイズできる項目
まずは、Simplicityの標準で備わっている機能で、いじれる項目から。別にカスタイズというほどでもないかもしれないが、CSSを追加やプラグインを導入しなくとも、これらをちゃんと設定するだけで、インストール時とは見違えるような外観になる。
色項目
配色は、もっとも基本かつ難しいカスタマイズ、というか調整だと思う。あまりこのような美的センスがあるわけではないが、精々自分なりに拘った。詳しくは、以下の記事を参照して欲しい。
ヘッダー部分のデザイン
とにかくヘッダーは、サイトを開いた時に一番に映る場所のために拘った。以下が僕の設定。
ヘッダー背景画像 PC・モバイル
ヘッダーの画像は、「ヘッダー外側背景画像」という、仮面幅いっぱいに広がるヘッダーを設定してある。ヘッダーの高さはデフォルトよりも高めに200pxに設定。
モバイルのヘッダーも、同じく画面幅いっぱいに広がる「モバイルヘッダー背景画像」を設定している。こちらはデフォルト通り、0pxのまま。
画面幅いっぱいのヘッダー画像の設定について詳しい設定方法は、Simplicity公式の、こちらのページを参照。
ロゴを画像にする
ブログのタイトルである「yagichon」は、実はテキストではなく、ロゴ画像。PC・スマホともに、テキストでのタイトルよりも、デーンとインパクトがあって、気に入っている。やっぱりヘッダーくらいは大きく主張したいものだ。
ロゴを作成したのは以下のサイト。よく利用させてもらっている。
フォントは「Playfair Display」という、割りと新しめのものを使っている。英語のフォントといえば、馬鹿の一つ覚えとはこの事のように、Times New RomanかArialしか使ってこなかった僕にはなかなか新鮮。スペイン版のVogueのサイトにも採用されているフォントとのこと。
なお、ロゴをより細かく作り込みたい人は、言うまでもなく「Adobe Illusrator」とかを使って作るべし。僕のは所詮、文字だけのロゴなので。
グローバルナビ
グローバルナビは、画面幅いっぱいのヘッダー画像に合わせて、こちらも横幅いっぱいに設定。ただチェックを入れるだけで簡単。
なお、デフォルトのグローバルナビだと、少々印象が薄かったので、スキンで「ビジネスメニュー」を選択している。
背景画像
薄めの木目調に設定。詳しくは先ほどもあげた、以下の記事を参照して欲しい。
レイアウト （全体・リスト）（投稿・固定ページ）（モバイル）
レイアウト項目は、デフォルトのままにしているものも多いが、いじったのは以下の箇所。
完全レスポンシブル表示を有効
「パソコンとモバイルでシームレスな完全なレスポンシブデザイン表示になります」とのこと。とりあえずチェック。ただし、チェックを外しても自分のスマホなどでは変化はなかったと思う。
グローバルナビを表示
殆どのワードプレスをブログ形式で使用しているひとは、グローバルナビを表示しているのでは？ もちろんチェック。
サイドバーの幅を336pxに
サイドバーの幅をデフォルトの300pxから、336pxに。こうすることで、大きめの広告が表示されるんだとか。（がめつくてスマン）
サイドバーを広くした分、サイドバーに設置しているプロフィール画像なども、横幅に合わせること。
サイドバーの背景を白色に
やっぱり情報（文字）がある箇所の背景は、白のほうが見やすいと思ったので設定した。
本文文字サイズ（PC・スマホ）
パソコンを17px、スマホを17pxと、それぞれ文字サイズをデフォルトよりも一段階大きくしている。自分のブログは、割合文字数が多いので、せめて読み易いように思って。（あと、自分が書く内容が、おそらく同年代だけでなく、中高年の人にも読まれるだろうという配慮から。所謂老眼対策である。）
投稿者情報をTwitter IDに
こんなのは本当に好みで。自分の場合は、アルファベットでyagichonと表示するくらいなら、@yagi_chonにしても、いいだろうと思ったから。
もし、投稿者情報を、WordPressのユーザーIDそのままにしていたら、それは危険なので、まずはすぐにニックネームにしましょう。
[前ページ] [次ページ] ナビタイプ を「サムネイル付き」に
サムネイルがあったほうが、他の記事も見てくれる率が上がると思ったので。
タブレットはモバイル表示
ここは好みが別れるところだと思う。サイト主からすれば、大画面のタブレットなら、ちっぽけなモバイル表示よりも、PCと同じ画面を見て欲しいところ。実際、タブレットではPCと同じ表示のブログサイトが多いと思う。
とはいえ、やっぱりタブレットの画面だとモバイル表示のほうが見易いと思ったので、モバイル表示に設定した。そもそも、ここで設定する以前に、上の「完全レスポンシブル表示を有効」にチェックをした途端、僕のタブレット(iPad mini 2)はモバイル表示になった。
モバイルメニュータイプ
アコーディオンツリーに設定。こちらのほうがウェブに慣れ親しんでいないライト層にもわかりやすいと思う。
ブログカード（内部リンク・外部リンク）
実を言うと、この機能自体つい最近知った。内部リンクに関しては、標準で有効化されていたと思うが、外部リンクに関しても有効化した。ブログカードとは何かと言うと、以下のようなリンクの設定のこと。詳しい説明は、Simplicity公式のページを参考にして欲しい。
ファビコン・アップルタッチアイコン
それぞれ同じ画像を設定。現時点での当ブログイメージカラーの紅海老茶色の背景に、「ya」と書いただけの至極シンプルなものだが、とりあえずあるということが大事なのだ。
デザイン（yaだけだけど）は、先程もあげた以下のサイトで作成。出来上がった白文字に、GIMPで背景を設定した。
前までは以下のような山羊のイラストをアイコンにしていたが、ファビコンなどの小さいサイズだと、正直何が書かれているかまるでわからなかった。イラストレーター使って作り込めるスキルのある人以外は、ただの文字くらいにしておいた方が無難だと思う。
ちなみに、他のテーマだと、これらのアイコンを設定するのがどうやら面倒くさいようだが、Simplicityはとても簡単にできるので、助かる。
サイドバーウィジェット
サイドバーに設置しているのは、検索・プロフィール欄・SNSフォローボタン・カテゴリー・新着記事・人気記事・Twitterタイムラインという、比較的少なめの構成。なお、上記したように、サイドバーの幅は、336pxとデフォルトよりも広くしてある。
プロフィール欄
ここもまた、文字通りサイトとそのサイト主の顔である。僕はここにSoundCloudの楽曲と、Twitterのフォローボタンを設置している。
SoundCloudとTwitterのフォローボタンの貼り付け方は、それぞれ以下を参照して欲しい。
Twitterタイムライン
タイムラインについては、それ自体をサイドバーから読ませたいのではなく、あくまで僕がTwitterをやっているということが示せればいいので、小さめに設定し、埋め込んだ。こちらについてはフォローボタン同様、以下を参照して欲しい。
CSS追加編
ここからは、WordPressのスタイルシートにCSSコードを追加するカスタマイズ方法。といっても、実際にやってみると、文字で受ける印象よりも簡単なので、どうか怯まずに挑戦してみて欲しい。CSSを追加する方法については、以下の見出しタグ・サイドバーのタイトルタグのカスタマイズ記事に書いているので、わからなければそちらを参照して欲しい。
カエレバ・ヨメレバツールのデザインのカスタマイズ
カエレバ・ヨメレバといえば、Amazonアソシエイトなどに参加している人ならば、多くが利用しているツールではないかと思う。僕は、当初はデフォルトのデザインのままで使っていたのだが、やっぱりもうちょっとだけ目立つようなデザインにしたくなり、変更した。
といっても自分でCSSコードを書き上げるような技術は生憎持ち合わせていないため、人様が公開しているものをコピペして使わせて頂いている。色々試した結果決めたのは、以下の方のもの。こちらに決めた理由は、今まで貼り付けていた楽天koboにも、デザインが設定されてあったため。感謝。ちなみに、僕は使っていないが、トマレバにもカスタマイズされている。
カスタマイズ後のデザインは以下のような感じ。楽天koboまでちゃんと表示されている。（と言いつつ、先日読んだSEOの本を取り上げる）
見出しタグ・サイドバーのメニュータイトルのカスタマイズ
Simplicity標準の見出しタグはとてもシンプル。これはこれで、本文を邪魔にしないという良い面はあるけども、もうちょっとばかし洒落気を出したかったので、サイドバーのメニュータイトルと共に、この度カスタマイズした。詳しくは以下の記事を参照して欲しい。
プラグイン編
デザインを変更するプラグインの類は、今のところ一切導入していないのだが、問い合わせページとサイトマップ、目次についてはプラグインで作成しているため、一応プラグイン名だけ列挙しておく。
コンタクトフォーム Contact Form 7
問い合わせページは、サイトを開設してすぐに設置した。Contact Form 7という、大定番のプラグインでらくらくに作成。
サイトマップ作成 PS Auto Sitemap
サイトマップがあるとユーザービリティが高くなるらしい。まあ確かに、僕も他のサイトでサイトマップを頼ってページを手繰っていったことは何度かある。
SEO的にもいいとのことで、一応設置したサイトマップは、「PS Auto Sitemap」というプラグインを使って、自動的に作り上げている。設定方法など詳しいことは、以下のバズ部のページなどを参考に。
ちなみに、検索エンジンのクローラーのための、XMLサイトマップについては、これまた定番の「Google XML Sitemaps」というプラグインを使っている。
目次作成 Table of Contents Plus
記事の目次を自動的に生成するTable of Contents Plus。
このプラグインに関しては、まさにたった今導入した。個人的には、個人のブログ程度では、目次を使う必要性はさほどないと思っているのだが、流石に当記事みたいな内容だと、目次があった方が見やすいだろうなと思い、導入した。でも、そのうち消してしまうかもしれない。
終わりに
何よりも僕自身がWordPressの初心者であって、未だ試行錯誤を重ねている。とはいえこんな僕でも、導入から数ヶ月が経って、一応外観は他のブログサイトと比べても、そんなに劣らないサイトに仕上げられたので、WordPressを始めたばかりで、どう仕上げればいいか右も左もわからない人がいれば、参考にしてくれれば幸いである。
また、ここに至るまで、多くのSimplicityのカスタマイズ記事をググっては見てきたので、その他にもどのような定番カスタマイズがあるかは一応知っている。例えば、フォントをWebフォントにするとか、トップに戻るボタンを他のデザインにするとか。
ただ、正直それらをやる意味は、僕には見出せないので、今のところは手をつけていない。まあ、あんまりごちゃごちゃいじっても、単なる製作者のエゴだけだしね。
無料テーマならSimplicityはお勧め
他のテーマをまともに使ってないので、あまり公平な意見ではないが、個人的には、Simplicityは初心者にも充分お勧めできるテーマだと思っている。基本設計がシンプルなだけあって、使い出した時こそ味気ないとはいえ、自分でカスタマイズをしていくことによって、充分有料テーマに負けずとも劣らないデザインのサイトに仕上げることができる。
何より使っている人が多いので、ググれば大抵、解決策が見つかるのが素晴らしい。（その反面、在り来たりな外観になりやすいところはデメリットか。人のブログやアフィリエイトサイトを見ていて、Simplicityを使っているものはすぐにわかる）
ともかく、僕はSimplicityを選んで良かったと素直に思っている。
コメント