このサイトのデザインを気に入ってくださった方がいたら嬉しいです。
このブログは、有料テーマ【トール】を、カスタマイズしています！
カスタマイズするためのCSSをご紹介しています。コードや設定を変更するときは、バックアップをとって、自己責任で行ってくださいね
私が【トール】を導入するにいたった理由の一つに、【タグ管理】という機能があります。
実はこれ、有料テーマの中には、似ている機能のプラグインが別売りされていたりするんです。
そんな機能がデフォルトで使える。
なんてありがたいんでしょう！
自作テーマ１０年戦士の私には未知の機能でしたが、実際に使ってみると、とっても便利そう！
できることが広がったり、日々の労力が削減できる機能ですね。
こんな便利な機能なんですけど、ほんのちょっとだけ不満が。
デフォルトのままだと、呼び出したタグに外枠がついて、その内側に余白ができてしまうのです。
気にならない方のほうが多いかもしれませんが、私はどうも気になってしまうので、この点をなんとかするCSSを追加しましたので、ご紹介いたします。
一応ふれておきますが、CSSや設定などの変更をするときは、お約束のバックアップ＆自己責任で行ってくださいね。
それでは、まずはタグ管理の機能についてザっくりとご説明します。
タグ管理って何ぞ？
【タグ管理】ですが、ここでいうところの【タグ】っていうのは、SNSなんかのタグ付けとかで使われているような、関連キーワードとしての意味のタグではありません。
それじゃ、ここでいう【タグ管理】ってなんなの？って簡単に言うと、「タグ」を「コード」と言い換えればしっくりくるんじゃないかと思います。
長ったらしいお決まりのコードを、あらかじめ登録しておいて、ショートコードでサクッと呼び出して表示させる。
そして、ひとたびタグ管理に登録すると、登録したタグがクリックされた数や、表示された数もカウントされ、クリック率なんかも一目瞭然という優れもの。これが【タグ管理】です。
記事が多くなったブログでも、登録してあるコード一つ変更すれば、設置している全てのタグにその変更が反映されるので、広告をいちいち張り替えていかなければいけないということもなくなります。
管理しているタグを呼び出してみる
普通に呼び出して表示
普通に呼び出すと、管理しているタグの周りに外枠、内側には余白がありますね。
この外枠と余白はPCもスマホも同じように表示されます。
CSSを追加してから呼び出して表示
次にこちらは、CSSを使って、外枠と内側の余白を消したものです。
ここでは例としてニャンコの写真を使っていますが、広告バナーの場合でも枠と余白がなくなった分、より大きく広告が表示されますね！
外枠や内側余白を解除するCSS
個別に解除するCSS
個別に外枠を解除して、上下の余白を設定するなんていうときはこちらのコードを使っています。
/*管理タグ個別*/
.afTagBox.afTag-777{ /*777には、ショートコードのid番号を入れます*/
border:none; /*外枠の解除*/
padding:0; /*内側余白の解除*/
}一括で解除するCSS
今のところ、管理タグ別にCSSで余白の微調整をしたりしているため、上でご紹介している管理タグ別に設定するCSSを使っていますが、一括で全ての管理タグのCSS設定ができるコードもあります。
ただ、まだ実際に継続して使ったことがないので、ご紹介するのがはばかられますので、実際にしばらく使用してみたらまたご紹介させていただきたいと思います。
もしお知りになりたい方がいらっしゃったら、どうぞご連絡ください