久々にサイトのカスタマイズを行ったので、忘れないようメモ。今回は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デフォルト
右:カスタマイズ後
とりあえず、今回いじったのはこの辺。