カテゴリ一覧から記事を探す

WordPressのカスタマイズ集━無料テーマでもここまでおしゃれに!【コピペでOK】

デザインのまとめ

無料テーマを使っているんだけど、ブログデザインをもっとおしゃれにしたい!

あの綺麗なブログのあのパーツはどうやってできているんだろう?

そういった悩みの助けになる記事です。

今現在、私のブログテーマは無料テーマのStinger8ですが、デザインをいじり倒したため、その原型はないに等しいです。

そんな私が今までにやってきたブログデザインをまとめて紹介します!
気になった部分に目次から飛ぶのをオススメします。

1.ブログの根本的なデザイン

まずは、ブログを根本から変える部分からです。
全記事に反映される/全記事に取り入れてもOKなデザイン変更案についてまとめています。

ブログのタイトルを画像に変更

ブログのタイトルは画像にした方がいいです。

なぜかというと、ブログの顔だからです。
ブログ名を覚えてもらえたら、それ以上に嬉しいことはないのではないかと思います。

ブログのタイトルを変更する

ただの文字から画像へ。例はあまりよろしくないので、現在のタイトルをご覧ください。

ブログタイトルの印象が全体の印象を決めているといっても過言ではありませんので、オススメ。

上記の記事はSEO対策的にもOKなデザイン変更をしていますので、ご安心を。

また、画像はココナラで頼むと簡単に要望通りのものを入手できますので、この記事も参考にして考えてみて下さい。

ファビコンを設定

ブログのアイコンやファビコンの設定方法

画像にあるような、タブの設定をします。

画像1枚で簡単にできますよ~!

ブログの文字のデザインを変更

フォントを変更することでブログ全体のイメージを変えることができます。
私のブログですと、文字の大きさや行間を変更して、見やすさを追求しています。

また、フォントを真っ黒ではなく、ちょっと灰色にして、行間をいじることで急激に見やすいブログにすることができます。

ブログに目次を付け足す

ブログに目次を取り入れる

画像のような目次を作成します。
もちろん、クリックでその場所までジャンプできます。

ユーザは目次を見てその記事に自分の探し求める内容があるかを見るため、目次があるだけでユーザに優しいページにすることができます。

サイドバーを追従させる

スクロールしたときに、サイドバーにある要素が追従してくるように設定できます。

スクロール追従

画像では、カテゴリーを追従させています。

読み終わったときにすぐそばに人気記事ランキングだとかカテゴリ一覧があるため回遊率がアップします。

カテゴリーページに説明文や子カテゴリーへのリンクを入れる

有料テーマの方は大丈夫でしょう。
しかし、多くの無料テーマでは、カテゴリーページに飛んだ際に、全く説明文がありません。

これは非常にもったいない!

追加で子カテゴリへのリンクも作成しておけば、もっと興味を持ってくれる読者もいるはずです。

画像のような変化をつけるように、改善していく方法について解説していきます。

2.ブログ記事内のデザイン

次は、ブログ記事内におしゃれなパーツを取り入れる方法を書いたデザインについてまとめます。

途中でボックスがあったり、分かりやすいリンクがあったりすると文字だけのブログよりも見やすくなりますので最高です。

サイト内で使用するボックス

記事中に、四角(ボックス)で囲われた部分に文字が入っていたり、箇条書きがあったりすると読まれやすいです。

そんなボックスを25種、62色分用意した渾身の記事です。

商品へのリンク

商品へのリンクは、3通りの作成方法を書いています。

カエレバ・ヨメレバというツールを使う方法と、Amazonの公式プラグインを使う方法と、Rinkerというプラグインを使う方法です。

一番のおすすめはRinkerを使う方法。
一番おしゃれにできた気もします。

Rinker(リンカー)カスタマイズ後の見本PC管理もしやすいので、絶対使うべきだなと感じています。

カエレバ・ヨメレバの方法では、デザインを変更して以下の画像のような見た目にします。

カエレバ・ヨメレバのデザイン完成品

カエレバ・ヨメレバの使用変更により、Amazonだけで取り扱っている商品に対してはリンクを作成できなくなりました。(Rinkerならここも対応できます)

そのため、以下の記事でAmazonだけで取り扱っている商品に対し、Amazon公式プラグインを用いてリンクを作成する方法を書いています。

この二つの記事を参考にすれば、商品へのリンクは大丈夫でしょう。
ツールやプラグインの使い方も書いていますのでご心配なく。

合わせて読みたい!リンク

リンクを作成する際に、もうすこし目立つように作成したいものです。

こんなものや

こんなもの(別タブで開くか、開かないかの差を出しています)を作ります。

リンクが目立つことで、クリック率が上がります。
リンクの色次第では、リンクをリンクだと認識していない人もいる可能性がありますので、このようなデザインは手助けになるでしょう。

このページ内に使用している、画像付きのリンクをつくりたい!という方は、以下の記事を参考にしてみてください!

記事内に軽くコードを書く

プログラムコードを載せる際によく使われるプラグインのCrayon。しかし、このプラグインは重いです。

以下のようなコードをCrayonよりも軽く、そしてデザインの変更も可能な形で出す方法を紹介しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>見本のコード</title>
  </head>
  <body>
    <h1>見本のコード</h1>
    <p>こんなコードを掲載できます。</p>
  </body>
</html>

しかもCrayonからそのまま乗り換えできます。これでサイトスピードも20ほど上がったのでやるしかないですね。

3.ブログの印象を変えるデザイン

あると便利な機能/デザインについてまとめています。

ハンバーガーメニュー

ハンバーガーメニューがなにかというと、スマホでのみあらわれる、ブログタイトル左の三本線のことです(笑)

ハンバーガーメニューの完成品

タップすると、画像のようにカテゴリーが現れます。

アイデア次第で、このなかにオススメ記事を入れ込んだり、ブログ内検索を取り入れるデザインもありますね。

そもそもハンバーガーメニューがないというブログテーマもありますので、そういう人は必ず取り入れておきたいところです。

サイト内検索欄をおしゃれにする

サイト内検索の挿入方法や、デザイン変更について書いています。

検索フォーム

ハンバーガーメニューの記事と合わせて参考にして、ハンバーガーメニュー内にサイト内検索を取り入れてみてください。

スライダーをブログ内に取り入れる

スライダーの完成品

画像なのでスライドできませんが、スライダーを作成して、その中に関連記事を入れ込んだり、画像を入れ込んで旅のギャラリーにしたり。

使い方は人それぞれですが、あると役立つ便利なデザインです。

関連記事を2列以上でタイル状に表示する

関連記事をタイル化

関連記事内を、この画像のような見た目にすることを目指します。

ちょっと書き換えるだけで3列以上にもできます!

2列以上にすることで読者が関連記事を一覧で見やすくすることができますのでぜひ。

4.まとめ

ブログのデザインにこだわりすぎて画像が多くなってサイトが重くなる時もありますのでご注意を。
サイトの速度はSEO的にも重要です。

また、一部の記事ではfunction.phpをいじる部分もあるので、そこは自己責任でお願いします。

ブ ロ グ デ ザ イ ン に 凝 り す ぎ る の は ほ ど ほ ど に し ま し ょ う 。

こだわりが強いから仕方ないんです。まだまだ直したいところがいっぱいあるんです・・・。

デザインについてもっと知りたいなら、以下の本もオススメです。