カスタマイズ性に富んだWordPressのテーマSWELL。ただ設定しているうちに「これいらないんだけど……」っていうのがチラホラ。大体は外観→テーマ内にあるメニューなどからカスタマイズできるんだけど、中にはちょっといじらないと編集できない項目も。
そんな項目もCSSに記述することで簡単に変更することができたので備忘録として残しておこう。
要素の確認はFirebug Liteで確認
サイトの構造を知るためにはソースコードを確認するのが手っ取り早いんだけど、知識があまりないと目的の要素を探すのも一苦労。今ではChromeの開発者ツールでも同じようなことができるんだけど、なんとなく直感的ではないというか、単純に私が使いこなせていない。
かつて使っていたFirebugがChromeの機能拡張にあったので、そちらをインストールしてみた。
Firebug Lite：
https://chromewebstore.google.com/detail/firebug-lite-for-google-c/ehemiojjcpldeipjhjkepfdaohajpbdo
インストール後にFirebug LiteのアイコンかF12を押せばウィンドウが分割され、要素を確認できるというもの。
まあ基本的に使うのは消したい要素のclass属性を確認するというものだけなんだけどね。
余計なものなど……あるよね〜
消したかったのは、投稿記事下部に表示されるカテゴリーやタグのアイコンと、記事一覧ページに表示される– category –っていう表示。
これを先ほどインストールしたFirebug Liteで確認してみると、それぞれのclass属性が確認できる。
あとはこれらを削除するおまじないをstyle.cssに記述すればOK。WordPressのダッシュボードにある、外観→テーマファイルエディターでstyle.cssに記述ができるので、下記のように記述してファイルを更新のボタンを押せばOK。
.p-articleFoot{
display: none;
}
.c-pageTitle__subTitle{
display: none;
}
.wp-block-image figcaption {
text-align: left;
}一番下の.wp-block-image figcaptionの記述は、画像のキャプションをセンターではなく左ぞろえにするもの。これでひとまずは気になっていたところが解消できた！
追記：さらに、いろいろ調整したい部分が出てきたので、最終的にはこんな感じで落ち着いた。
/* 投稿記事下部のカテゴリーを非表示*/
.p-articleFoot{
display: none;
}
/* カテゴリー一覧ページのサブタイトルを非表示*/
.c-pageTitle__subTitle{
display: none;
}
/* キャプションを左ぞろえ*/
.wp-block-image figcaption {
text-align: left;
}
/* 投稿画像を角丸*/
.wp-block-image img {
border-radius:10px;
}
/* パンくずリストを非表示*/
#breadcrumb {
display: none;
}
/* メインビジュアルのスクロールをPCで非表示、SPで表示*/
@media screen and (min-width: 960px) {
.p-mainVisual__scroll{
display:none;
