育て方

WordPressブログの育て方―デザイン編―

投稿日:2017年11月11日 更新日:

WordPressブログの準備は大変

こんにちは、雪樹(@yuki62533)です。

前回、WordPressでブログの準備をする記事を書きました。

何の知識もない雪樹が、理想に近いWordPressブログを作るのに、いかに苦労したのかを書いています。

そして、そんな雪樹を救ったのは、wpXレンタルサーバーAFFINGER4でした。

…という準備編の続編を今回は書きます。

宿木屋が「それっぽく」なるまでの過程です。

あくまでノウハウではなく、宿木屋ができるまでのプロセスを記します。

結論を急ぐ方へ

試行錯誤はどうでもいいからデザインをすぐにでも完成させたい、という方はこちらの順序通りにやってみてください。

メニューを組む(=カテゴリとメニューを分別)

ヘッダー/サイドメニュー/フッターに振り分ける

ダミーでも良いので言葉と画像が含まれる記事を10個ほど用意する

並んでいる様子を眺める

メインカラーや見出しのデザインを変更していく

困ったら「困った内容+プラグイン」でGoogle先生に泣きつく

完成

WordPress準備は何から始めれば良いのか?

いよいよ有料ブログテーマAFFINGER4も手に入れて意気揚々とデザインを始める雪樹です。

が…そもそも何から始めれば良いのでしょうか

前回の記事でご紹介しましたが、色だの丸みだのを何十回となくいじって破棄した雪樹は、以前より考え深くなっていました。

願わくば最短ルートで完成させたい

そこで、雪樹はあえて見た目ではない部分から入ることにしました。

骨組みです。

…え?最初っからそうしろよって

聞こえない、聞こえないよ…♡

 

①カテゴリを構築に反映する

前回の記事でも紹介しましたが、「コンセプト」はきちんと考えていました。

それをどうブログの構築に落とし込むかを考えます。

この時、役立ったのはポストイットです。

こういう手近なポストイットに、要素をひたすら書き出しました。

「宿木屋について」「ライター雪樹について」「初めての方へ」

「働き方」「学び方」「遊び方」「育て方」「生き方」

「リンク」「支援してほしい」「広告」などなど…

それを、まっさらな用紙の上に貼って、順番や位置を吟味しました。

この時、要らないものは削ぎ落とし、最小限のもののみ残します。

「雪樹の人物相関図」とか「本棚」とかはこの時ボツになりました。

また、「新着記事」や「おすすめ記事」も、最初はポストイットに書いたものの、次元が違うことに気づきます。

それは記事を再カテゴライズするもので、元となるカテゴリではなかったのです。

②決めた骨組みを設定

illustrade / Pixabay

決めたら、その骨組みをWordPressの「外観」にある「メニュー」から所定の位置に設定します。

決めたら、です。いいですか?決めたら、ですよ

雪樹は早くいじりたくてウズウズして、カテゴリがふわふわなのにメニューを設定しようとしました。

それで3時間ほど無駄にしています

これで絶対に変えない、というフレームが見えるまでパソコンの電源は切っておきましょう

③形を見るためにとにかく記事を足す

GDJ / Pixabay

さて、骨組みができたところでWordPressブログを見てみましょう。

…う〜ん、なんとなく物足りない…と感じたことを、覚えています。

当たり前です、記事がないのですもの

雪樹は初めてのブログデザインで、最も見誤っていたことがあります。

それは、デザインができてから記事を書くものだと思っていたことです。

逆です。骨組みが決まったらまず記事を最低でも10個ほどアップロードしてください。

この時のポイントは、画像、見出し、動画など、あなたがブログで扱うあらゆる要素を入れることです。

非公開で作業するのですから、以前書いた原稿を流用しても構いません。

ちなみに、雪樹はこの順序に気がつくまでに数日かかります。

空っぽのブログにどうデザインをこらしたら良いのか、悩みました…。

さながら貧乏人が「お金持ちになったらどうしよう」と悩み続けているような空虚な時間でした…。

 

④色や形を選択していく

nessaja99 / Pixabay

記事が並んだところで、ようやくデザインらしい作業をしていきます。

記事の見出しやフォント、吹き出しや背景色など、様々な設定を入れていきましょう。

色の濃淡とコードをシンプルに教えてくれるサイトにお世話になりました。

CSSについては、「やりたいこと+CSS」でGoogle先生に訊けばだいたい解決します。

ちなみに、CSSカスタマイズを効率的にできるおすすめプラグインはこちらです。

Simple Custom CSS and JS

雪樹の場合は、あまり複雑なデザインはなかったので、簡単なCSSをコピペして宿木屋を作っていきました。

CSSの書き方や考え方については、たくさんのページがあるので割愛します。

 

⑤困ったらプラグインに相談

ここまで来ると、おそらく楽しくなってきているでしょう。

みるみるうちに自分のブログが好きな見た目になっていきますからね。

それでも、「ん?」と引っかかることは、プラグインに相談してみましょう。

例えば、雪樹の場合は下記のようなところで引っかかりました。

コンタクトフォームってどう作るの?

Contact Form 7

簡単さ、このプラグインを入れれば送信者への質問や制限まで設定できちゃうんだぜ…!

記事の目次ってどうやって作るの?

Table of Contents Plus

このプラグインがあれば、自動で目次が生成されるんだ…どこまでの見出しを目次化するかも、設定で一発だ…。

商品リンクをカードみたいに表示させたい

これだけはプラグインよりも優秀な「カエレバ」をご紹介します。

Amazonや楽天のアフィリエイトタグが必要ですが、CSSを設定すれば綺麗な商品カードが作れます。

おや、WordPressブログがそれっぽくなったのでは?

改めて見てみると、お、それなりにブログっぽくなった…?

ここまでかなり割愛していますが、まあ何度やり直して、何度ググったことか……。

雪樹なりの「WordPressをそれっぽくする」ためのコツを3つ紹介します。

飽くなき検索との戦いを

デザイン構築編でのポイントは、わからなかったら問答無用で検索してください。

正直なことを言うと、デザインの詳細についての記事は書く気が全く起きませんでした。

なぜなら、わかりやすい記事がどの内容にも3つくらいは必ずヒットするからです。

大丈夫、あなたの他にも同じ悩みを抱いた人は無数にいます

めげずに何度だって検索してください。

脱線しない

あくまで例としてカラー見本サイトのリンクやプラグインを紹介しました。

けれど、これらのリンクが全てのWordPress初心者に必要な訳ではありません

それは、検索してヒットした先の情報も同じです。

「えっ、吹き出しの角丸くできるの?可愛い〜」とか、「画像に影つける方法もあるんだ〜」とか脱線してると…

一生WordPressが完成しません。

必要な情報だけ抜き取って、そこが解決したら次、その情報サイトは閉じましょう。

デザインが変=TODOに突っ込む

宿木屋のデザインには、「WunderList」が大活躍しています。

こんな感じの完了済みのTODOが、100個以上あります。

今もこんな感じでTODOが残っています。

気づいたらメモ、それを潰したら次、と繰り返しています。

WordPressブログのデザイン構築には忍耐が大切

WordPressは、準備の段階で何度も門前払いを食らいましたが、デザイン構築でも行ったり来たりします。

ただ、準備の時よりも優秀な先生がたくさんいますので、考え方と心の強ささえしっかりしていれば、必ずゴールへたどり着きます。

急がず、一つずつ、コツコツとゴールに向かって積み重ねていきましょう。

雪樹の宿木屋は、サーバーを取ってからこの形になるまで2ヶ月かかっています。

※もちろん、ライティングの仕事が終わってから勉強していたので時間がかかってしまったのですが…。

これからブログを作る全てのWordPress初心者の方へ…焦らず、めげずに、前へ

応援しています。

 

スポンサーリンク

AmazonProver

AmazonProver

スポンサーリンク

  • この記事を書いた人
  • 最新記事

宿木雪樹(やどりぎゆき)

物語を形にする仕事をしています。執筆を主軸に企画/デザインもしながら生きています。平穏が好き。

-育て方
-, ,

Copyright© 宿木屋│Yadorigiya , 2018 All Rights Reserved Powered by AFFINGER4.