Simplicity関連記事とタグのカスタマイズ

Simplicityカスタマイズ3_08

久々にサイトのカスタマイズを行ったので、忘れないようメモ。今回はGoogle AdSense「Multiplex広告」の撤去と、Simplicity関連記事の追加、そして記事下のタグデザイン。

SPONSORED LINK

投稿者名を非表示に

最初に行なったのは、投稿者名の非表示。当サイトはWordPressのテーマ「Simplicity2」を使用しているので、「カスタマイズ」→「追加CSS」に以下のコードを記入。

/*投稿者名を非表示にする*/
.post-author.vcard.author{
display:none;
}

Simplicityデフォルト

Simplicityカスタマイズ3_01

カスタマイズ後

Simplicityカスタマイズ3_02

Simplicityタグのカスタマイズ

次は、フッターの先頭に「Tags:」を付け、その後ろにタグを表示させて左寄せにするカスタマイズ。先ほどと同じように「カスタマイズ」→「追加CSS」へ以下コードを記入。

/*タグを左寄せ*/
.footer-post-meta{
display:block;
text-align:left;
}
.footer-post-meta:before{
content:"Tags:";
color:#333;
font-size:16px;
font-wdight:bold;
margin-left:3px;
}
.footer-post-meta a{
color:#333;
font-weight:bold;
text-decoration:underline;
text-decoration-color:#c0c0c0;
margin-left:3px;
}

カスタマイズ後

Simplicityカスタマイズ3_04

タグアイコンをつけるパターンも試してみたのですが、少し野暮ったい感じがしたため、こちらはボツに。一応、コード載せておきます。

/*タグにアイコンを設定*/
.footer-post-meta a{
font-size:14px;
color:#555;
font-weight:bold;
text-align:left;
text-decoration:underline;
text-decoration-color:#c0c0c0;
margin-left:5px;
}
.footer-post-meta a:before{
font-family:FontAwesome;
content: "\f02b";
font-size:14px;
color:#555;
}

タグアイコンver.(ボツ)

Simplicityカスタマイズ3_05

Simplicity関連記事のカスタマイズ

次は、Simplicity関連記事のカスタマイズ。デフォルトではサムネイルつきリストになっていますが、これをテキストに変更。そしてモバイル・タブレット端末でのみ表示されるようCSSで調整しました。

まずは、WordPressの管理画面から「外観」→「カスタマイズ」→「レイアウト(投稿・固定ページ)」を開き、「関連記事の表示」にチェックを入れます。

Simplicityカスタマイズ3_06

あとは、以下コードを「追加CSS」内に記述するだけ。

/*記事下関連記事*/
#related-entries {
padding:0;
text-align:left;
}
.related-entry-content{
padding:0;
margin:0;
}
@media screen and (min-width:768px){
#related-entries{
display:none;
}}
#related-entries h2 {
padding:5px 0px 5px 5px;
margin-top:20px;
}
#related-entries h3 {
border:none;
padding-left:5px;
margin-top:0px;
font-size:15px;
}
.related-entry-snippet {
display:none;
}
.related-entry-thumb {
display:none;
}
.related-entry-thumb img {
display:none;
}

すると、このような見た目になります。ビフォーアフター。

Simplicityカスタマイズ3_07

左:Simplicityデフォルト

右:カスタマイズ後

とりあえず、今回いじったのはこの辺。

あわせて読みたい

トップへ戻る