【保存版】Simplicityをおしゃれに!初心者でもできたカスタマイズ総まとめ。

【保存版】Simplicityをおしゃれに!初心者でもできたカスタマイズ総まとめ。

Simplicityをおしゃれにカスタマイズ

WordPressテーマ、Simplicity2でカスタマイズしたところをほぼ全部まとめました。

  • ブログのテーマ、Simplicityが良さそうだけどみんな使ってるしなぁ。
  • Simplicityのデザインを変えてみたいけど、どこをどういじったら良いかわからない…

という方の参考になれば嬉しいです。

  • コード部分に簡単な解説をつけております(随時追記していきます)ので、ご自身のサイトイメージに合わせてアレンジしていただければと思います。
  • すでにご自身のcssに書かれているスタイルとの競合により、思い通りの見た目にならない場合があるかもしれません。
  • カスタマイズは随時行っておりますので、記事の内容と実際の見た目が異なる場合がございます。なお、新しいカスタマイズは随時追記していく予定です。
  • コードはSimplicity2の子テーマに書くことを強くおすすめします。
  • スマホのスタイルはmobile.cssに書いていますが、もちろんメディアクエリーを使ってスタイルシートに書いていただいても構いません。
スポンサーリンク

ヘッダーのカスタマイズ

Simplicityのパソコン表示用ヘッダーをカスタマイズ
Simplicityのモバイル表示用ヘッダーのカスタマイズ

ヘッダーはブログタイトルと画像を重ねています。

PCとスマホではだいぶサイズが異なるので、僕はそれぞれ別の写真を使いました。

ブログタイトルはGoogle FontsのRock Saltを使ってロゴっぽく見せています。

Rock Saltはデフォルトだとかなり力強くラフな感じですが、文字間を空けることで少し柔らかいイメージにしています。

ヘッダーの高さは、「外観」→「カスタマイズ」→「ヘッダー」でPCを300px、スマホを160pxにしています。

さらに、「レイアウト(全体・リスト)」の「サイトタイトルの中央寄せ」にチェックを入れています。

このサイトと同じようにしたい場合は「ヘッダー」の「グローバルナビを横幅いっぱいにする」にもチェックを入れておいてください。


/* タイトルfont */
#site-title a{
  font-family: 'Rock Salt', cursive;
  font-size: 70px;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0.85;
  display: block;
}

#site-title {
  margin-top: 100px;
  margin-bottom: 30px;
}

#site-description {
  font-weight: normal;
  letter-spacing: 0.1em;
  font-family: "quicksand";
  padding-top: 10px;
  margin-top: 55px;
  font-size: 1.5em;
  color: navajowhite;
}

/*ヘッダーブログタイトル文字上からの余白*/
#site-title{
    margin: 4rem 2rem 1rem;
}
/*ブログタイトルのフォントサイズ*/
  #site-title a {
    font-size: 1.9rem !important;
    letter-spacing: 0.2rem;
    color: #fff;
    opacity: 1;
  }

メニューのカスタマイズ

グローバルメニュー

グローバルメニューをカスタマイズ

グローバルメニューはシンプルです。

色を黒に近い紺に、文字間を少しいじってフォントをGoogle Fontsにしたくらいです。


/*ホバー時の線と文字の色を変更*/
#navi ul li a:hover{
  color: #4394de !important;
  background-color:white;
  border-bottom: 2px #4394de  
}
#navi ul li a:before{
   background: #4394de !important;
}
#navi ul,#navi{
 background-color: #202035;
}

#navi ul,#navi li {
 color: #fff;
 position: relative;
 height: 100%;
}

#navi ul li a{
 vertical-align: text-bottom;
 height: 100%; 
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 0.13em;
}

#navi ul > li{
  position: relative;
  padding-top: 5px;
  padding-bottom: 3px;
  display: inline-block;
  vertical-align: bottom;
  line-height: 100%;
}

スマホのアコーディオンメニュー

Simplicityのスマホ用アコーディオンメニューをカスタマイズ

こちらは常に右上に固定してスクロール追従にしています。

メニューは余計な装飾をせずに、フォントをGoogle Fontsにして斜体にし、余白を調整しただけです。

また、メニューが開く前はアイコンが典型的なハンバーガーアイコンですが、開いたときにバツ印に変わるようにして閉じられることをわかりやすくしました。

こちらのアニメーションのやり方は調べても全然出てこなくて実装にかなり苦労したのですが、この記事を読んでくださっている方に特別に伝授しますね笑。

こちらのハンバーガーアイコンは良くあるFontAwesomeではなく、単純にhtmlでバーが3つ並んでいます。

このバーひとつひとつに回転のアニメーションをつけることで、にゅるっとバツ印に変わるようにしています。


/*アコーディオンメニュー*/
.slicknav_menu {   
    position: fixed;
    top: 0;
    right: 0;
    z-index:9999;
    background: transparent !important;
    padding: 5px;
    border-radius: 5px;   
}

.slicknav_menu .slicknav_menutxt {
    display: none;
}

.slicknav_menu .slicknav_icon {
    margin-left:0px;
}

.slicknav_btn {
    margin:0;
    background: transparent !important;
    text-shadow: none !important;
}

.slicknav_menu .slicknav_icon-bar {
    width: 1.75em;
    height: 0.25em; 
    background-color: #2ea3f2 !important;
    box-shadow: none;
    -webkit-transition: width .3s ease 0s,background-color .3s ease 0s,-webkit-transform .3s ease 0s;
    transition: transform .3s ease 0s,width .3s ease 0s,background-color .3s ease 0s;
    transition: transform .3s ease 0s,width .3s ease 0s,background-color .3s ease 0s,-webkit-transform .3s ease 0s;
}

icknav_nav ul, .slicknav_nav li {
    display: block;
    margin: 0 2rem 0 0;
}

.slicknav_nav a {
    padding: 0 3rem 0.5rem !important;
    margin: 0 0 0 1rem !important;
    text-decoration: none;
    color: #fff;
    font-family: 'Open Sans';
    letter-spacing: 0.15em;
    font-style: italic;
    line-height: 3;
}

[role="menu"][aria-hidden="false"] {
    background: rgba(0,0,0,.8) !important;
    padding: 1rem 0 3rem 2rem !important;
}

/*アイコンの変形*/
[tabindex="0"][aria-haspopup="true"][class="slicknav_btn slicknav_open"] .slicknav_icon-bar:nth-child(1){
    -webkit-transform: translate(1.53px,1.5px) rotate(45deg);
    -ms-transform: translate(1.53px,1.5px) rotate(45deg);
    transform: translate(1.53px,1.5px) rotate(45deg);
    width: 50%;
}

[tabindex="0"][aria-haspopup="true"][class="slicknav_btn slicknav_open"] .slicknav_icon-bar:nth-child(2){
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

[tabindex="0"][aria-haspopup="true"][class="slicknav_btn slicknav_open"] .slicknav_icon-bar:nth-child(3){
    width: 50%;
    -webkit-transform: translate(12.57px,-1.5px) rotate(45deg);
    -ms-transform: translate(12.57px,-1.5px) rotate(45deg);
    transform: translate(12.57px,-1.5px) rotate(45deg);
}

フォント

全体的なフォントであるfont-familyはこちらの記事のコードをそのままコピペさせていただきました。

参考font-familyの書き方まとめ:CSSでフォント種類を指定しよう

特にPC表示がかなり気に入っています。

スポンサーリンク

記事一覧・記事ページのカスタマイズ

PCでの記事一覧ページのレイアウト

記事一覧リストのレイアウトをカスタマイズ

こちらはよく見る一般的なブログ形式のレイアウトです。

「続きを読む」はなくてもわかるかなーと思ったのでなくしてしまっています。

「記事を読む」を消す(非表示)にするには、「外観」→「カスタマイズ」→「テーマ内テキスト」で「記事を読む」の欄に何も記入しなければ消すことができます。

画像のホバー時のエフェクトはこちらの記事のコードをそのまま使用させてもらっています。

参考WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】 | masalog.me(まさろぐ)


/* 記事一覧リストの記事タイトル */
.entry h2 a{
 font-weight: 600;
 font-size: 1.4rem;
 line-height: 1.6;
}

スマホでの記事一覧ページのレイアウト

Simplicityのスマホ用記事一覧リストのレイアウトをカスタマイズ

こちらはこの記事を書いている現段階ではSimplicityでやっている人はいないかと思います。

一番上に記事タイトル、左下にサムネイル、右側に投稿日・更新日・カテゴリー、その下に抜粋文を配置しています。

こちらもやり方が全然わからなかったのですが、ごにょごにょといじっていたらできました。

本当はPHPをいじった方が良いのかもしれませんが、CSSだけでいいという方がいらっしゃいましたらどうぞ。


/*エントリーカードのレイアウト*/
.entry-card .entry-thumb {
  margin-top: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  float: left;
}

.entry-card-content {
    margin-left: 0;
    position: relative;
}

#main .entry {
  position: relative;
}

/* サムネイルサイズ変更 */
.entry-card .entry-thumb img{
    width: 140px;
}

.entry-snippet {
  word-wrap: break-word;
  display: inline-block;
  position: relative;
  margin-left: 110px;
  margin-bottom: 0 !important;
  bottom: 0;
  right: 0;
}

.entry h2{
  margin-bottom: 1.5rem;
  padding: 0 5px 10px;
}

.entry h2 a{
 font-weight: 600;
 line-height: 1.6 !important;
 font-size: 1.05rem !important;
}

.entry .post-meta {
    margin-left: 40%;
}

投稿日・更新日・カテゴリー

post-meta(投稿日・更新日・カテゴリー)を右寄せにし、背景を白に、アイコンもなくしてSimplicityっぽさをなくしています。

日付はアイコンを使わない分、明朝体を斜体にしてアクセントにしています。


/* メタ情報の大きさを変更し、右側へ*/
.post-meta,.entry .post-meta a {
    font-size: 12px;
    line-height: 160%;
}

.entry .post-meta {
    text-align: right !important;
    margin-top: 1px !important;
}

.fa-fw {
    display: none/*アイコンをなくす*/
}

PC

Simplicityのメタ情報のカテゴリー(PC用)をカスタマイズ

デスクトップはカテゴリー名を白抜きにし、背景色をつけています。

フォントはGoogle Fontsを使い、文字間を調整しています。文字はCSSで大文字だけにしています。


.entry .post-date {
    font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif,'Dynalight', cursive;
    font-style: italic;
    font-weight: 200;
}


.post-meta a {
	color: #000000;
}

.post-meta {
	font-size: 12px;
        background-color: #FFFFFF;
        margin-bottom: 0.5em;
        text-align:right;
        color:#555;
}

.post-date,.entry-date,.entry-date.date.updated {
       font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif,'Dynalight', cursive !important;
       font-size: 1.2em !important;
       font-style: italic;
       font-weight: 200;     
}

.entry .post-meta .category a, .post-meta .category a, .entry .post-meta .category a {
    color: white;
    background: #5880AD;
    padding: 2px 6px 3px 7px;
    border-radius: 2px;
    letter-spacing: 0.11em;
    text-decoration: none;
    font-family: 'Open Sans','Avenir Next','Arial', YuGothic,'Yu Gothic',sans-serif;
    font-size: 1.12em;
    line-height: 1;
    vertical-align: text-top;
    text-transform: uppercase;
}

スマホ

Simplicityのメタ情報のカテゴリー( モバイル用)をカスタマイズ

モバイルは表示領域が小さく、背景色をつけたら若干くどくなってしまったため、文字自体に色をつけてイタリックにしています。

こちらもGoogle FontsのOpen Sansを使用しています。


.entry .post-meta .category,.entry .post-meta .category a,.post-meta .category,.post-meta .category a,.entry .post-meta .category a {
    background: #fff;
    padding: 1.5px 5px 0px 0px;
    font-size: 1.07em;
    color: #5880AD;
    font-style: italic;
    font-family: 'Open Sans';
    letter-spacing: 0.07em;
    margin-left: -2px;
    margin-right: 1px;
    vertical-align: baseline;
    text-transform: unset;
}

/*メタ情報の更新日*/
.post-date,.entry-date,.entry-date.date.updated,entry-date.date.published.updated {
       font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif,'Dynalight', cursive !important;
       font-size: 14px !important;
}

.published:after,.entry-date.date.updated:after,.entry-date.date.published.updated:after {
 content:'/';
 font-style: normal;
 margin-left: 0.5em;
}

/*以下、固定ページで日付の後ろのスラッシュを非表示にする場合(XXの部分をご自身の固定ページの記事番号に変えてください)*/
#post-XX .post-date:after,#post-XX .entry-date:after,#post-XX .entry-date date updated:after,#post-XX .post-date:after,#post-XX .entry-date:after,#post-XX .entry-date date updated:after {
 display: none;
}

パンくずリスト

グレーっぽい色にし、アイコンをなくしてかなりシンプルにしています。

Simplicityのパソコン用パンくずリストをカスタマイズ

スマホではGoogle Fontsを使い、斜体にしています。

、モバイル用パンくずリストをカスタマイズ


/* パンくずリスト */
#breadcrumb a {
    color: #A4A4A4; 
    font-size: 11px;
}

#breadcrumb {
    color: #A4A4A4; 
    font-size: 11px;
}

#breadcrumb a {
    color: #A4A4A4;
    font-size: 11px;
    font-style: italic;
    font-family: 'Open Sans';
    letter-spacing: 0.05em;
}

目次

Table of Contents Plusのプラグインを使い、デザインをいじっています。

詳しくはこちらの記事を御覧ください。

WordPressに目次を設定しておしゃれにデザインカスタマイズする方法(CSSサンプル8つ)
WordPressブログに目次を導入・設定して、見た目をおしゃれにカスタマイズしていく方法をご紹介します。 すでにプラグインを...

Table of Contents Plusはカスタマイズしている方もそれなりにいらっしゃると思いますが、似たようなデザインもよく見かけますよね。

このブログのデザイン以外のものも紹介しているので、人と被りたくないって方は是非コードをコピペしてお使いください。

見出し

h2見出し

h2見出しのデザインをカスタマイズ

左側に下線をつけて文字サイズを調整しています。

個人的に、見出しの前に大きく余白をとった方がまとまりがわかりやすいと感じているので、上に大きくmarginを追加しています。

不要であれば該当部分を削除してください。

また、余白を追加した場合、固定ページなどで記事の最初に見出しが来る場合は余白が大きいと不自然に見えます。

記事の最初に見出しが来てしまう場合は、一番下のコードを追記してください。

PCとスマホではバランスの問題で文字サイズを変えています。


.article h2 {
    font-size: 150%;
    padding: 12px 0 12px 13px;
    color: #4D517D;/*文字色*/
    line-height: 1.6em;
    border-left: #4D517D solid 9px;/*見出しの左側に線*/
    margin-top: 150px !important;/*h2見出しの前に大きな余白*/
    margin-left: 0.5px;
    margin-bottom: 40px;
  }

/*以下、余白を空けた時用(xxの部分を該当の記事番号に変更してください)*/
#post-xx .article h2:first-child, #post-xx .article h2:first-child {
 margin-top: 10px !important;
}

.article h2 {
 font-size: 120%;
}

h3見出し

h3見出しのデザインをカスタマイズ

左側にFont Awesomeのアイコンを使ってチェックマークをつけています。


.article h3 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border-bottom:0;/*デフォルトのスタイルを消す*/
padding:1px 30px;
margin-top: 60px !important;
color: #555;/*文字色*/
}

.article h3:before {
font-family: FontAwesome;/*アイコンフォント*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #6C9FCE; /*アイコン色*/
}

.article h3 {
 font-size: 1.2em;
}

h4見出し

h4見出しのデザインをカスタマイズ

こちらは色を黒に近いグレーにして下線をつけただけです。


.article h4 {
 font-size: 1.1em;/*文字サイズ*/
 border-bottom: solid 1px;/*下線*/
 color: #454545;/*色*/
 font-weight: bold;/*太字に*/
}

リンク関係

Simplicityの場合は、テーマカスタマイザーから簡単に変えることができます。

「外観」→「カスタマイズ」→「色」の「リンク色」「リンクホバー色」のところで変更します。

通常時、ホバー時ともにサイト全体のイメージに合わせて青系の色にしています。

  • リンク色→#4394de
  • リンクホバー色→#6495ed

バッジのスタイル

「バッジ」というのは、「参考」とか載せたい時に使うコレですね。

Simplicityのバッジのデザインをカスタマイズ

Simplicityはこういうタグ・スタイルもデフォルトで用意されているのが素晴らしいです。

僕みたいになんでもかんでもカスタマイズしたくなっちゃう病気にかかっている人(笑)は、是非色などを変えてみてください。

個人的にはデフォルトのスタイルだと文字の周りの余白と、右側の余白が狭く感じたので少し広げています。


/*バッジのスタイル*/
.sankou,
.sanko,
.reffer,
.ref{
  color: #fff;/*文字色*/
  background-color: #fd9292;/*背景色*/
  padding: 2px 6px 1px;/*内側の余白*/
  border-radius: 3px;/*角丸*/
  font-size: 13px;/*文字サイズ*/
  letter-spacing: 0.07em;/*文字間*/
  margin-right: 6px;/*バッジの右側に余白*/
}

ボックスのスタイル

Simplicityのボックスのデザインをカスタマイズ

こちらもSimplicityでは最初からスタイルが用意されています。

今のところinfomationしか使っていないのですが、他のボックスも同様にしてカスタマイズできます。

アイコンの大きさを少し大きくして、背景色をブルーにしています。


/*infomationなどのスタイル*/
.information::before, .question::before, .alert::before {
    font-family: "FontAwesome";
    font-size: 45px;
    position: absolute;
    top: 20px;
    left: 13px;
    color: #a5d7ff;
    background-color: #f0f7ff;
}

.information, .question, .alert {
    background-color: #f0f7ff;
    padding: 20px 20px 20px 72px;
    border-radius: 5px;
    position: relative;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}

引用のスタイル

引用ボックスのデザインをカスタマイズ

引用は個人的にはあまり使わないのですが、病気なのでこちらもカスタマイズしてしまいました笑。

アイコンを左上と右下につけ、引用元(citeタグを使用)を表記したときも綺麗に収まるようにしています。

色などは好きなように変えてみてください。


<blockquote>
        <p>ここに引用を書く</p>
        <cite>ここに引用元を書く</cite>
</blockquote>

/*引用のスタイル*/

/*全体*/
blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;/*内側の余白*/
    box-sizing: border-box;
    font-style: italic;/*斜体に*/
    border: solid 2px #3ca5d4;/*外枠*/
    color: #464646;/*外枠の色*/
    background-color: #fff;/*背景色*/
}

/*左上アイコン*/
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 20px;/*引用アイコンの位置*/
    left: 15px;/*引用アイコンの位置*/
    vertical-align: middle;
    content: "\f10d";/*アイコンのユニコード*/
    font-family: FontAwesome;/*アイコンフォント*/
    color: #3ca5d4;/*アイコンの色*/
    font-size: 25px;/*アイコンの大きさ*/
    line-height: 1;
}

/*内側の文章*/
blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

/*引用元*/
blockquote cite {
    display: block;
    text-align: right;/*右寄せ*/
    color: #888888;/*文字色*/
    font-size: 0.9em;/*文字サイズ*/
    margin-bottom: 10px;
    margin-right: 40px;
}

/*右下アイコン*/
blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 20px;
    right: 15px;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    color: #3ca5d4;
    font-size: 25px;
    line-height: 1;
}

リスト(li)

順序なしリスト(ul)

順序なしリストのデザインをカスタマイズ

順序なしリストは多用するのでシンプルにしています。

順序なしリストの中にさらにリストを入れる時(入れ子)は、左側にシェブロンマークをつけています。


/* リストのスタイル */

/*リスト全体*/
ul ol {
  margin-top: 20px;
  margin-bottom: 30px;
}

#the-content > ul li,#the-content > ol li {
  margin: 0 0 7px;
  line-height: 1.7;
  position: relative;
  left: -10px;
}

/*順序なしリスト*/
#the-content > ul > li{
  list-style-type: none;
}

#the-content > ul > li:before {
  content: '';
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
  background: skyblue;/*ポチの色*/
  position: relative;
  left: -15px;
  top: -3px;
}

/*入れ子リスト*/
#the-content >ul li>ul{
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

#the-content >ul li>ul>li:before{/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : -1.5em;/*左端からのアイコンまでの距離*/
  color: #2d8fdd;/*アイコン色*/
  font-size: 0.9em;
  padding-top: 0.15em;
}

/*以下、infomationボックスなどの中にリストを書く場合*/
.information > ul li,information > ol li {
  margin: 0 0 7px;
  line-height: 1.7;
  position: relative;
  left: -10px;
}

.information > ul > li{
	list-style-type: none;
}

.information > ul > li:before {
	content: '';
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 100%;
	background: skyblue;
	position: relative;
	left: -15px;
	top: -3px;
}

.information > ul li>ul{
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.information > ul li>ul>li:before{/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : -1.5em;/*左端からのアイコンまでの距離*/
  color: #2d8fdd;/*アイコン色*/
  font-size: 0.9em;
  padding-top: 0.15em;
}

順序つきリスト(ol)

順序つきリストのデザインをカスタマイズ

順序を説明したいときに使うリストは、こちらの記事を参考にさせていただきました。

参考コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

ただ、liタグごとの文章が2行以上になったときにアイコンを1行目の文頭につけたかったので、若干位置を調整しています。


#the-content >ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: #f5faff;
  border-radius: 5px;
  border: dotted 1px #5c9ee7;
}
#the-content >ol li{
  position: relative;
  padding-left: 35px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 35px;
}

#the-content >ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 0.4em;
  /*-moz-transform: translateY(-1.55em);
  	-webkit-transform: translateY(-1.55);
  	-o-transform: translateY(-1.55);
  	-ms-transform: translateY(-1.55);
  	transform: translateY(-1.55);*/
}

SNSシェアボタン・フォローボタン・タイトルのカスタマイズ

SimplicityはデフォルトでSNSボタンがついているのも素晴らしいですよね。

更にシェア数も表示できますし。

シェアボタン

Simplicityのバイラルシェアボタンのデザイン(PC用)をカスタマイズ
Simplicityのバイラルシェアボタンのデザイン(スマホ用)をカスタマイズ

バイラルシェアボタンを一列に均等配置するカスタマイズをしています。

PCでは少しパステル調の色に、スマホでは彩度を抑えてシックな感じにしています。


/*シェアボタン均等割り*/
.sns-group-viral ul {
	  display: flex; 
}
/* SNSの名称部分を非表示 */
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-line::after, .icon-feedly::after {
    display: none;
}
ul.snsbs li a{
  padding: 8px 6px 3px 6px;
  }
.sns-group-viral ul.snsb li a{
  border-radius: 4px;
  font-size: 19px;
}

/*色を変更*/
ul.snsbs a.twitter-btn-icon-link{background-color:#74c1f8;}
ul.snsbs a.facebook-btn-icon-link{background-color:#6680d8;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#fd6969;}
ul.snsbs a.hatena-btn-icon-link{background-color:#6eaff3;}
ul.snsbs a.pocket-btn-icon-link{background-color:#ff6d82;}
ul.snsbs a.line-btn-icon-link{background-color:#00c600;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#9ade79;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}

.sns-group-viral ul.snsb li a{
  border-radius: 2px;
  font-size: 19px;
}

ul.snsbs a.twitter-btn-icon-link{background-color:#6FB6C3;}
ul.snsbs a.facebook-btn-icon-link{background-color:#6998b9;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#ea727d;}
ul.snsbs a.hatena-btn-icon-link{background-color:#53a9dc;}
ul.snsbs a.pocket-btn-icon-link{background-color:#ff6d89;}
ul.snsbs a.line-btn-icon-link{background-color:#39C67F;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#82C36F;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}

フォローボタン

Simplicityのフォローボタンのデザインをカスタマイズ

シェアボタンがカラフルなので、フォローボタンはモノトーンでシンプルにしています。

スマホでは中央寄せにしています。

また、固定ページではSNSボタンはいらないと思ったので非表示にしています。


/*SNSフォローボタン*/
ul.snsp li a span {
  background-color: #fff !important;
  color: rgba(0, 0, 0, 0.3) !important;
}

/* post-xx の下部SNSボタンの非表示(以下のxxの部分を該当の記事番号に変更してください)*/
#post-xx #sns-group,#post-xx #sns-group {
 display: none;
}

シェアタイトル・フォロータイトル

タイトルはPCとスマホでスタイルを変えています。

PCは単に色を変えて太字にしただけです。

スマホでは中央寄せにして文字の下にだけ下線をつけています。

Google Fontsを使い、文字間を調整しています。


/*フォローメッセージ*/
.sns-follow-msg {
    margin: 8px 0 0 0;
    font-size: medium;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: #256198;
}

/*シェアメッセージ*/
.sns-share-msg {
    margin-bottom: -20px;
    font-size: medium;
    letter-spacing: 0.1em;
    /* text-align: center; */
    font-weight: bold;
    color: #256198;
}

/*フォローメッセージ*/
.sns-follow-msg {
    margin: 8px 0 0 0;
    font-size: medium;
    letter-spacing: 0.1em;
    text-align: center;
    font-weight: 200;
    color: #256198;
    font-family: 'Open Sans', "Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif !important;
    font-weight: 200;
    text-transform: uppercase;
    text-align: center;
    margin-top: 8rem;
    margin-bottom: 3rem !important;
    padding-bottom: 2rem !important;
    position: relative;
}

/*シェアメッセージ*/
.sns-share-msg {
    font-size: medium;
    letter-spacing: 0.1em;
    text-align: center;
    font-weight: 200;
    color: #256198;
    font-family: 'Open Sans',"Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif !important;
    font-weight: 200;
    text-transform: uppercase;
    text-align: center;
    margin-top: 8rem;
    margin-bottom: 3rem !important;
    padding-bottom: 2rem !important;
    position: relative;
}

.sns-follow-msg:before,.sns-share-msg:before,#related-entries h2:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: ".";
    font-size: 0;
    display: block;
    margin: auto;
    width: 50px;
    height: 1px;
    background-color: #256198;
    transform: rotate(-0deg);
    box-sizing: border-box;
}

ul.snsp {
    text-align: center;
}

.footer-post-meta {
    text-align: center;
    margin-top: 4rem;
    font-size: 0.9rem;
}

関連記事のカスタマイズ

Simplicityの関連記事のデザイン(PC用)をカスタマイズ

Simplicityの関連記事のデザイン(スマホ用)をカスタマイズ

PCでは2列になるように表示しています。

こちらの記事を参考にさせていただきました。

参考WordPress+Simplicityの関連記事を2列化 | 出不精の横好き

抜粋を非表示にして、タイトルを太字に、文字色をグレーにしています。

ホバー時にカード風に浮き上がるエフェクトを付けています。


/*関連記事*/
#related-entries h2 {
    color: #256198;
    font-weight: bold;
    position: relative;
    margin-bottom: 15px;
    font-size: 150%;
    line-height: 1em;
    letter-spacing: 0.1em;
    font-family: 'Avenir Next' !important;
}

/* 関連記事間に線を引く */
#main .related-entry {
 border-bottom: 1px solid #F0F0F0;
 padding-bottom: 10px; 
}

/*タイトルの色、フォントなど(人気記事・新着記事も)*/
.entry h2 a,.related-entry-title a,.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: #666;
}

.widget_new_entries a,
.widget_new_popular a,
.widget_popular_ranking a,
.wpp-list a {
  font-weight: bold;
  line-height: 1.7em;
  font-size: 0.83em;
}

/* 関連記事をタイル調へ変更(PC)*/
#related-entries {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
}

#related-entries h2 {
 width: 100%;
 }

#related-entries .cf/*.hover-card*/ {
 flex: 0 330px;
 height: 100px;
 margin: 0 5px 20px 5px;
}

.related-entry-snippet {
 display: none;
}

.related-entry-content {
 white-space: normal;
 overflow: hidden;
 text-overflow: ellipsis;
 padding: 0 5px 0 0;
 height: 100%;
}

.related-entry-thumb {
 margin: 0;
 padding: 0;
}

.related-entry {
 padding: 0;
 height: 100%;
 width: 100%;
 transition: .4s;
}

.related-entry-title {
font-size: 16px;
margin-top: 5px;
}

.related-entry-title a{
font-size: 16px;
}

.related-entry:hover{ /* ホバー時変化 */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.related-entry-thumb img {
width: 100px;
height: 100px;
}

/*関連記事*/
#related-entries h2 {
    color: #256198;
    font-weight: 200;
    position: relative;
    line-height: 1em;
    letter-spacing: 0.11em;
    font-family: 'Open Sans',"Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif !important;
    font-size: 1.25rem;
    /*letter-spacing: 0.15em;*/
    text-transform: uppercase;
    text-align: center;
    margin-top: 8rem;
    margin-bottom: 3rem !important;
    padding-bottom: 2rem !important;
    position: relative;
}

.related-entry h3, .related-entry h3 a {
    font-size: .9rem;
    line-height: 140%;
}

スポンサーリンク

サイドバーのカスタマイズ

こちらはPCとスマホでだいぶスタイルを変えています。

PCではタイトルに手書き風フォントを使っていますが、モバイルではゴシックにし、下線をつけています。

検索ボックス

Simplicityの検索ボックスのデザインをカスタマイズ

何の変哲もない検索ボックスに見えるかもしれませんが、実はこだわりの詰まったカスタマイズとなっております笑。

こちらも調べるのにかなり時間がかかりました…。

まず、Simplicityのデフォルトだと虫眼鏡のマークが画像になっているのですが、画面サイズによってぼやけるのが嫌だったのでFont Awesomeのアイコンに変えました。

「ブログ内を検索」の文字はテーマカスタマイザーの「カスタマイズ」→「テーマ内テキスト」から変更できます。

フォントや文字間もいつも通り細かく指定しています笑。

また、全体的にフラットなデザインに統一したかったので影をなくし、ボックスではなく下線のみにしてシンプルにしています。

ただ、こちらは好みがあるかと思いますので、ボックスのままが良いという方は/*ボックス自体のスタイル*/のborder-top,left,right,bottomの部分を削除し、新たにborderプロパティで指定していただければボックスになります。

border-radius:0px;

のゼロの部分にお好みの数字を入れれば、角丸にすることもできます。

さらに、focus時(検索ボックスにカーソルを合わせたとき)にじんわりと色が変わるエフェクトを施しています。


(function($){
	$(function(){
		$("#searchsubmit").after("<label for="searchsubmit"></label>");
	});
})(jQuery);

/*検索ボックス*/
#searchform input {
  margin-bottom: 0;
}
#searchform #s {
  padding-right: 2em;
}

#searchsubmit {
  background: initial;
}
#searchsubmit + label {
  cursor: pointer;
}

/*虫眼鏡マークをアイコンに*/
#searchsubmit + label::before {
  content: "\f002";
  font-family: "fontAwesome";
  font-size: larger;
  color: #202035;;
  position: absolute;
  top: 7px;
  right: 10px;
}

/*フォーカス時のスタイル*/
input#s:focus {
    outline: none;
    box-shadow: none;
    background: #a7d4fd;
    background-repeat-x: inherit;
}

/*ボックス自体のスタイル*/
#s {
    background-clip: padding-box;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    box-shadow: none;/*影をなくす*/
    border-top: none;/*枠線をなくす*/
    border-left: none;/*枠線をなくす*/
    border-right: none;/*枠線をなくす*/
    border-radius: 0;/*角丸をなくす*/
    border-bottom: 1px solid #202035;/*下線のみに*/
    background: #fff;/*背景色*/
    transition: 1s ease-in;/*じんわり変化*/
    background-repeat-x: no-repeat;
}

/*中の文字*/
input::-webkit-input-placeholder {
    color: #ccc;
    font-weight: lighter;
    font-family: 'Arial','Avenir Next';
    letter-spacing: 0.07em;
}
input:-moz-placeholder {
    color: #ccc;
    font-weight: lighter;
    font-family: 'Arial','Avenir Next';
    letter-spacing: 0.07em;
}
input::-moz-placeholder {
    color: #ccc;
    font-weight: lighter;
    font-family: 'Arial','Avenir Next';
    letter-spacing: 0.07em;
}
input:-ms-input-placeholder {
    color: #ccc;
    font-weight: lighter;
    font-family: 'Arial','Avenir Next';
    letter-spacing: 0.07em;
}

この記事を書いている段階では記事数が少ないので、ほとんど検索されていないのですが笑、記事が多いブログほどサイト内検索は良く使われるかと思います。

こだわりたい方の参考になれば嬉しいです。

新着記事・人気記事

Simplicityの新着記事のデザインをカスタマイズSimplicityの人気記事のデザインをカスタマイズ

こちらは文字サイズ、文字色、余白などを細かく調整してシンプルに&スッキリさせています。

ホバー時にカード風に浮き上がって影がつくエフェクトをかけています。

PC用のタイトルにはサイトタイトルと同じ手書き風フォントを使っています。

スマホではタイトルに別のGoogle Fontsを使い、文字の部分にだけ下線を引いています。


/* wpp,新着記事タイトルスタイル */
a.wpp-post-title,a.new-entry-title {
display:-ms-flexbox;
display: flex;
height: 75px;
padding: 5px;
-ms-align-items: center;
align-items: center;
}

/* 新着記事リスト下余白 */
#sidebar li.new-entry {
 margin-bottom: 15px;
}

/*サムネイル*/
.widget_new_popular ul li img,
.widget_popular_ranking ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 8px;
  margin-left: 5px;
  margin-right: 5px;
  width: 75px;
  height: 75px;
  margin-bottom: 10px;
}

人気記事ランキングのカスタマイズについてはこちらに詳しく書きましたのでご参照ください。

Simplicityに人気記事ランキングを導入&順位ごとに色を変えるカスタマイズ方法。
ブログをしばらく書いていると人気記事ランキングを入れてみたくなるのが人情というものです(僕は7記事目くらいで入れました…)。 ...

サイドバーの見出し

Simplicityのサイドバーの見出しのカスタマイズ

サイドバーの中で、フォローボタンのタイトルのみ左側にFont Awesomeのアイコンをつけています。

こちらは色々やり方があると思いますが、nth-childだと上手くいかないのでnth-of-typeを使って指定しています。


/*サイドバー見出しを変更*/

/*フォローボタン以外の見出し*/
#sidebar aside:not(:nth-of-type(3)) h3 {
    color:#202035;
    font-weight: lighter;
    position: relative;
    margin: 100px 0 50px;
    font-size: 120%;
    line-height: 1em;
    letter-spacing: 0.1em;
    font-family: 'Rock Salt','Avenir Next' !important;
    text-align: center;/*中央寄せ*/
}

/*フォローボタンの見出し*/
#sidebar aside:nth-of-type(3) h3 {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.4;
    padding: 1px 30px;
    font-size: 105%;
    color: #5880AD;
    letter-spacing: 0.1em;
    font-family: 'Rock Salt','Montserrat','Avenir Next' !important;
    font-weight: lighter;
    text-align: center;
    margin: 80px 0 20px;
}

/*アイコンのスタイル*/
#sidebar aside:nth-of-type(3) h3:before {
    font-family: FontAwesome;/*フォローボタンの見出しのみアイコン*/
    content: "\f2b5";
    font-size: 0.9em;    
    margin-right: 0.8em;
    vertical-align: middle;
    display: inline-block;
}

/*タイトル下の下線をなくす*/
h3 widget_title sidebar_widget_title {
    border-bottom:0;
}

/*フォローメッセージを非表示に*/
#sidebar .sns-follow-msg {
    display: none
}

/*サイドバーのみフォローボタンを中央寄せ*/
#sidebar ul.snsp {
    text-align: center;
}

/*サイドバー見出しを変更*/
#sidebar aside:not(:nth-of-type(3)) h3 {
    color:#666/*202035*/;
    font-family: 'Open Sans',"Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif !important;
    font-size: 1.25rem;
    font-weight: 200;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 8rem;
    margin-bottom: 3rem !important;
    padding-bottom: 2rem !important;
    position: relative;
}

#sidebar aside:not(:nth-of-type(3)) h3:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: ".";
    font-size: 0;
    display: block;
    margin: auto;
    width: 50px;
    height: 1px;
    background-color: #222/*202035*/;
    transform: rotate(-0deg);
    box-sizing: border-box;
}

#sidebar aside:nth-of-type(3) h3 {
    font-family: 'Open Sans',"Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif !important;
    color: #5880AD;
    font-size: 1.05rem;
    font-weight: 200;
    letter-spacing: 0.14em;
    text-align: center;
    margin-top: inherit;
    margin-bottom: 2rem !important;
    position: relative;
}

#sidebar aside:nth-of-type(3) h3:before {
    font-family: FontAwesome;/*フォローボタンの見出しのみアイコン*/
    content: "\f2b5";
    font-size: 0.85rem;
    margin-right: 0.8em;
    vertical-align: middle;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}

#sidebar h3 {
   border-bottom: 0px !important
}

カテゴリーリスト

Simplicityのカテゴリーリストのデザインをカスタマイズ

PCでは左側に少し余白をつけただけです。

スマホはリンクの色を変え、中央揃えにしています。


.widget_categories ul li a {
    text-decoration: none;
    letter-spacing: 0.1em;
    font-family: 'Open Sans';
    font-style: italic;
    line-height: 2;
    margin-left: 4em;
}

#sidebar .widget_categories li{
    line-height: 1.6em;
    text-align: center;
    letter-spacing: 0.1em;
    text-indent: -0.8em;
    font-family: 'Open Sans';
    font-style: italic;
}

#sidebar .widget_categories li a{
    margin-left: 0;
    color: #6d5c5a;
    font-weight: 200;
}

フッターのカスタマイズ

Simplicityのフッターのデザインをカスタマイズ

背景を白にし、文字色・文字間・文字サイズなどを調整しています。


#copyright {
    padding: 20px 0;
    font-size: 110%;
    text-align: center;
    color: #808085;
    font-family: "Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif;
    letter-spacing: .05em;
    font-style: italic;
}

#copyright a {
    text-decoration: none;
    color: #808085;
    font-family: "Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif;
    letter-spacing: 0.05em;
    margin-left: 0.6em;
    font-style: normal;
    font-style: italic;
}

#copyright {
    padding: 20px 0;
    font-size: 80%;
    text-align: center;
    color: #aaa;
    font-family: 'Open Sans',"Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif;
}

#copyright a {
    text-decoration: none;
    color: #aaa;
    font-family: 'Open Sans',"Helvetica Neue", "Helvetica", 'Avenir', 'Avenir Next Condensed', "Interstate", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Source Sans Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif, serif;
    letter-spacing: 0.05em;
    margin-left: 0.5em;
}

「トップへ戻る」ボタンのカスタマイズ

Simplicityのトップへ戻るボタンをカスタマイズ

背景を丸くして半透明にし、中心のアイコンも変えています。

アイコンはテーマカスタマイザーから、「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」を選択し、「トップへ戻るボタンの表示」にチェックを入れます。

「トップへ戻るボタンのアイコン」の欄に、

fa fa-angle-up fa-2x

と入力してください。


/************************************
** TOPへ戻るボタン(Go to top)
************************************/
#page-top{
  position:fixed;
  display:none;
  right: 20px;
  bottom: 50px;
}

#page-top a{
  color:#fff;
  padding: 7px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  border-radius: 50%;
  font-size:18px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.22);
}
	
/************************************
** TOPへ戻るボタン(Go to top)
************************************/

#page-top a{
    font-size: 15px !important;
    width: 35px;
    height: 35px;
    line-height: 35px;
}

#page-top{
  right: 5px;
  bottom: 4rem;
}

スポンサーリンク

まとめ

この記事を書くのはめちゃくちゃ大変でしたが笑、Simplicityのカスタマイズは本当に楽しかったです。

Simplicityは無料とは思えないほど多機能で素晴らしいテーマです(多くの有料テーマより素晴らしいと思います)。

強いて言えば、人気であるがゆえにデザインが人とかぶりやすいことが難点。

しかし、「おしゃれなブログにしたい」という理由だけで有料テーマを購入するのはちょっともったいないと思います。

  • おしゃれなものが好き
  • 人とカブるのは嫌

というファッショニスタ気質の方の場合、有料テーマを買ったとしても、人と被って結局自分でカスタマイズしなければならなくなるでしょう。

どうせなら、無料テーマであるSimplicityをカスタマイズした方が、お金もかからず多機能性を享受でき、同時に知識もスキルも付きます。

そしてカスタマイズは何より楽しいです。

多少カスタマイズに時間がかかっても、自分でデザインしたブログは愛着が湧き、永く書き続けられるのではないでしょうか。

是非、自分だけのSimplicityをデザインしてみてください。

なお、ノンデザイナーである僕がここまでカスタマイズできたのはSimplicityをお使いの先輩ブロガーの方々、わかりやすくカスタマイズ・デザイン系の記事を書いてくださっている方々のおかげです。

この場を借りて深く御礼申し上げます。