WordPressのカスタマイズはCSS知識ゼロのド素人でも徹夜で取り組めばどうにかなる

WordPressのカスタマイズは、初心者でもどうにかなります。

私は、ノンプログラマーです。
現在、Progateを使って独学でプログラミングを勉強していますが、素人に毛が生えた程度だと思っています。

Progateでレベル上げしてたらいつの間にか自称プログラマーになってた件

プログラミングを習得しようとセミナーに参加し、独学で習得する方法を学び息巻いていましたが、なかなか1人でやるのは厳しいですね。私自身、根は三日坊主だし。セミナーを受けてた時の意気込みは、長くは続きませんでした。 ...

でも、リンクタグや太字なら何も見なくても書けます。
まったく自慢になってないですけどね。

以前から、漠然としたアイデアはありました。
これが漠然としたアイデアを形にしたものです。

ただの落書きにしか見えないですね。
このアイデアを再現するにはまだまだ力不足で、いくつか断念した箇所があります。
後述あり。

でも自己満足にはなりますが、6割方はアイデア通りに出来たんじゃないでしょうか。

ちなみに、これがビフォー画像です。

全体的に白いです。
プロフィール画像以外は、清潔感を感じますね。

これがどう変わったのか。
試行錯誤し、CSSド素人がどうやってデザインを変更したのか。
これを見れば、ド素人CSS知識ゼロなあなたでも好みのデザインに変更することが出来ますよ。

ちなみにこのサイトは、Simplicityというテーマを使っています。

参考：Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

デザインを変更した箇所一覧

今回、デザインを変更出来た箇所は以下となります。

サイトキャッチフレーズ
メニューバー
サイドバータイトル
カテゴリーウィジェット
見出しタグ
トップページ本文関連

では、それぞれの変更箇所をみていきましょう。

サイトキャッチフレーズ

実は、今知り合いにロゴ制作をお願いしています。

近日中には公開出来る予定なのですが、そのロゴをサイトタイトルに当てはめると、サイトキャッチフレーズがしょぼいんです。
まったく目立たない。
そこで試行錯誤した結果、こんな感じになりました。

ソースコード

/* サイト説明文 */
#site-description{
font-size:16px;
font-weight:bold;
}

メニューバー

今回のデザイン変更にあたり、このサイトのテーマカラーを黒色にしました。

それに伴い、メニューバーの背景色を黒色にしました。
16進数でいうところの#342F3Aなんですが、後から分かったのですが実はこれ青色らしいです。

十六進の色コード#342f3a青マゼンタ色の暗い色合いです。
#342f3a十六進の色コード配合、色見本、パレット、ペイント&光の三原色（RGB）／印刷四原色（CMYK）／HSL変換

でもこの色気に入っているので、そのままにしておこうと思います。

余談ですが、色コードを調べるにはこのアプリが便利ですよ。

Sip

無料

(2015.05.18時点)

App Store

Rui Aureliano

posted with ポチレバ

詳しい使い方は、こちらをご覧ください。

参考：MacのカラーピッカーアプリでおすすめなSipが無料中!今すぐダウンロードした方が良いですよ | MacとiPhone備忘録

メニューバーの背景色を変更したことによって、あわせて文字色、文字の太さ、ホバーの色も変更しました。

ソースコード

/* メニューバーの文字色変更 */
#navi ul li a{
font-size:16px;
font-weight: bold;
padding: 10px;
color:#FFFFFF;
}
/* メニューバーのホバー色変更 */
#navi ul li a:hover{
background-color:#B02428;
}

サイドバータイトル

こちらもテーマカラーを黒改め暗い青色にした為、背景色などを変更しました。

メニューバーの文字との相性を合わせるために、何度も試行錯誤しました。
今回のデザイン変更で、2番目に時間がかかった箇所でした。

ソースコード

/* サイドバーの文字変更 */
#sidebar h4{
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border-radius: 5px;
  background: #342F3A;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #FFF;
}

カテゴリーウィジェット

これは、あるサイトのパクリ、いやオマージュですね。
思わず口が滑ってしまいましたね。

オマージュするためには、まずたくさんありスマートではないカテゴリーを整理しなくてはいけませんでした。
最終的に5つに絞りました。

これをやることによって、漠然としていたこのサイトの方向性がぼんやりながら見えてきた気がします。頭のなかの整理が出来ました。
カテゴリーが乱立していると、訪問者さんにもフレンドリーではないですよね。

この記事を見ているブロガーさんは、これを機会に見直してみてはいかがでしょうか。

今回のデザイン変更で、1番時間がかかりました。
時間がかかっただけあってか、1番思い入れがあります。
ダダっ子さんですね。

ソースコード

/* カテゴリー全体 */
#nav_menu-2{
border: none;
font-size: 12px;
font-size: 1.2rem;
font-weight: bold;
vertical-align: middle;
}

/* カテゴリーの位置 */
#nav_menu-2 div{
padding:0 10px;
}
#sidebar ul{
padding-left: 0;
}
#sidebar li {
margin-bottom: 0;
}
/* カテゴリーの下線 */
#menu-item-1993{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
#menu-item-1997{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
#menu-item-1995{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
#menu-item-1996{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 50px;
line-height: 50px;
}
#menu-item-1994{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
/* カテゴリーの文字枠のホバー */
#menu-item-1993:hover{
background-color:#F3F3F3;
}
#menu-item-1997:hover{
background-color:#F3F3F3;
}
#menu-item-1995:hover{
background-color:#F3F3F3;
}
#menu-item-1996:hover{
background-color:#F3F3F3;
}
#menu-item-1994:hover{
background-color:#F3F3F3;
}

見出しタグ

前から変更したかった箇所です。
h2タグには、このサイトのテーマカラーの背景色を追加し、h3タグには、上下に線を追加しました。

ソースコード

/* 見出しタグh2 */
.article h2 {
background-color: #342F3A;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
border-radius: 5px;
}

/* 見出しタグh3 */
.article h3 {
border-top: 5px solid #342F3A;
border-bottom: 5px solid #342F3A;
border-left: 0 none;
color: #342F3A;
padding: 15px 30px;
}

トップページ

ここのデザインを1番最後にイジったので、今回の集大成といった感じでしょうか。

抜粋分の非表示と背景色を変更しました。

唯一心残りなのは、タイトルや日付とカテゴリーの表示されている部分を全エントリー共通の位置に変更出来なかったことです。
何回やっても上手くいかなかったので、今回は諦めました。
やり方が分かる優しい方がいれば、教えて下さい。

ソースコード

/* トップページ抜粋文非表示 */
.entry-read a{
display:none;
}
.entry-snippet{
display:none;
}

/* トップページ記事一覧 */
#main .entry {
clear: both;
margin-bottom: 40px;
margin-right: 10px;
padding: 10px;
}
#main .entry:hover{
background-color:#F3F3F3;
}
.post-meta {
margin-bottom: 0.5em;
text-align: right;
background-color: #342F3A;
color: #FFF;
font-size: 16px;
}
.entry .post-meta a {
color: #FFF;
}

デザインを変更するのに苦労した点

変更したい箇所がどこなのか分からなかった。

Google Chromeの「デペロッパーツール」を使い、変更箇所を探していましたが、そもそもどこが希望の変更箇所かがさっぱり分かりませんでした。

その後ガチャガチャしてたら、「デペロッパーツール」で直接CSSをイジれることが分かり、人海戦術のように該当箇所を探していました。

「デペロッパーツール」については、こちらが非常に勉強になります。

参考：CSSを弄るなら、Chromeの「デベロッパーツール」は絶対使えたほうが良い

完璧にオマージュしようとしていた

あとで気付いたのですが、そもそもHTMLの構造自体が異なるので、全く同じように出来る訳がありません。

それに気付くまで、ひたすらオマージュサイトの「デベロッパーツール」とにらめっこしていました。

これくらいでしょうか。

あとはひたすら、自分の理想に少しでも近付けるように試行錯誤していました。

アフター画像と全体のソースコード貼り付け

こちらが、すべてのコードを適用したアフターの画像です。

また、今回変更したCSSコードをすべて貼り付けておきますね。

そういえば、滅多に使わないからってh4タグのデザイン変更してないから、他とギャップあるかも。
あとでやるリストに追加しておこ。

ソースコード

/* サイト説明文 */
#site-description{
font-size:16px;
font-weight:bold;
}

/* メニューバーの背景色変更 */
#navi ul{
background-color:#352F3B;
}

/* メニューバーの文字色変更 */
#navi ul li a{
font-size:16px;
font-weight: bold;
padding: 10px;
color:#FFFFFF;
}
/* メニューバーのホバー色変更 */
#navi ul li a:hover{
background-color:#B02428;
}

/* サイドバーの文字変更 */
#sidebar h4{
height: 50px;
line-height: 50px;
padding: 0 10px;
border-radius: 5px;
background: #342F3A;
font-size: 12px;
font-size: 1.2rem;
font-weight: bold;
color: #FFF;
}
/* カテゴリー全体 */
#nav_menu-2{
border: none;
font-size: 12px;
font-size: 1.2rem;
font-weight: bold;
vertical-align: middle;
}

/* カテゴリーの位置 */
#nav_menu-2 div{
padding:0 10px;
}
#sidebar ul{
padding-left: 0;
}
#sidebar li {
margin-bottom: 0;
}
/* カテゴリーの下線 */
#menu-item-1993{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
#menu-item-1997{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
#menu-item-1995{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
#menu-item-1996{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 50px;
line-height: 50px;
}
#menu-item-1994{
border-bottom: 1px solid #e1e1e1;
padding: 1px;
margin-bottom: 0;
height: 40px;
line-height: 40px;
}
/* カテゴリーの文字枠のホバー */
#menu-item-1993:hover{
background-color:#F3F3F3;
}
#menu-item-1997:hover{
background-color:#F3F3F3;
}
#menu-item-1995:hover{
background-color:#F3F3F3;
}
#menu-item-1996:hover{
background-color:#F3F3F3;
}
#menu-item-1994:hover{
background-color:#F3F3F3;
}
/* 見出しタグh2 */
.article h2 {
background-color: #342F3A;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
border-radius: 5px;
}

/* 見出しタグh3 */
.article h3 {
border-top: 5px solid #342F3A;
border-bottom: 5px solid #342F3A;
border-left: 0 none;
color: #342F3A;
padding: 15px 30px;
}
/* トップページ抜粋文非表示 */
.entry-read a{
display:none;
}
.entry-snippet{
display:none;
}

/* トップページ記事一覧 */
#main .entry {
clear: both;
margin-bottom: 40px;
margin-right: 10px;
padding: 10px;
}
#main .entry:hover{
background-color:#F3F3F3;
}
.post-meta {
margin-bottom: 0.5em;
text-align: right;
background-color: #342F3A;
color: #FFF;
font-size: 16px;
}
.entry .post-meta a {
color: #FFF;
}