Simplicity | 現在使用中のブログデザインの設定方法を大公開!

この記事を他の人にもお裾分けしましょう!

Photo by Unsplash

皆さんこんにちは、Kentaroです。

このブログでも使っているSimplicityは最強の無料WordPressテーマだと思いますが、デフォルトデザインだと少し野暮ったい部分もありますので、少し手を加えてやるのがオススメです。

【やさしいブログの始め方③】最強のWordPressテーマ『Simplicity』インストール
WordPressのテーマは色々あってどれが一番良いのか分かりにくいですよね。僕はブログを始めたときに『初心者ならこれ使っとけ!』というテーマを教えて欲しかったので、今回は特に初心者にお勧めする最強の無料WordPressテーマのSimplicityについて分かりやすくご紹介します。

今回は僕が行ったデザイン変更の内容をまとめていきたいと思います。

超初心者向けに分かりやすく書いておいたので、気に入ったものがあれば自分で使いたい色を選んで、他の部分はコピペすればOKです!すぐに見栄えが大きく変わるのでデザイン選びは楽しいですよね。

一歩一歩探りながら自分が良いと思う姿を探していけば良いと思うので、まずは感覚的に良いなと思ったデザインを試してみてくださいね。

スポンサーリンク
rectangle1




CSSの基礎の基礎

具体的なデザインの話に入る前に、最低限知っておくと後から壁にぶつかったときに便利なCSSの基礎の基礎情報を書いておきます。

CSSとは

CSSとは『Cascading Style Sheets』の略称で、一言で言うとあなたのWebのデザインを指定するための言語です。

Webサイトはhtmlという言語とCSSという言語の組み合わせで作られており、htmlがWebの構造を作っているのに対して、CSSはデザインを作っているとざっくり言えます。

CSSはなんぞや?という事を詳しく知りたい方は以下のヨッセンスさんのサイトが分かりやすかったので一読をオススメします。

WEBサイトやブログのデザインをいじろうと思ったときに突き当たるのが「CSS」という大きな壁です。今回はCSSというものを超わかりやすく噛み砕いて説明します。

Simplicity内での追記場所

Simplicityをお使いの方はstyle.cssへ追記すれば反映されます。開き方は以下を参考にしてください。

①Wordpressトップページから『外観』⇒『テーマの編集』をクリック

②スタイルシート(style.css)をクリック

amp(accelerated mobile plages)を導入している場合、ampページのデザインはamp.cssに追記します。

色の表現

CSSでは『#54d85d』の様に色を#と6桁のコードで表現します。

これから示すCSSのコードの中には#54d85dの様な表現が沢山出て来ますが、それらは全て色のことを指していますので、自分で好みの色に変更する事が出来ます。

因みに色の表現はGoogle検索が提供しているカラーピッカー(以下)を使うと直感的に探すことが出来ます。自分の好みの色を見つけて、そのコードをコピペしましょう。

キャッシュリセットを忘れずに

ブログのデザインを更新して、リンク先を再読込してみても変更が反映されず、その後よく分からないタイミングでひょっこり反映されたりして『CSSは本当に訳が分からない!』と嘆く人は多いと思います。僕もその1人でした。

ブラウザは1度アクセスしたサイトの情報をキャッシュに保管しています。その為、ブログのデザインを変更しても、以前ダウンロードしたデータをキャッシュから読み込んでしまい、更新が直ぐには反映されません。

デザインを直ぐに確認したいときは以下の方法でキャッシュクリアをしてからアクセスしてみましょう。

  • Mac Chromeなら、左上の『Chrome』メニュー⇒閲覧履歴を消去⇒『キャッシュされた画像とファイル』がチェックされていることを確認して、『閲覧履歴データを消去する』をクリック
  • iPhoneなら『設定』⇒『Safari』⇒『履歴とWebサイトデータを消去』から削除出来ます。

僕のブログデザイン

先ず基調となる色を選ぼう

仕事で資料を作る時もそうですが、ブログをデザインする上で最も大事なのは統一感です。

統一感は同系色の色を使って骨格のデザインをする事で生まれます。

自分のブログの基本となる色を、先程説明したカラーピッカーを使って選びましょう。そしてまずはその色一色を使ってデザインをしてみましょう。

ロゴ作成

結論から言うと、このサイトのロゴはLightroomと一緒に契約していたAdobe Photoshopを使って自分で製作しました。

ただ色々検討する中でSquarespaceがシンプルでとても使いやすかったので、Adobeのソフト等を持っていないのであればこのサイトでロゴを作るのがオススメです。

商用不可ですが無料でロゴを作る事も出来ますし、高画質版のダウンロードもたったの$10(1,200円程度)です。

Create a beautiful, professional logo for your business in seconds with Squarespace's free logo maker. Choose from thousands of logo design options.

ロゴデザイン

①サイトにアクセスしてロゴを作成したい文字列を入力します。

②インターフェースを使った自由にデザインします。(使い方は画像の中に書いておきました)

ロゴをSimplicityに反映

自分好みのロゴが出来たらブログに反映させましょう。Simplicityにロゴを反映させる際のステップを書いておきます。

  1. WordPress管理画面から『外観』⇒『カスタマイズ』をクリック
  2. 『ヘッダー』メニューの中にある『ロゴ画像』(以下画像参照)から作ったロゴを指定します
  3. 『ロゴを画像にする』のチェックを入れて現在の文字のブログタイトルを削除します

文字色・フォントのカスタマイズ

ブログは内容が全てとは言うものの、読んでくれているお客さん(読者)に気持ちよく読んで貰う必要があり、その為に文字色やフォントを工夫する必要があります。

文字色

実はこのブログの本文色は黒ではなく、濃い灰色です。Simplicityのデフォルトの文字色は黒ですが、白背景に黒字の文字を読むとコントラストが強すぎて目が疲れてしまいます

快適に読むためには灰色(#111111〜#555555)の指定をオススメします。(このブログでは#333333を指定しています)数字が大きくなるほど白に近づいていきます。

先程説明したカラーピッカーを使って試してみてください。

フォント

このブログでは Google Webフォントの日本語フォント(M+1p)を使用しています。

Webフォントを使うと(過去から見れば非常に早くはなったものの)読み込み速度が遅くなりがちですので、Webフォント使用の賛否はあるとは思いますが、先ずはデザイン重視で使ってみています。

As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available fro...

フォント&文字色を記述するコード

上記のフォントと文字色を実現するためにstyle.cssに記述しているコードは次の通りです。

コードの意味としては、先ずは”Mplus 1p”のフォントで表示を試して、表示できない文字があった場合にはsans-serifというフォントで表現する、ということです。

例えば”Mplus 1p”の前に”Meiryo, “を入れればMeiryoフォントが最優先となります。

Webフォントを使う場合の注意点

尚、Webフォントの使用にあたってはheader-insert.phpに別途コードを書き込む必要があります。尚、Meiryo等の通常のフォントを使う場合は不要です。


各Webフォント毎のURLは先程のGoogleフォントのページに載っています。

背景のカスタマイズ

僕のブログは本文が書いてある部分の背景は白ですが、その他の部分は微妙に模様を付けています

全て白だとのっぺりした印象を与えてしまいますので、あまり目立たない模様を付けるのがオススメです。

背景の選定

背景画像は以下の”Subtle Patterns”というサイトで探すのがオススメです。自分のお気に入りのものをpick upしてダウンロードしましょう。

Free high quality patterns for your next web project.

Simplicityへの反映

お気に入りの背景画像が決まったらSimplicityへの反映をしましょう。

  1. WordPress管理画面から『外観』⇒『カスタマイズ』をクリック
  2. 『背景画像』メニューから『画像の変更』をクリックし、先程ダウンロードした画像をアップロードします

見出しのカスタマイズ

このブログの見出しh2、h3、h4のデザインは以下の様になっています。

僕の場合はテーマカラーを青色に決めて全て同じ色(#4d85ec)を使ってデザインしています。

style.cssの記述は以下の通りとなっています。#4d85ecとなっている部分を自分の好みの色に変えれば自分のサイトに合わせたデザインが出来ます

見出しのデザインは本当に様々なものがあり、CSSにどう書けば良いかも様々なサイトで紹介されていますので、参考にしてみてください。僕はシンプルなデザインが良かったので、以下のサイト等を参考にしました。

画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。
ampページを有効にしている方は、style.cssに記述しただけではampページの見出しデザインは変更されないので、同じ記載を忘れずにamp.cssにも記載するようにしてください。ampは読み込み速度優先のために一部使えないデザインがあるので、特殊なタイトルデザインをした場合はエラーが出ていないか確認するようにしましょう。

目次のカスタマイズ

このブログでは、タイトルの内容を元に記事の頭に目次を追加してくれるプラグイン「TOC+」を導入していますが、僕は更にその目次のデザインを以下の様に少し変えています。

上記の内容はNaifixさん(以下リンク先)作成のコードを使わせて頂いています。これをベースに今後カスタマイズしていく予定です。

WordPress で目次を自動的に表示してくれる Table of Contents Plus はすごく便利なプラグインですが、初期設定のままだとちょっと味気ないデザインですよね。 設定画面から横幅や背景色を変更するこ …

記事と記事の間に点線を引く

Simplicityを使用している人の中でも結構な人数がこのデザインを使われていましたが、確かに記事と記事の間に線があると見やすいですよね。 

実線を引くと少し強すぎるので僕は点線を引いたデザインを使っています。

関連記事の間に点線を引く

同様に記事下の『関連記事』どうしの間にも点線を引いています。

リストタグの行間を修正

Simplicityのデフォルトのリストタグは行間が狭すぎて、読みにくいなと思っていたので、行間を少し広げて読みやすくしています。

以下の様な感じです。

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

CSSはこんな感じです。

パンくずリストの修正

最初『パンくずリスト』と聞いたときは「???」という感じでしたが、何てことは無く、記事の所在を階層で示しているタグの事です。

この記事はどのカテゴリの中に入っているのか示している記事上の表示ですね。

僕は以下の様にカスタマイズしています。

CSSの記述はこんな感じです。

この内容はMASALOGさんのサイトを参考にさせて頂きました。

SEOに強くて、使いやすいWordpress無料テーマ「Simplicity」のカスタマイズ方法を19のポイントで紹介します。

『記事を読む』ボタンの変更、右寄せ

デフォルトの記事を読むボタンは文字であまりスタイリッシュでは無かったので変更し、色をブログカラーと合わせています。また、右側にボタンを寄せています。

別にこのボタンは無くても良いのですが、色を自分のブログの色に合わせたら統一感が出て来たので残してあります。

CSSの記述はこんな感じで、こちらも上記と同じくMASALOGさんの記事を参考に、ブログに合わせて色を変更して使っています。是非皆さんも#4d85ecの部分をお好みの色に変更して使ってみてください。

ブログカードにマウスを合わせたときの効果

このブログでは、リンクを張るときに以下の写真の様なブログカード型のデザインを採用していますが、

  1. マウスをリンク先に合わせた時に青色になる様に設定
  2. 画像にマウスを合わせた時に浮かび上がる様に設定

の2点のカスタマイズを行っています。

CSSは以下の通りです。

このデザインはtajuso.netさんのサイトを参考にさせて頂きました。

(モバイルのみ)記事内容をトップページに記載しない

デフォルトではスマホからアクセスしたときに、記事タイトルだけで無く本文の一部も記載されているデザインなのですが、それだとぱっと見文字が多くて見にくいと思いましたので、トップページに出てくるのはシンプルに記事タイトルだけにしました。

mobile.cssに以下を追記するだけで変更出来ます。

まとめ

さて、いかがだったでしょうか。

今回は僕のブログのCSSデザインを丸裸にしてご紹介しましたが、是非『これ良いな』と思うものが少しでもあれば、真似して、自分のサイトに合わせて色だけ変えて使ってみてください

慣れてきたら少しずつカスタマイズして行ければ良いと思っています。

ブログで大切なのは記事を書くことだと分かりつつ、デザインをいじるのは楽しいのでついついやってしまいますよね。僕はブログの内容もデザインも前に進むために必要な両輪だと言い聞かせて、息抜きにデザインをいじってます。

したっけまたねー。