THE THOR(ザ・トール)- マーカーの使い方とデザイン一覧

WordPressテーマ「THE THOR」には文字列をクリック操作だけで簡単に装飾できる機能が備わっています。今回はその中からマーカーについて紹介したいと思います。

初期設定のマーカー

マーカーのバリエーション

WordPressテーマ「THE THOR」には6色のマーカーがそれぞれ太さ3種類、計18種類用意されています。

まずは太さの違いから。

マーカー(太)- レッド / マーカー(中)- レッド / マーカー(細)- レッド

次は色のバリエーション。全6色。

マーカー(太)- レッド

マーカー(太)- ブルー

マーカー(太)- イエロー

マーカー(太)- ピンク

マーカー(太)- グリーン

マーカー(太)- グレー

マーカーの使い方

マーカーで線を引く部分をハイライトして使用するマーカーを選択します。マーカーを解除するには解除する文字列をハイライトした状態で選んだマーカーを再度選択します。変更する場合は解除した後、新しいマーカを選択します。

これはテスト用の文章です。この部分にマーカー(太)- レッドを使用します。

<p>これはテスト用の文章です。<span class="marker-thickRed">この部分</span>にマーカー(太)- レッドを使用します。</p>

マーカーを使用すると、使用した文字列が<span></span>で包括され、”marker-“から始まるclassが与えられます。太文字のレッドを選択した場合、与えられるclassは”marker-thickRed”となっています。

それでは他のマーカーで生成されるコードを見ていきましょう。

マーカー(中)- レッド

マーカー(細)- レッド

<p><span class="marker-halfRed">マーカー(中)- レッド</span></p>
<p><span class="marker-thinRed">マーカー(細)- レッド</span></p>

マーカー(中)を指定するコードは“marker-hal”、マーカー(細)をしてするコードは“marker-thin”となっており、レッドを指定するコードは“Red”となっています。

次は各色のコードを見ていきます。

マーカー(太)- ブルー

マーカー(太)- イエロー

マーカー(太)- ピンク

マーカー(太)- グリーン

マーカー(太)- グレー

<p><span class="marker-thickBlue">マーカー(太)- ブルー</span></p>
<p><span class="marker-thickYellow">マーカー(太)- イエロー</span></p>
<p><span class="marker-thickPink">マーカー(太)- ピンク</span></p>
<p><span class="marker-thickGreen">マーカー(太)- ピンク</span></p>
<p><span class="marker-thickGray">マーカー(太)- ピンク</span></p>

色を指定するコードはそれぞれ

  • ブルー :Blue
  • イエロー:Yellow
  • ピンク :Pink
  • グリーン:Green
  • グレー :Gray

となっています。

ちなみにテキストエディタでスタイルに用意されている以外の色を強制的に指定してみると…

マーカー(太)- ヴィヴィッドレッド

<p><span class="marker-thickVred">マーカー(太)- ヴィヴィッドレッド</span></p>

マーカーを指定することはできませんでした。

マーカーの太さは色を新たに追加するには新たにマーカーを定義するclassをい定義し、CSSを追加する必要がありそうです。

例えばマーカー(極太)- ヴィヴィッドレッドという名称のマーカーを追加するとします。

marker-fullVredを定義する。

<span class="marker-fullVred"></span>

このコードAddQuicktagなどに登録しておきます。

次にCSSを追加します。

.content .marker-fullVred {
  background: linear-gradient(transparent 0%, #e60112 0%);
}

あとはマークしたい文字列をハイライトして作成したタグを選択するだけです。

これが新しいマーカー(極太)- Vredです。

新しくマーカーを作成する際、既にテーマ内に設定されている文字色をclassで指定することも可能です。

<span class="marker-fullVred ftc-white">マーカー(極太)- Vred</span>

 

これが新しいマーカー(極太)- Vredの白文字です。

ftc-whiteが”color: #ffffff”が指定されているclassです。

テーマ内のカラーセットの使い方についてはこちらの記事もご参照ください。

関連記事

WordPressテーマ「THE THOR」には8トーンのカラーセットが用意されており、そのうち7トーンにそれぞれ12色、モノトーンに7色で計91色のカラーを使うことができます。ただ慣れるまではトーン名称とカラー名称だけでは実際にどんな色な[…]

このブログで使用しているWordPressテーマ:THE THOR

  • 圧倒的にSEOに強く抜群に上位表示されやすい圧倒的にSEOに強く上位表示されやすい「国内最高クラスのSEO最適化テーマ」
  • 息を呑むほどに美しく・プロ仕様のデザイナーズサイトが簡単に作れる。
  • サイトで集客し収益を上げるための「集客・収益化支援システム」を搭載。
  • 革新的な高速表示技術を多数装備した「国内屈指の高速テーマ」
  • 国内随一と言っても過言ではない機能数と簡単に使いこなせる操作性。
  • メールサポート・操作マニュアル/会員フォーラム・無料バージョンアップ有
  • 要望や最新技術を取り入れ、機能追加改善を繰り返す「進化し続けるテーマ」
利用者の声

M.Oさん:ブロガー
トールはとてもSEOに強いテーマ
FITの無料テーマ(ライオンブログ・ライオンメディア)も無料とは思えないほどに素晴らしいテーマですが、トールはその上を行く最高のテーマだと思います。私はこれまでたくさんの有料テーマを使ってきましたが、そのなかでも断トツ一番のテーマでした。テスト版を1ヶ月ほど使わせていただきましたが使い始めてから短期間でGoogleで1ページ目に表示され始めていて、とてもSEOに強いテーマだというデータが取れました。(SEOに強いことで有名なテーマ)○○○もこれまで随分と使いましたが、その○○○と比べてもトールのほうがSEOに強いテーマだと思います。正規版がリリースされたら手持ちのサイトは全てトールに乗り換えるつもりです。


Nさん:有名凄腕アフィリエイター
数十万円するような機能が付いてきて驚き
トールは、ブロガー・アフィリエイター向けテーマと銘打つだけあって、機能面もデザイン面もSEOに関してまでも良く作り込まれているという印象を受けました。本来プラグインを導入しなければ実現できないような機能であっても、トールには標準で備わっている。例えば簡易お問い合わせ機能なんて私みたいなアフィリエイターにはちょうどいい機能です。アフィリエイターの視点で言えば、標準でアフィリエイトタグ管理機能とランキング機能、それから絞り込み検索機能がついているのはうれしいですね。アフィリエイトタグを一元管理できれば、修正も1か所で済むし、それらのタグをボタン一つでランキングコンテンツとして作り上げることができるランキング機能もうれしいですね。私は以前、エンジニアの方に、これに似た機能を数十万円で作ってもらっているので、少し悔しいですよ。それから、テーマとして絞り込み検索が備わっているのは驚きました。私の知る限りそういった無料プラグインもなかったように思います。


R.Aさん:WEBデザイナー
他の有料テーマを使ってサイトを作っていた時の時間は何だったんだろう。
画像編集ソフトを使わなくてもテーマの機能として画像が簡単に加工できるのはいいですね。サイト制作作業の大幅な時短になりそうです。これまでは新しくサイトを作るときって、なんだかんだ丸1日から2日くらいサイトのレイアウトとかデザインとかをいじくり回してましたけど、ザ・トールでは数時間でいい感じのサイトが完成しましたよ。今まで(デザインが売りの有名テーマ)○○○のテーマを使ってサイトを作っていた時の時間は何だったんだろうって感じです。