ここあです。
私が使用しているWordPressテーマ「THE THOR（ザ・トール）」には
非常に便利な機能がたくさんあります。
例えば、「タグ管理」機能がそのうちの1つです。
「タグ管理」機能を使えば、
このようにレビューっぽく広告を表示させたり
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか？
シンプルに広告だけを表示させたりすることが可能なので
記事の用途に合わせて上手く挿入することで、抜群の効果を発揮できます。
そして何よりも、タグ管理機能を使えば
ショートコードで記事内に広告の挿入が可能なので
万が一広告を入れ替えたくなった際にも
その元となるタグ管理の情報を入れ替えるだけで
全ての広告が一気に張り替えられるのが便利です。
さらに、THE THOR（ザ・トール）は
集客と収益にこだわり開発されたテーマなので、「タグ管理」機能以外にも
以下のような記事下CTA機能などで広告を表示させ
最後まできちんと記事を読んでくれたネットユーザーに
行動喚起することも可能です。
とは言え、THE THORユーザーの記事を色々と見ていると
非常に便利な「タグ管理」機能に不満を持たれている方も
なぜか意外と多いです（笑）
ということで、
今回はTHE THOR（ザ・トール）の「タグ管理」機能を
カスタマイズする方法について解説させていただきますので
「タグ管理機能に不満がある！」という
THE THORユーザーのあなたは
ぜひ私の記事を読んでストレスを解消してくださいね（笑）
THE THOR：タグ管理機能の設定方法
そもそも「タグ管理機能とは何ぞや？」と思うネットユーザーや、
まだタグ管理機能について把握できていないTHORユーザーもいると思いますので
先に、タグ管理機能の設定方法について簡単に解説させていただきます。
なので、すでにタグ管理機能が分かっているというあなたは
読み飛ばしてくださいね。
THE THORのタグ管理機能を使う場合は、まず最初に
ダッシュボードメニューから、
タグ管理をクリックし新規追加をクリックします。
そうすると、このような記事投稿画面と同じような
入力画面が開きます。
ただし、通常の記事投稿画面と違うのは
以下のように、右側のサイドバーにタグ専用のショートコードや
タグを設置した後に分析できるクリック率（CTR）のデータなどが
しっかりと取れるところです。
つまり、タグ管理機能をきちんと使えば
どの広告がどれだけクリックされたかなど
リアルな数字で分析することができ
ブログからの収益にきちんと繋げることができるようになります。
なので、タグ管理機能は確実に活かしていきたいものです。
さらにタグ管理機能が特殊なのは
タグ管理の編集画面をそのまま下までスクロールすると
あらかじめ広告タグをレビューのように表示させられる
「タグ管理オリジナルフォーマット」が用意されており
必要な項目をただ入力するだけで
わざわざデザインしなくともショートコードさえ入力すれば
このような広告を簡単に記事内に表示させることが可能です。
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか？
だから、THE THORのタグ管理機能は非常に便利ですし
こうして記事だけ読んでいると「一体何が不満なんだ？」と
言いたくなる人もいらっしゃるかもしれません（笑）
しかし、あなたに覚えておいて欲しいのは
ただ記事を読むのと、実際に使ってみるのとでは、
あなたが想像している以上に違うということ。
なので、どのテーマにしてもそうですが
はっきり言っていくら評判が良いテーマであっても
あなたご自身で使ってみないことには
本当に良いテーマかどうかは分からないのです。
なぜなら、人それぞれ重視する部分やこだわり
求めている機能が違うからです。
だから当然、例えどんなテーマであっても
利用者が増えれば、それだけ不満もたくさん出ますし
全ての人を満足させるテーマははっきり言って
どこを探しても見つかることはありません。
ということで、あなたがテーマを選ぶ時、特に有料テーマの場合は
何を重視するかをあらかじめきちんと決めてから
手に入れるようにしてくださいね。
話がだいぶそれてしまいましたが、
私が記事を読む中でTHE THORユーザーの不満というのが
かなり見えてきたこともあり
今回、タグ管理機能のカスタマイズ方法について
簡単にではありますが、解説させていただこうと思いました。
というのも、CSSでカスタマイズしたいけど
「できなかった」という意見が多かったからです。
なので、そんなTHORユーザーに素直に応えたいと思い
CSSによるカスタマイズ方法を少しだけまとめました。
タグ管理機能のカスタマイズ方法
タグ管理機能のカスタマイズに関しては
HTMLで個別に指定できるものでありません。
なので、ここから先はCSSを使ったカスタマイズ方法を
あなたにお伝えさせていただきますが
基本的には全てのタグ情報に影響することになりますので
あなたがカスタマイズする際には
タグ管理のデータをどう活用したいのかを
あらかじめ決めてからカスタマイズするようにしてくださいね。
さて、タグ管理の記事を私が読んでいて
一番不満が多かった記事がこれ。
「タグ管理機能の罫線いらんし！」という記事です（笑）
というのも、私が思うに、THE THORの開発側としては
おそらく便利なタグ管理機能を実装したことで
タグランキングを手軽に使って欲しいという狙いがあると思います。
ですが、THORユーザーからすれば、
せっかく便利なタグ管理機能があるのになんでわざわざ
「ランキング形式にせなあかんのか意味わからん」という
開発者とのズレがあるのだと私は勝手に思っています（笑）
つまり、タグ管理機能を純粋に
「広告管理に使いたい」というのが、
「THORユーザーの心理」だと私は様々な記事を読んで感じました。
ということで、THE THORのタグ管理データを
あなたの思うがままにデザインカスタマイズしてみてください。
タグ管理機能の罫線を消したい
THORユーザーの希望として最も多かった
タグ管理機能の罫線を丸々削除したい場合は
以下のCSSを追加CSSの部分にコピペして記述しましょう。
- 追加CSSにコピペ
- .content .afTagBox {
border: none;
padding: 0px;
}
そうすると、あなたが不要だと思っていた罫線が綺麗に消えます。
ちなみに上記CSSコードはタグ管理機能に入っていた余白
「padding」も0にしたので、上下左右の余白も全て消えます。
なので、少し余白が欲しいという場合は
padding: 0px;の数字を10pxとか5pxなどに調整してみてください。
なお、デフォルトの数字は20pxなので、paddingを20pxにすると、
ただ罫線だけを消した状態と同じになります。
タグ管理機能の罫線を細くしたい
続いて、タグ管理機能で表示される罫線を
完全に消すのではなく、太さを変える場合。
そんな時は、以下のCSSコードをコピペしましょう。
- 追加CSSにコピペ
- .content .afTagBox {
border: solid 1px #ccc;
padding: 20px;
}
罫線が細くなりスッキリしたように見えます。
また、上記コードには罫線の太さや色を変えるための
CSSの記述があります。
なので、罫線の色を変えたい場合は
border: solid 1px #ccc;の#cccを他のカラーコードに
※上記カラーは「#f05689」
罫線をさらに太くする場合は
border: solid 1px #ccc;の1pxを3pxとか5pxに
※上記線幅は「4px」
罫線を破線にしたいという場合は
border: solid 1px #ccc;のsolidをdashedに変えることで
変更することが可能です。
同じ広告枠でも罫線の太さや色でだいぶ雰囲気が変わりますよね。
なので、微調整する場合は、あなたのサイトイメージに合わせて
お好みで調整してみてください。
タグ管理機能に背景色を設定したい
もしかすると、タグ管理機能の広告表示の際
罫線などを消すのではなく、より目立たせるために
背景色を付けたいという方もいらっしゃるかもしれません。
↓こんな感じに…
ということで、背景色を設定したい場合は
以下のCSSコードを追加CSSにコピペしてください。
- 追加CSSにコピペ
- .content .afTagBox {
border: solid 1px #ccc;
padding: 20px;
background-color: #fffeeb;
}
上記、CSSの背景色は#fffeebの黄色に設定しておりますので
他の背景色にする場合はbackground-color: #fffeeb;にある
「#fffeeb」を他のカラーコードに変更してください。
また、border: solid 1px #ccc;の#cccのカラーコードを変えることで
外側の罫線の色も変更することができます。
星マークの色を変えたい
カスタマイズし出すとキリがないんですが（笑）
タグ管理機能の★マークの色を変えたい！
という方がもしかするといらっしゃるかもしれません。
↓こんな感じに…
ということで、完全に余計なカスタマイズにはなりますが
もしも「俺は星の色を変えたいんや！」という方が
おられましたら、以下のCSSをコピペしましょう。
そうすると、星の色がピンクに変わりますので＾＾
- 追加CSSにコピペ
- .content .afTagBox__star {
color: #fc729c;
}
なお、星の色は以下のCSSコード
color: #fc729c;のカラーコードを変えれば色が変わります。
ということで、これだけあれば
おそらくTHE THORユーザー数名のストレスは解消できると
私は固く信じています（笑）
最後にデフォルト機能にはなりますが
念のためタグ管理機能のボタンカラーを変える方法を
簡単に解説させていただきます。
↓この部分です。
タグ管理機能のボタンカラーを変更する場合は
ダッシュボードメニューから、外観 → カスタマイズをクリックし
さらに基本設定［THE］をクリックします。
そうすると、基本設定［THE］の項目内に
「タグ管理設定」という項目がありますので
タグ管理設定の中にある以下の
「ボタンカラー設定」で変更することが可能です。
以上、タグ管理機能のデザインカスタマイズの方法を
簡単に解説させていただきました。
THE THORのタグ管理機能をカスタマイズする方法まとめ
今回は主にTHE THORのタグ管理機能を
カスタマイズする方法を中心に解説させていただきました。
とは言え、THE THORのタグ管理機能は
タグランキングを作ったり、プリセットパーツと組み合わせて
さらに充実した内容を盛り込むことも可能です。
なので、THE THORのタグ管理機能は正直まだまだ
この程度の説明では終われません。
ということで、また別の機会に、このタグ管理機能を生かした
タグランキングの作り方やプリセットパーツを使った
組み合わせ方法などもじっくり解説したいと思います。
私もこうしてTHE THORに関する様々な記事を書いてますが
記事を書いていると新しい発見があったり
自分が思いもしない部分にストレスを感じている方たちがいて
すごく勉強になるし、面白いです。
そして何よりも、自分もそんな便利な機能を
きちんと使ってみたいと思うようになります。
そういう意味では多機能なテーマというのは
使い込めば使いこむほど、奥深く感じますし
自分もまだまだ使いこなせていないなと
初心に立ち返り頑張ろうと思うことができます。
※私だけかもしれませんが…（笑）
なので、これからもいろんな機能の検証をしながら
たくさんのTHORユーザーの記事読んで勉強し
「そんなところにもストレスを感じるんだ」と
新たな発見をしながら、私もTHE THORを活かしたブログを
楽しんで運営していきたいと思います。
ということで、最後までお読みいただき
ありがとうございました！
