【WordPress】結構かっこいいサイトができた|Knowledge Base

公開日：2016(平成28)年12月10日／最終更新日： 2017(平成29)年10月29日

ウェブサイトは見た目じゃない！！と思っていたのですが、ここへ来てデザインに興味が湧いてしまいました。

このサイトは「Simplicity2」というテーマを使わせていただいていて、ちょこちょこっとカスタマイズしているだけなのは一目瞭然。でも今回作ったサイトは使っているテーマが一緒でもこんなに見た目が違うの？？と我ながら感心する出来栄えです（自画自賛しすぎ？）

普段生活していて目にする店舗で「入ってみようかな？」と思う基準はやっぱり見た目ですよね？実際の店舗をデザインする上では一般に「床・壁・天井」なんてフレーズで語られることが多く、ショッピングモールのように同じような区画で仕切られた店舗でも、この３つの要素がその店の顔になる＝入ってもらえるかどうかが決まるものですね。そして実際に置いている商品を見て、買ってみて次に来店するかが決まるというもんです。

インターネットでは検索結果やランキングサイトなどで表示されるのは文字だけですから、上で言う来店するきっかけとしてデザインは利用できないのですが、リピーターが増えるかどうかはやっぱり見た目なのかもしれません。

そんな感覚で、金魚・熱帯魚・海水魚を飼育しよう！というサイトを作ってみました。私自身がもともとペットショップに長く勤めていたので、当時の経験を生かしたノウハウ？うんちく？サイトです。

熱帯魚や金魚、海水魚などの飼育方法や飼育にまつわるQ&Aが中心で今のところババッと記事を書いたので、それほど充実したサイトではないのですが、結構かっこよく？できたので何をどうやったのかを備忘録として書いておきますね。そのまま使えば同じサイトができるかも・・・、何となく参考になれば幸いです。

サイト全体のイメージ

イメージは「アクア」らしくブルー基調かな？と最初は思いました。でも、実際に熱帯魚ショップを見ると、薄暗い中に水槽の中の魚や水草、無脊椎動物なんかが照らし出されていることが多いんですね。今回はそれを模倣して、ズバリ背景は黒で攻めてみました。

使っているテーマはこのサイトと同じ「Simplicity2」です。え？見えないですよねぇ～～。でも本当ですヨ。

「Simplicity2」は使えば使うほど本当に分かりやすいテーマなのでカスタマイズにはもってこいだと思います。何でWordPressの公式サイトで配布されてないの？と思える位完成度の高いテーマだと思います。完全無料のテーマで余分なものはできるだけなくしてあるというのがコンセプトのテーマなので、中身を見ても全然複雑じゃないし「ああ、こういうことでファイルが分割されてるのね！」ということが徐々に分かってくる、味のあるテーマだと思います。

ノーマル状態では白基調のシンプルイズベストなテーマなのですが、いろいろとカスタマイズしていけばここまでできるんだ！！と今まであまりデザインのカスタマイズしてこなかった私としては結構満足の仕上がりです。

ではさっそく何をどうしたのかを書いていきますね。

カスタマイザーでできることはカスタマイザーで

テーマカスタマイザーでできることはそこですべて行っています。とはいえどこをどうしたかははっきり覚えていませんので、次に同じようなものを作るときは実サイト合わせですね。

まずは使っている写真類について触れておきましょう。このサイトで使っている写真は自身で撮影したわけではありません。でもよくある盗用でもありません。何を使ったか・・・お得意のプラグインです。

「Pixabay」の画像やイラストを本文やアイキャッチ画像として挿入するプラグイン「Pixabay Images」

このプラグインはpixabayという無料の素材サイトに上がっている写真やイラストを投稿編集画面から手軽に検索して使うことができるというもので、実にたくさんの写真やイラストがあって、これさえあれば恐らく素材で悩むことはないと思う位便利なプラグインです。写真はリンクではなくメディアにコピーされるのでリンク切れになることもありませんから安心です。

サイトの見た目に関して使っているプラグイン

このサイトでいろいろ紹介しているだけあって「〇〇がしたい」というプラグインの選択はお手の物です。あまたあるプラグインの中から以下のものを使用しました。すべて無料です。

まず、背景画像をフェードさせるために使ったのが

背景にフェードイン／アウトする複数の画像を表示できるプラグイン「Unlimited Background Slider」

うーん、前述したpixabayの画像を使って何枚かを変わるがわる表示したら結構それなりになりましたね。

次に、トップ画面だけにあるアイキャッチの表示される場所に入れたスライダーは

・・・紹介記事書いてなかった模様です。使ったのは「Meta Slider」というプラグイン。管理画面のおすすめプラグインにたびたび登場しますから気づいた人もいるかもしれませんね。いろいろとスライダー系のプラグインを試しましたがこれが一番管理がしやすいです。

そして、トップの新着記事表示に使ったのが

これは結構有名なプラグインですね。ちょっとカスタマイズして、公開日基準ではなく更新日基準にしてます。

最後に、各ページの一番下までいくとニューっと出てくる関連記事は

を使っています。設定はページの９５％まで来ると表示されるようにしてます。このプラグインはちょっとした不具合があってそのままだと使えないのですが、ソースをちょこっと書き換えて使えるようにしました。上の紹介記事内で方法を書いてますから見てみてくださいね。

あとはおまけですが、各ページの最後に表示されているアマゾンの関連商品。これは「CS Shop」というプラグインを使って実装してます。

それから、ライブ検索を行うために

サイト内のライブ検索機能を追加できるプラグイン「Search Live」

というプラグインを使っています。ライブ検索とは、検索窓に単語を入れてしばらくすると候補が表示されるというもので、検索語句を追加したり変更したりするたびに候補がライブで変わるという動作をします（試してみてくださいね）。

各プラグインの設定についてはそれぞれの紹介記事を参考にしてくださいね。また、動きの速度などは自身のサイトで見ながら調整していけば問題ないと思います。

CSSのカスタマイズ

今回はここが一番の鬼門でした。長くWordPressでサイト作りしていますが、モットーが「見た目じゃなく中身」なんて豪語していましたから、CSSについては全くの素人。苦労しました～。

でもやり方を覚えれば簡単。実際に何を追記したのかも紹介しますが、初心者の私にもできたCSSの簡単編集法を紹介しますね。とりあえずカスタマイズに当たっては「Simplicity2」そのものを書き換えてしまうとアップデート時に面倒ですし、何より元はなんだっけ？が分からなくなるので、こちらも無料で提供されている「子テーマ」を使いましょう。

コピペとネット検索能力があればできるCSSのカスタマイズ方法

これが妥当な手段かどうかは不明です。でも簡単にできますから初心者の方はぜひやってみてください。とはいえ何かのツールを使う訳ではありませんからご安心を！Google Chromeブラウザでの方法ですがその他のブラウザでもだいたい同じです。

手順としては

ページの変更したい部分で右クリックし、「検証」をクリックします

右や下にコードがいっぱいの画面が出てきますね、開発者ツールと呼ばれるものです。ここに何とCSSが書かれているではありませんか！

書かれているCSSをコピーする

右側のCSSコードの左端あたりにマウスカーソルをおきつつスクロールしていくと、左のプレビューに「この部分」という感じで色が変わるようになっています。これだ！と思うものの点線の間を全部コピーします。

子テーマのCSSへ貼りつける
内容を変更する

ここで問題になってくるのが何をどうしたいか？というCSSコードが全く分からないこと。こんなときはネット検索で「CSS 〇〇（〇〇はやりたいこと）」とすればたくさん出てきますからそれを見てコピーします。

基本は「CSSコード:内容;」ですからそれに従えばいいです。例えば文字色なら「color:#000;」（黒にする）と書けばいい訳です。とにかくCSSの閉じ子（}）の前に書き足せばOKです。

変更内容を保存して、プレビュー画面を再読み込みする

これで変更されているはず・・・あれ？変更されてない！という場合には、次の魔法？を使います。先ほどの開発者ツールの画面でリロードアイコンを右クリックして「キャッシュを削除してハード再読み込み」をクリックします。そうすることで一時的に保存されていた内容がクリアされてきちんと変更したCSSが適用されるようになります。（私はこれが分からなくて「なんだ何もかわらないじゃん！！」と紛糾しました・・・）

基本これを繰り返していけばどんどんデザイン変更できます。簡単ですね。

そしてCSSには読み込み順というのがあって、今回の環境の場合は

Simplicity2本体のCSSを読み込む
子テーマのCSSを上から順に読み込んで重複しているものは上書きしていく

という流れになります。つまり、

変更しない部分は本体のものがそのまま残る
子テーマに追記したものも、最終的なものが上書きされる

赤字で書いた、子テーマに追記したものも、最終的なものが上書きされるが初心者にとってはとてもうれしい機能？で、いろいろとCSSを書いても結局上書きが繰り返されていくから多少重複したり間違ったりしていても最終的に意図したデザインになればいいということなのです。

以下に追記した全CSSを書きますが、よく見るといらないものがあったり、重複したりしてます。ただ、最終的に良い感じになっているのでそのままにしてあります。

それから、１つだけ注意事項を挙げるとすれば、きちんと何のデザインなのかをコメントしておくことが大事だと思います。

実際に書いた追加CSS一覧

/* サイドバータイトル */
#sidebar h3 {
background-color: #000000;
padding:5px 5px;
border-radius: 10px;
color:#ffffff;

}

/* arpwプラグインのリスト部分の背景を黒に */
.arpw-ul{
background-color: #000000;

}

/* サイドバーのリスト部分のデザイン */
#sidebar li {
background-color: #000000;
padding:5px 5px;
margin:0px 0px;
}

/* サイドバーとウィジェットにまつわるいろいろなリストのデザイン */
#sidebar ul, #sidebar ol, .widget-over-article ul, .widget-over-article ol, .widget-under-article ul, .widget-under-article ol, .widget-over-sns-buttons ul, .widget-over-sns-buttons ol, .widget-under-sns-buttons ul, .widget-under-sns-buttons ol
{
background-color: #000000;
padding:5px 5px;
border-radius: 10px;
}

/* 本文側背景のデザイン */
#main {
float: left;
box-sizing: border-box;
width: 740px;
padding: 20px 29px;
border: none;
background-color: #000000;
border-radius: 10px;
margin-bottom: 30px;
color:#fff;
}

/* 本文h2タグのデザイン */
#main h2 {
background-color: #ffffff;
padding:5px 5px;
border-radius: 5px;

margin-left: 1px;
margin-right: 1px;
}

/* 本文h3タグのデザイン */
#main h3 {
background-color: #ffffff;
margin-left: 1px;
margin-right: 1px;
padding:5px 5px;
border-radius: 5px;

}

/* 人気記事ウィジェットのリストデザイン */
.widget_new_popular a, .widget_popular_ranking a, .wpp-list a{
color:#fff;

}

/* 本文h1タグのデザイン */
#main h1 {
color:#fff;
}

/* 新着記事、ランキングウィジェットのデザイン */
.widget_new_entries a, .widget_new_popular a, .widget_popular_ranking a, .wpp-list a, .entry-read a, .related-entry-read a, .article-list .entry-title a {
color: #fff;
}

/* サイドバーの人気記事一覧レイアウト */
#sidebar ul.wpp-list li {
border-bottom: 1px dashed #bbb;
counter-increment: wpp-count;
position: relative;
}

#sidebar ul.wpp-list li:before {
display: block;
padding: 1px 11px;
color: #fff;
background-color: #333;
content: counter(wpp-count);
position: absolute;
opacity: 1;
z-index: 10000;
border-radius: 2px;
top: 4px;
left: 4px;
}
#sidebar ul.wpp-list li:last-child {
border-bottom: none;
}
#sidebar ul.wpp-list li:nth-child(1):before{
background-color: #FBCC54;
}
#sidebar ul.wpp-list li:nth-child(2):before{
background-color: #B7BFC1;
}
#sidebar ul.wpp-list li:nth-child(3):before{
background-color: #D47B16;
}

#sidebar ul.wpp-list li a.wpp-post-title {
display: block;
font-size: 16px;
padding: 5px;
text-decoration: none;
color: #fff;
}

/* タイトル下ラインのデザイン */
.post-meta {
margin-bottom: 0.5em;
text-align: right;
background-color: #000000;
color: #ccc;
font-size: 16px;}

/* 本体のブログカード内説明文のデザイン */
.blog-card-excerpt {
color: #fff;
font-size: 0.9em;
max-height: 80px;
overflow: hidden;
}

/* 本体のブログカード内タイトルのデザイン */
.blog-card-title a {
font-weight: bold;
text-decoration: none;
color: #fff;
}

/* Search Liveプラグインのデザイン */
.search-live-results table.search-results {
border: 0;
border-collapse: collapse;
border-spacing: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
width: 100%;
background-color:#000;
}

/* H4タグのデザイン */
.article h4 {
border-bottom: 2px dashed #eee;
color:#fff;
}

見返すと重複が結構ありますね。苦労の跡として残しておいてます。