酒屋ブロガーカズユキです
今回も
Simplicity（シンプリシティ）２
カスタマイズについて
引き続き書いていこうと思います。
前回、予告編として、
CSSコードを使っての
カスタマイズがメインですと
お伝えさせて頂きました。
「ダッシュボード」より
「外観」⇒「テーマの編集」へ進むと
「スタイルシート」の画面が表示されます。
要はここに、どんどん、気に入ったコードを
コピペして貼り付けていくという作業だけなので
誰でも簡単に出来ますのでご安心を。
では早速、貼り付けていってみましょう。
目次
シンプリシティ2おすすめカスタマイズ”記事を読む”ボタンの装飾
ではまず「記事を読む」ボタンから変えてみます。
デフォルトだと、あまり目立ちませんが
少し手を加えてやると見やすく、
ボタンも押しやすそうに見えますよね。
ではコードを貼り付けていきましょう。
下記コードをコピーして、
スタイルシート（CSSコード）の
最下部に貼り付けるだけで完了です。
/* 「記事を読む」ボタンの装飾 */
.entry-read a{
color:#fff;
font-size:14px;
background-color:#57b196;
border:1px solid #57b196;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}.entry-read a:hover{
color:#fff;
background-color:#9fd2c3;
border:1px solid #9fd2c3;
}
上記をコピーして、ワードプレスに戻り
「外観」から「テーマの編集」を開いて
スタイルシートの最下部に貼り付けるだけ。
このように、カスタマイズとは言いますが、
何もそんな難しい事では無く、コピペだけでも、
ほぼ大体のカスタマイズは出来ますから
ぜひ楽しんでやってみてください。
ちなみに、カラーの変更というのは
全般的に言えることなんですが、
上記コード内の「color:#fff;」という箇所で
「＃」のあとの「fff」の部分、つまり
「color:#◯◯;」←この「〇〇」の部分に
好きなウェブカラーを当て込むことで
自分好みのカラーに仕上げていけます。
文章だと難しそうに見えそうですが
コードをいじると言うほど、
全くもって難しい事ではありません。
基本コピペするだけですから。
まずはサクッと、簡単なボタンの装飾から
CSSコードを使ったカスタマイズ方法を
体験してみてください！
では続いて・・・
”関連記事を読む”ボタン
こちらも同じく、
下記コードをコピペして、
最下部に貼り付けて、完了です。
/* 関連記事の「記事を読む」ボタンの装飾 */
.related-entry-read a{
color:#fff;
font-size:14px;
background-color:#57b196;
border:1px solid #57b196;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}.related-entry-read a:hover{
color:#fff;
background-color:#9fd2c3;
border:1px solid #9fd2c3;
}
たったこれだけです！
コピペして、あとは好きな色に変えるだけ！
カスタマイズが簡単なのも、Simplicity２の良い所。
どんどんCSSを追加していって
自分の理想のページに仕上げていきましょう！
シンプリシティ2おすすめカスタマイズ＊見出しの装飾
ここからは、続けて上記内容と同じように
スタイルシートにコードを貼り付けていけば
カスタマイズできますので、
サクッとコピペして変更してみて下さい。
では、まずは見出しの色づけから！
変更前は、色も無く寂しい感じですが、
変更後は、見出しに色がついて目立ちますし、
記事も読みやすくなると思います。
見出しタグ（h2）を変更するには、
子テーマのスタイルシート（style.css）に
次のコードを追加します。
/* 見出しタグの変更（h2） */
.article h2 {
background-color: #57B196;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}
では、どんどんいってみましょう！
見出しの装飾（サイド）
右側の緑色の線のこと。
シンプルではありますが、
アンダーバー（緑の下線）が有る無しでは
配列の見やすさに違いが出てきます。
では、貼り付けコードです。
/* サイドバーの見出しの装飾 */
#sidebar h3 {
font-size:20px;
border-bottom:5px solid #57b196;
padding:10px 0;
}
関連記事も装飾（下線）
同じく、次のコードで、関連記事にも
アンダーバー（下線）を引くことが出来ます。
/* 関連記事の見出しの装飾 */
#related-entries h2{
font-size:20px;
border-bottom:5px solid #57B196;
padding:10px 0;
}
これらも同じように、
「font-size:◯◯px;」の◯◯（数字）を変えることで、
文字サイズを変更することができますし、また、
「#◯◯」の◯◯を変更すれば色を変えられますので、
好みのサイズや色に調整してみてください。
記事の境界線
では次に、記事と記事の間に
境界線を入れるコードです。
同じく、下記をコピペして
スタイルシート最下部に貼り付けます。
/* 記事と記事の間に線を引く */
#main .entry {
border-bottom: 1px dotted #333333;
padding-bottom: 15px;
}
同じく、関連記事にも
下記コードで境界線が引けます。
/* 関連記事と関連記事の間に線を引く */
#main .related-entry {
border-bottom: 1px dotted #333333;
padding-bottom: 15px;
}
境界線はあった方が見やすいので
閲覧者さんの為にも引いておくと良いでしょう。
因みに「dotted」を「solid」に変更すると
直線になりますので、お好みでどうぞ。
シンプリシティ2おすすめカスタマイズ＊枠線のカスタマイズ（線）
デフォルトでは、記事（メインカラム）や
サイドバー（ウィジェット）枠線で囲まれています。
これらを非表示にすることで、自分好みの
ページに仕上げたい方もいるでしょう。
では同じく、コードを貼り付けていきましょう。
※それぞれに消す、又は両方まとめて消す
どちらでも、お好みに合わせて行ってみて下さい。
＞記事（メインカラム）の枠線を消す
/* メイン部分の枠を消す */
#main {
border: none;
}
＞サイドバー（ウィジェット）の枠線を消す
/* サイドバーの枠線を消す */
#sidebar{
border:none;
}
＞記事とサイドをまとめて消す
/* メイン部分とサイドバーの枠を消す */
#main,#sidebar{
border:none;
}
シンプリシティ2おすすめカスタマイズ＊枠線のカスタマイズ（色）
では続いて、枠線は消さずに
色をつけて表示するコードです。
こちらも同様に、
それぞれに変えるか、まとめて変えるか
お好みに合わせてどうぞ。
＞記事（メインカラム）枠線の色を変える
/* メイン部分の枠の色を変える */
#main{
border:1px solid #dddddd;
}
＞サイドバー（ウィジェット）枠線の色を変える
/* サイドバーの枠線の色を変える */
#sidebar {
border:1px solid #dddddd;
}
＞記事・サイド枠線の色をまとめて変える
/* メイン部分とサイドバーの枠線の色を変える */
#main,#sidebar {
border:1px solid #dddddd;
}
＜補足＞
コード内「1px」の数字を変更する事で
枠線の太さが調節できます。
「#dddddd」が枠線の色です。
色を選ぶ時は「ウェブカラー辞典」から、
選んでみても良いですが「#dddddd」なら、
大体のデザインに馴染みます。
「solid」を「dotted」に変えると、
直線から点線に変わります。
シンプリシティ2おすすめカスタマイズ＊見出しと枠線まとめ
では今回は「見出し」と「枠線」
についてのカスタマイズ方法でした。
特に、記事数が多くなってくると
見やすさというモノが大切になってきます。
せっかく訪れてくれた読者さん、閲覧者さんに
気持ちよく見て頂けるよう、努力していきましょう！
それが自分のメディアってもんです。
（かくいう僕も、まだまだ勉強中です）
まとめて書くというのは、知識を高める上で
有効な手段だと僕は思っています。
インプットしたら、即アウトプットです！
では、また次回です♪
ありがとうございました
お問い合わせ＆メルマガ
「ブログではちょっと・・・」
という内容に関しては
僕のメルマガから発信していく予定です。
裏情報も混じるかも知れませんので
登録しておいて損はないかと思います。
（不定期ですし、やかましくはしません）
※万が一お気に召さなければ解除して
全力でゴミ箱に投げ捨ててやって下さい！
現状、稼げてる人なんて
みんな結構どん底味わってたりしますよ♪
ネットビジネスというのは
少しの努力さえあれば、
必ず結果の出るビジネスです。
諦めさえしなければ
失敗は永遠にやってきません！
今後とも、よろしくお願いいたします。
また、ご質問はこちらから
必要であればSkype通話も受け付けてます♪
お気軽にお問い合わせください♪
酒屋ブロガー
一幸（カズユキ）でした。
お気に召しましたら、ぜひ記念に
下記ボタンから応援下さると励みになります♪
最後までお付き合い、ありがとうございました！
