Simplicity簡単カスタマイズ！SNSボタン・引用・ヨメレバカエレバ

2017/8/4 WordPress

よなかのはなし_01

WordPressの「Simplicity」は、拡張性が高くカスタマイズしがいのあるテンプレートです。デフォルトのままでも十分見やすいんですが、「Simplicity」っぽさを消し、もっとシンプルでオシャレな感じにできないかと思い、色々と手を加えてみました。今回はその中から、引用・SNSボタン・目次・サイドバーのカテゴリー・リンク色・ヨメレバ・カエレバをちょっとおしゃれにするカスタマイズをご紹介します！

SPONSORED LINK

1、SNSボタンをフラットデザインに

Simplicityには、投稿本文・投稿本文下に設置できるSNSボタンデザインが数種類用意されており、当ブログはその中の「バイラルタイプ」を使用しています。

 

デフォルト（バイラルタイプ）

Simplicityカスタマイズ_SNSボタン変更バイラル

 

デフォルトだとボタン間に余白があるのですが、フラットデザインに近づけるため、まずこの余白を消します。ボタンの形状も、角丸から四角に戻しました。

 

カスタマイズ途中

Simplicityカスタマイズ_SNSボタン変更前フラット

 

そして、Pocetボタンは背景色を落ち着いたサーモンピンクに変更。最後に「Twitter・Facebook・Hatena・Pocket」の文字を消せば完成。ボタンをアイコンとカウント数だけにしたのは、ディスプレイ幅の狭いスマホだとボタン内の文字が潰れ、レイアウトが崩れてしまうからです。

 

カスタマイズ後（フラットタイプ）

Simplicityカスタマイズ_SNSボタン変更後フラット文字なし

 

その後、リクエストがあったのでFeedlyボタンも追加しました。横幅をwidth:20%に変更し、他ボタン同様「Feedly」の文字は消しています。

 

カスタマイズ後（Feedly追加）

Simplicityカスタマイズ_SNSボタン変更後PC

 

記事導入後のイメージ（PC表示）

Simplicityフォントカスタマイズ_変更後インデックスページ

 

記事導入後のイメージ（PC表示）

Simplicityカスタマイズ_記事上カテゴリーモバイル表示

 

このカスタマイズに使用したCSSがこちら。

 

【CSS】

/* SNSボタン間の余白を消す */
.sns-group-viral ul.snsb li {
 width: 20%;
 margin: 0px;
}
/* ボタンの角丸を消す */
.sns-group-viral ul.snsb li a {
 border-radius: 0px;
}
/* ボタンの文字を消す */
.sns-group-viral .icon-facebook::after {
content: '';
}
.sns-group-viral .icon-hatena::after {
content: '';
}
.sns-group-viral .icon-pocket::after {
 content: '';
}
.sns-group-viral .icon-twitter::after {
content: '';
}
.sns-group-viral .icon-feedly::after {
content: '';
}
/* Pocketボタンの色をサーモンピンクにする */
ul.snsbs a.pocket-btn-icon-link{
background: #e8846b;
}

 

SNSボタンを６個設置して二列にする場合

Google＋ボタンを追加する場合は、各ボタンの横幅を広げて二列にしてあげたほうがいいかもしれません。フラットデザインのSNSボタンを二列にすると、このようになります。

 

カスタマイズ後のSNSボタン（フラットデザイン、二列）

Simplicityカスタマイズ_SNSボタン変更後フラット２列

 

各ボタン間に余白があると見た目が美しくないので、ここでは消してします。このカスタマイズをする場合は、Simplicityダッシュボード→外観→カスタマイズ→SNSと進み、６個のボタンにチェックボタンを入れておいてください。それから前述したCSSの下に、さらにCSSを追加します。

 

#sns-group-top ul li {
   margin: 0px;
}
.sns-group-viral ul.snsb li a {
margin: 0px;
}
.sns-group-viral ul.snsb li {
    width: 33.3%;
}
.sns-group-viral .icon-googleplus::after {
    content: '';
}
.sns-group-viral ul.snsb li a {
height: 50px;
line-height: 40px;
}

2、引用デザインをシンプルに

引用デザインは、背景色＋外枠＋引用符にしました。Simplicityのデフォルトでは右下に引用符が出てきますが、これを非表示にして左上に画像で引用符を追加。

 

カスタマイズ後（PC表示）

Simplicityカスタマイズ_引用デザイン

 

【CSS】

blockquote{
padding: 1.6em 1.6em 1.6em 4em;
margin: 0 0 1.6em;
background-color: #fff;
font-style: normal;
position: relative;
border: 1px solid #e1e1e1;
box-shadow: 0 3px 0 rgba(8,1,2,0.03);
border: 3px solid #d7d7d7;
background-color: #fdfdfd;
}
blockquote::before {
color: transparent;
content: "“";
font: 80px/1 Georgia,serif;
position: absolute;
top: 27px;
left: 28px; 
background:url("ここに引用符画像のURL") no-repeat top left;
display: block;
}
blockquote::after{
content: "";
}
blockquote a{
text-align: right;
display: block;
}

3、目次をつける

個別記事最初の見出し（H２）直上に、プルダウン式の目次を付けました。これはプラグイン「Table of Contents Plus」を使用しています。

 

カスタマイズ後・目次閉じた状態（PC表示）

Simplicityカスタマイズ_目次閉じる

 

【表示】をクリックして目次を開くと、こんなデザイン。スマホユーザーにストレスを与えないよう、プラグイン設定で「最初は目次を非表示」にしています。

 

カスタマイズ後・目次開いた状態（PC表示）

Simplicityカスタマイズ_目次開

「Table of Contents Plus」の設定

WordPressのダッシュボード→プラグイン→新規追加から「Table of Contents Plus」をインストールし、設定→TOC＋でプラグインの設定項目を開きます。基本設定内にある「post」と「最初は目次を非表示」にチェックを入れれば、個別記事にプルダウン式の目次を自動挿入できます。

 

TOC設定

4、カテゴリーを一列から二列に

当ブログはサイドバーに記事カテゴリーを表示させていますが、一列のままだと見にくいので二列にカスタマイズ。

 

カスタマイズ後（一列→二列）

Simplicityカスタマイズ_カテゴリー一列から二列

 

カテゴリーを二列にカスタマイズすると、当ブログではこのような見た目になります。

 

カスタマイズ後（PC表示）

Simplicityカスタマイズカテゴリー二列PC表示

 

【CSS】

/* カテゴリーを２列にする */
.widget_categories{
display: inline-block;
}
li.cat-item{
width:50%;
margin:0;
border:none;
float:left;
display:block;
}

5、サイドバーのリンク色を変更

Simplicityのデフォルト設定では、サイドバーにある人気記事、最新記事、記事カテゴリーのマウスホバー色が赤色になっています。リンク色は青に統一したかったので、ここも少しカスタマイズ。サイドバーのリンクは全て黒にし、マウスホバー時に青色・アンダーラインへ変わるようにしました。

カスタマイズ後

Simplicityカスタマイズ_リンクホバー色

 

【CSS】

/* カテゴリのリンク色を黒にし、ホバー時だけ青にして下線を引く */
#sidebar .widget_categories ul li a {
text-decoration: none;
color:#333;
}
#sidebar .widget_categories ul li a:hover{
text-decoration: underline;
color: #008cd7;
}
#body a:hover{
color: #008cd7;
}

6、ヨメレバ・カエレバをカスタマイズ

ヨメレバ・カエレバはブログに馴染むよう、かなりシンプルなデザインにしています。ヨメレバ・カエレバにAmazon・楽天のボタンを付けると余計なスクロールが発生してユーザビリティを損ねるので、テキストリンクのみにしました。さりげなく文章の中に入れ、さりげなく商品リンクだと主張する、ヨメレバ・カエレバはそんなイメージでカスタマイズしています。

ヨメレバ

ヨメレバは、amazlet風（CSSカスタマイズ用）でリンクを作り、本のタイトルとAmazonサイトのテキストリンクのみにしています。ヨメレバに関しては、余計なボタンや外枠をつけない方が、本文と一体化してクリックされやすくなります。

 

カスタマイズ前（PC表示）

Simplicityカスタマイズ_ヨメレバデザイン変更前

カスタマイズ後（PC表示）

Simplicityカスタマイズ_ヨメレバデザイン

 

【CSS】

.booklink-box a{
text-decoration: none;
font-size: 1.1em;
line-height: 160%;
color:#2196F3;
}
.booklink-name {
font-weight: bold;
font-size: medium;
}

 

カエレバ

カエレバは、シンプルなブックカード風にしました。背景色をつけてボックスの右下にウェブフォントでAmazonのロゴマークを表示させ、一目で商品リンクだと分かるようにしています。

 

カスタマイズ前（PC表示）
Simplicityカスタマイズ_カエレバデザイン変更前PC

 

カスタマイズ後（PC表示）
Simplicityカスタマイズ_カエレバデザイン変更後PC表示

 

要素をすべてレスポンシブにしているので、スマホ表示のときも要素が自動調整されます。PC表示のときとほとんどデザインは変わりません。

 

カスタマイズ後（モバイル表示）
Simplicityカスタマイズ_カエレバデザイン変更後モバイル

 

Simplicityにはデフォルトとでウェブフォント「Font Awesome」が搭載されているので、CSSでアイコンフォント呼び出せば、画像を使わずAmazonマークを表示させることができます。そのCSSがこちら。

 

【CSS】

.kaerebalink-box a{
color:#2196F3;
text-decoration: none;
line-height: 160%;
}
.kaerebalink-box:after{
font-family: FontAwesome;
content: '\f270';
position: absolute;
right: 10px;
bottom:10px;
color: #ddd;
font-size: 40px;
line-height: 100%;
}
.kaerebalink-box{
text-align:left;
padding: 15px;
background-color: #fcfcfc;
border: 2px solid #ddd;
position: relative;
}
.kaerebalink-link1 {
display: none;
}
@media screen and (max-width:680px){
.kaerebalink-image {
max-width: 95px;}
}

あわせて読みたい

hiroseyonaka802

トップへ戻る