こんにちは、
ブログアフィリエイトで稼いでいる藤井（⇒プロフィール、@midori_benkyo, @3tmeblog）です＾＾
わたしたちは、ブログを作っていて、よくライバルのブログを見ていて羨ましくなることありますよね？
「なんか、キレイぃ」
「どうやったら、こんなおしゃれなブログが作れるの？」
「ぜんぜんわたしのレベルが違う！」
自分のブログも記事の内容よりも、見た目をキレイにしたいと思います。
オシャレって必要ですよね？
オシャレなブログだったら、記事を書くときもモチベーションが上がるし、楽しくなります。
自分にも自信が出て、いいことばかりです。
そこで、今回は初心者でも簡単にプロ級のおしゃれなブログにできる方法をご紹介します。
スポンサードサーチ
ブログのデザインをおしゃれにする方法３つ
ブログのデザインはワードプレスのテーマを決めたらもう決まったもの！って思いがちです。
なので、わたしたちはあまり自分でブログをおしゃれにしようとは考えません。
プロだけが、デザインを変えられる…みたいなイメージを持っています。
しかし、初級者でもわりとおしゃれなデザインにすることはできるんです。
わたしがアフィリエイト６年で経験しておすすめの方法は３つあります。
- おしゃれなデザインが用意されているブログテーマを選ぶ
- 簡単にデザインをおしゃれにできるCSSの基礎スキルを学ぶ
- だれにでもプロ級のデザインに変えられるワードプレスのプラグインを使う
おしゃれなデザインが用意されているブログテーマを選ぶ
ブログデザインは使っているワードプレステーマで決まっています！
なので、まずは自分がいいなぁ！って思うブログデザインのテーマを選ぶことでオシャレに出来ます。
テーマは無料と有料があります。
有料ワードプレステーマは、価格が5千円ぐらいから１万円代が主流です。
中には、２万円を超えるテーマもあります。
一方、無料のワードプレステーマもあります。
有料テーマでは、３つご紹介します。
- ストーク
- DIVER
- 権威
どれが一番はありません。
どれも同じぐらいいいですし、オシャレさのレベルも同じです。
なので、選択はあなたの感覚でいいと思います。
ただ、有料テーマでよくうたわれている「SEOに強い」は、いまでは当たり前なので気にしなくていいです。
無料テーマでオススメはcocoonです。
無料でありながら、なんら有料と差はありません。
わたしの使い勝手の感想では、有料テーマより使いやすいです。
デザイン性から言うと、テーマに多くのスキンが用意されていること！です。
つまり、自分でカスタマイズする必要がなく、多くの人が作ったスキンから選べます。
使っていて、気分転換に変えることも可能です。
ブログを作っていて、内容に合うように途中で着せ替えができる点が最大のメリットです。
簡単にデザインをおしゃれにできるCSSの基礎スキルを学ぶ
有料・無料のオシャレなテーマでも、使っていると、ちょっとしたところに目が向くものです。
あ！この見出しの色…とか、背景とちょっと合わないから、変えたいなどの気持ちが絶対出てきます。
でも、見出しぐらいでテーマを変えるのは考えものです。
それに、ブログを作っている途中で、ワードプレステーマを変えるのは控えたほうがいいです。
それは、ブログ全体に変更が加えられるから。
画像のサイズとか、前のテーマのショートコードなど、面倒な作業が山程出てきます。
なので、一度テーマを決めて、使いだしたら、そのテーマを基本的にはずっと使い続けるのがベストです。
無料テーマcocoonなら、スキンの着せ替えができるので、このデメリットはありません！
それでも、見出しなどの一部を変えたいことはあります。
ブログのデザインを決定しているのは、CSSです。
CSSっていると、無理無理！って思っちゃいますよね。
わたしも、ぜんぜん自分ではわかりませんし、怖くていじれません。
ところが、そんなCSSも、初心者のわたしたちが簡単にいじれる方法があります。
- ブラウザー（Chrome）のデベロッパーツールを使う
- 他人が作ったデザインのCSSをコピーして貼り付ける
ブラウザー（Chrome）のデベロッパーツールを使う
Chromeにはデベロッパーツールの機能があります。
これを使うと、簡単な色を変えるとか、文字の大きさを変えることは出来ます。
Chromeの「設定」→「その他のツール」→「デベロッパーツール」を選択します。
デベロッパーツール画面になると、左側にスマホ画面のブログが表示されます。
そして、右側にその画面のHTML,CSSが表示されます。
左右連動していますから、左の見出し部分の色を変えるとします。
まず、右側のCSSをスクロールしていくと、スマホ画面がスクロールしている部分に対応して背景色が灰色になったりします。
なので、見出し部分が灰色になるところのCSSを探します。
まず、②のHTMLに見出しの文字が見えます。
その下の欄の③色のCSS「color」が見えます。
これで、この部分を変更したら、色が変わることがわかります。
このデベロッパーツールでは、場所を特定するだけですから、もし色の変更がわかったら、④のCSSファイルで実際に変更するだけです。
「color」の右側に色の枠が出てきます。
そこをクリックすると色のパレットが出てきて、そこのカーソルを当てると、対応する左側の見出しの色が対応して変わります。
他人が作ったデザインのCSSをコピーして貼り付ける
ちょっと自分では無理！って思う、あるいはもっと全体的に変えたい場合は他人のデザインをもらうことです。
たとえば、画像のような見出しデザインやボックスを使いたいとします。
オシャレなデザインがキレイですよね！
これは、ある方が記事で紹介していたデザインです。
それで、それぞれのCSSもつけてあります。
新しいデザインのCSSコードをコピーして、自分のテーマのCSSに追加に貼り付けるだけです！
cocoonなら、ワードプレスの「外観」→「カスタマイズ」→「追加CSS」があります。
そこの一番下に、見出しデザインのCSSを貼り付けるだけです。
ここで、ちょっと注意点があります。
１，２も操作はそんなに難しくないです。
でも、変更することで、デフォルトのテーマの一部が変わることがあります。
それは、CSSの文字がバッティングすることで起こります。
なかなか素人には修正することは難しいですから、その場合は、以前の状態に戻すことをおすすめします。
だれにでもプロ級のデザインに変えられるワードプレスのプラグインを使う
部分的なデザインの変更以上に、がらりと変える方法がります。
ワードプレスのプラグインを使います。
「SiteOrigin Widgets Bundle」がおすすめです。
具体的な使い方は別の記事に譲りますけど、ビフォーアフターをご紹介します。
これは同じcocoonを使って作っている他のブログです。
まったくこれと同じデザインでこのブログも最初はトップページが表示されていました。
それをプラグインで自分なりにトップページを作り直したのが現在のブログです。
まったく各パーツの配置が変わっています。
これが、プラグインで簡単に作れちゃうんです！
まとめ
以上、ブログデザインをオシャレにする方法を３つほどご紹介します。
ブログを作っていると、ぜったい途中で変えたい欲求が出てきます。
なので、一つ一つあなたのスキル、段階で試しにやってみるとブログの世界が変わってきます。
楽しいブログ制作の時間になりますから、おすすめです。
感想