SimplicityのSNSボタン・引用・目次・ヨメレバ・カエレバをカスタマイズ

WordPressアイキャッチ

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

SPONSORED LINK

SNSボタンをフラットデザインにする

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

デフォルト(バイラルタイプ)

SimplicitySNSボタンデフォルト

デフォルトだとボタン間に余白があるのですが、フラットデザインに近づけるため、まずこの余白を消します。ボタンの形状も、角丸から四角に戻しました。Pocetボタンは、背景色を落ち着いたサーモンピンクに変更。最後に「Twitter・Facebook・Hatena・Pocket」の文字を消せば完成です。ボタンをアイコンとカウント数だけにしたのは、ディスプレイ幅の狭いスマホだとボタン内の文字が潰れ、レイアウトが崩れてしまうからです。

カスタマイズ後(フラットタイプ)

SimplicitySNSボタンカスタマイズ後

記事導入後のイメージ

SimplicitySNSボタンカスタマイズ後

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

CSS

/* SNSボタン間の余白を消す */
.sns-group-viral ul.snsb li {
 width: 25%;
 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: '';
}
/* Pocketボタンの色をサーモンピンクにする */
ul.snsbs a.pocket-btn-icon-link{
background: #e8846b;
}

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

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

カスタマイズ後

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

目次をつける

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

カスタマイズ後

Simplicity目次閉じたバージョン

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

目次(開いたとき)

Simplicity目次開いたバージョン

「Table of Contents Plus」の設定

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

TOC設定

カテゴリーを2列にする

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

カスタマイズ後

Simplicityカテゴリー2列

CSS

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

サイドバーのリンク色を変える

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

ヨメレバ・カエレバのカスタマイズ

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

ヨメレバ

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

カスタマイズ後

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のロゴマークを表示させ、一目で商品リンクだと分かるようにしています。

カスタマイズ前

Simplicityカエレバカスタマイズ前

カスタマイズ後

Simplicityカエレバカスタマイズ後

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

CSS

.kaerebalink-box a{
color:#2196F3;
text-decoration: none;
font-size: 1.1em;
line-height: 160%;
}
.kaerebalink-box:after{
content: '\f270';
position: absolute;
right: 10px;
bottom:10px;
color: #ddd;
font-size: 60px;
font-family: FontAwesome;
line-height: 100%;
}
.kaerebalink-box{
text-align:left;
font-size:small;/zoom: 1;
overflow: hidden;
padding: 15px;
background-color: #fcfcfc;
border: 1px solid #ccc;
position: relative;
}
.kaerebalink-info{
line-height:120%;/zoom: 1;
overflow: hidden;
margin-bottom:10px;
line-height:120%;
}
.kaerebalink-link1 {
display: none;
}
.kaerebalink-powered-date{
font-size:8pt;
font-family:verdana;
}
.kaerebalink-image {
float: left;
margin: 0 15px 10px 0;
max-width: 140px;
}
@media screen and (max-width:680px){
.kaerebalink-image {
max-width: 95px;}
}
SPONSORED LINK

あわせて読みたい



トップへ戻る