シンプリシティ2おすすめカスタマイズ③「見出しと枠線」

酒屋ブロガーカズユキです

今回も

Simplicity(シンプリシティ)2

カスタマイズについて

引き続き書いていこうと思います。

前回、予告編として、

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;
}

たったこれだけです!

コピペして、あとは好きな色に変えるだけ!

カスタマイズが簡単なのも、Simplicity2の良い所。

どんどんCSSを追加していって

自分の理想のページに仕上げていきましょう!

シンプリシティ2おすすめカスタマイズ*見出しの装飾

ここからは、続けて上記内容と同じように

スタイルシートにコードを貼り付けていけば

カスタマイズできますので、

サクッとコピペして変更してみて下さい。

では、まずは見出しの色づけから!

変更前は、色も無く寂しい感じですが、

変更後は、見出しに色がついて目立ちますし、

記事も読みやすくなると思います。

見出しタグ(h2)を変更するには、

子テーマのスタイルシート(style.css)に

次のコードを追加します。

/* 見出しタグの変更(h2) */
.article h2 {
background-color: #57B196;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}

引用元⇒Simplicity公式サイト

では、どんどんいってみましょう!

見出しの装飾(サイド)

右側の緑色の線のこと。

シンプルではありますが、

アンダーバー(緑の下線)が有る無しでは

配列の見やすさに違いが出てきます。

では、貼り付けコードです。

/* サイドバーの見出しの装飾 */
#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」に変更すると

直線になりますので、お好みでどうぞ。

参照⇒Simplicity公式サイト

シンプリシティ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通話も受け付けてます♪

お気軽にお問い合わせください♪

酒屋ブロガー

一幸(カズユキ)でした。

お気に召しましたら、ぜひ記念に

下記ボタンから応援下さると励みになります♪

最後までお付き合い、ありがとうございました!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る