久々にサイトのカスタマイズを行ったので、忘れないようメモ。今回はGoogle AdSense「Multiplex広告」の撤去と、Simplicity関連記事の追加、そして記事下のタグデザイン。
投稿者名を非表示に
最初に行なったのは、投稿者名の非表示。当サイトはWordPressのテーマ「Simplicity2」を使用しているので、「カスタマイズ」→「追加CSS」に以下のコードを記入。
/*投稿者名を非表示にする*/
.post-author.vcard.author{
display:none;
}
Simplicityデフォルト
カスタマイズ後
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;
}
カスタマイズ後
タグアイコンをつけるパターンも試してみたのですが、少し野暮ったい感じがしたため、こちらはボツに。一応、コード載せておきます。
/*タグにアイコンを設定*/
.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関連記事のカスタマイズ
次は、Simplicity関連記事のカスタマイズ。デフォルトではサムネイルつきリストになっていますが、これをテキストに変更。そしてモバイル・タブレット端末でのみ表示されるようCSSで調整しました。
まずは、WordPressの管理画面から「外観」→「カスタマイズ」→「レイアウト（投稿・固定ページ）」を開き、「関連記事の表示」にチェックを入れます。
あとは、以下コードを「追加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デフォルト
右：カスタマイズ後
とりあえず、今回いじったのはこの辺。
