The・THOR

The・THORのカスタマイズ!パーツスタイル設定編【WordPress】

更新日:

 

今回は、カスタマイザー(外観→カスタマイズ)の「パーツスタイル設定」について紹介します。

 

パーツスタイルでは、記事に挿入するボタンやボックス、吹き出しなどのパーツの設定が出来ます。

 

「The・THOR」には非常に多くのパーツが用意されています。記事を書きながら、必要なものを設定していきましょう。

おじさん
ハマりだすとキリがありません

 

ラベル・ボタン・ボックス設定

 

「カスタマイザー」→「パーツスタイル設定」→「ラベル設定」で、オリジナルのラベルを登録しておき、記事作成時に素早く呼び出すことが出来ます。

 

ここではラベルを例に説明しますが、ボタン、ボックス、ボックス内ボックスも同様に設定できます。

 

ラベルとは、「ここがオススメ」「ポイント」「注意!」など、記事のアクセントとなる目印のことです。

 

The・THORでは初めから10個ラベルが用意されていて、記事を書く欄の上のスタイルから必要なラベルを呼び出せます。(「スタイル」が表示されていないときは、「ツールバー切り替え」ボタンを押してください)

注意

プラグイン「TinyMCE Advanced」とThe・THORは干渉します。「TinyMCE Advanced」は削除してください。

 

これらのラベルは自由に変更できます。

 

ラベルの作り方は別の記事で紹介しています。

 

オリジナルのラベルはカスタマイザーに保存し、記事作成時に呼び出せます。

 

 

ラベルは、<span class="ep-label es-radius  es-Fbig es-bold es-LborderSolidM brc-DLred bgc-VPred ftc-DGred"></span>と、なっています。

 

カスタマイザーには” ”の中の「ep-label es-radius es-Fbig es-bold es-LborderSolidM brc-DLred bgc-VPred ftc-DGred 」の部分をスタイルに貼り付け、分かりやすいタイトルをつけて「公開」ボタンを押せば出来上がりです。

 

 

これで投稿ページの「スタイル」に登録したラベルが入りました。

 

 

ここでは10種類のラベルを登録できます。それ以上になるときはプラグインの「AddQuickTag」の使用をお勧めします。

 

AddQuickTagの設定と使い方

    WordPressで使えるお気に入りの吹き出しや蛍光ペンやボックスなどが増えてくると、管理が面倒になってきます。   そこで今回は、WoradPressのプラグイ ...

続きを見る

 

 

その他エディタ用パーツ設定

 

「カスタマイザー」→「パーツスタイル設定」→「その他エディタ用パーツ設定」では、記事中に挿入するボックスのアイコンの色を設定できます。

 

ここで設定する「はてな」や「ビックリ」とは、投稿ページの「スタイル」→「ボックス」から選択するボックスのマークです。

 

「アイコン系パーツのアイコンカラー」のアイコンカラーとは、「帯付きアイコンボックス」などのアイコンの背景色です。

 

サブタイトルのボックスのカラーでは、「サブタイトルボーダーボックス」のサブタイトルの色を設定できます。

 

共通ボタン設定

 

「カスタマイザー」→「パーツスタイル設定」→「共通ボタン設定」では、記事に挿入する共通ボタンの色を設定できます。

 

ここで設定するのは共通ボタンで、スタイルのボタンとは違います。

 

スタイルのボタンは自作したオリジナルボタン、共通ボタンはすぐに使えるかんたんボタンというイメージです。

 

見出し設定

 

「カスタマイザー」→「パーツスタイル設定」→「見出し設定」で、記事の見出しのデザインを編集できます。

 

見出しは投稿ページで挿入します。

 

「見出し1」は記事のタイトルになるので、1段落目は「見出し2」から書き始めてください。

 

目次を設定している場合は、「見出し2」や「見出し3」は目次の項目 になります。

 

見出しのデザイン一覧

 

The・THORの50種類以上の見出しを紹介します。

 

カラーはAを緑系、Bを赤系、Cを青系で設定しています。(見やすくするため、カラーは多少変更します)

 

また、見出し2~見出し5までデザインは全て同じで大きさだけが異なります。

 

基本 「カラーA:文字」

 

下線-基本「カラーA:文字 B:下線」

 

下線-2本「カラーA:文字 B:下線」

 

下線-1本点線「カラーA:文字 B:下線」

 

下線-1本2色「カラーA:文字 B:下線 C:下線右」

 

下線-マーカー「カラーA:文字 B:下線」

 

下線-1本矢印「カラーA:文字 B:下線」

 

下線-ストライプ「カラーA:文字 B:下線 C:下線」

 

 

下線-グラデ「カラーA:文字 B:下線左 C:下線右」

 

下線-センター「カラーA:文字 B:下線」

 

下線-センター矢印「カラーA:文字 B:下線」

 

左線-基本「カラーA:文字 B:左線」

 

左下線-基本「カラーA:文字 B:左線 C:下線」

 

左下線-下点線「カラーA:文字 B:左線 C:下線」

 

左下線-左2色「カラーA:文字 B:左線上 C:左線下&下線」

 

背景-基本「カラーA:文字 B:背景」

 

背景-下線「カラーA:文字 B:背景 C:下線」

 

背景-左線「カラーA:文字 B:背景 C:左線」

 

背景-左下線「カラーA:文字 B:背景 C:左線」

 

背景-吹き出し「カラーA:文字 B:背景」

 

背景-吹き出し線付「カラーA:文字 B:背景 C:線」

 

背景-リボン「カラーA:文字 B:背景 C:影」

 

背景-ボックス「カラーA:文字 B:背景 C:影」

 

背景-ステッチ「カラーA:文字 B:背景 C:影」

 

背景-ストライプ「カラーA:文字 B:背景 C:背景」

 

背景-線「カラーA:文字 B:背景 C:線」

 

背景-点線角丸「カラーA:文字 B:背景 C:線」

 

背景-括弧「カラーA:文字 B:線」

 

 

背景-はみ出す線「カラーA:文字 B:線」

 

グラデ-基本「カラーA:文字 B:背景 C:背景&線」

 

グラデーションは同系色を入れたほうが分かりやすいので、カラーBとC両方とも赤系にしています。

 

グラデ-角丸「カラーA:文字 B:背景 C:背景&線」

 

グラデ-ラウンド「カラーA:文字 B:背景 C:背景&線」

 

グラデ-シンプル「カラーA:文字 B:背景 C:背景&線」

 

グラデ-シンプル角丸「カラーA:文字 B:背景 C:背景&線」

 

グラデ-シンプルラウンド「カラーA:文字 B:背景 C:背景&線」

 

グラデ-上線(文字黒)「カラーA:上線 B:背景 C:背景&線」

 

グラデ-上線角丸(文字黒)「カラーA:上線 B:背景 C:背景&線」

 

グラデ-上線(文字白)「カラーA:上線 B:背景 C:背景&線」

 

グラデ-上線角丸(文字白)「カラーA:上線 B:背景 C:背景&線」

 

ラインマーク-基本「カラーA:文字 B:マーク」

 

ラインマーク-背景角丸「カラーA:文字&マーク B:背景」

 

ラインマーク-背景線角丸「カラーA:文字&マーク B:背景 C:線」

 

ラインマーク-グラデ上線(文字黒)「カラーA:上線&マーク B:背景 C:背景&線」

 

ラインマーク-グラデ上線(文字白)「カラーA:上線&マーク B:背景 C:背景&線」

 

丸マーク-基本「カラーA:文字 B:マーク」

 

丸マーク-背景角丸「カラーA:文字&マーク B:背景」

 

 

丸マーク-背景線角丸「カラーA:文字&マーク B:背景 C:線」

丸マーク-グラデ上線(文字黒)「カラーA:上線&マーク B:背景 C:背景&線」

 

丸マーク-グラデ上線(文字白)「カラーA:上線&マーク B:背景 C:背景&線」

 

先頭大-基本「カラーA:文字 B:先頭文字」

 

先頭大-先頭下線「カラーA:文字 B:先頭文字&先頭下線」

 

先頭大-下線「カラーA:文字 B:先頭文字 C:下線」

 

先頭大-線角丸「カラーA:文字 B:先頭文字 C:線」

 

リスト設定

 

「カスタマイザー」→「パーツスタイル設定」→「リスト設定」で、箇条書き(リスト)のデザインを編集できます。

 

箇条書きは、投稿ページで2行以上の文字列を選択し、箇条書きのボタン(数字有り・無し)を押せば出来上がりです。

 

このままだと項目の前に丸い点や数字が付くだけなのですが、The・THORでは箇条書きを装飾できるようになっています。

 

リスト装飾一覧

 

数字有り・無しともに同じデザインです。

 

基本「カラーA:マーク B:文字」

 

 

背景「カラーA:マーク B:文字 C:背景」

 

ステッチ「カラーA:マーク B:文字 C:背景」

 

ペーパー「カラーA:マーク B:文字 C:背景」

 

 

方眼用紙「カラーA:マーク B:文字 C:背景」

 

線「カラーA:マーク B:文字 C:背景」

 

 

点線「カラーA:マーク B:文字 C:背景」

 

 

はみ出す線「カラーA:マーク B:文字 C:背景」

 

 

吹き出しデザイン設定

 

吹き出し機能もThe・THORでは、初めから装備されています。

 

まず、投稿ページの上にある「プリセットパーツ」から表示したい吹き出しを選びます。

 

次に、表示された画像にカーソルを合わせ、「メディアを追加」を押してお好きな画像を表示します。

 

画像の下に名前を入れ、吹き出しの中にセリフを入れます。

 

吹き出し部分は「カスタマイザー」→「パーツスタイル設定」→「吹き出し設定」で色を変更できます。

 

引用設定

 

引用とは、他のサイトの文章を自分のサイトにそのまま載せることを言います。

 

例えば映画のあらすじなんかは、配給会社のホームページからそのまま載せることがあります。

 

こういうときは、「引用しました」と印をつけておく必要があります。

おじさん
印を付けていないのが、いわゆるパクリです

 

引用マークは投稿ページで、引用した文章を選択した後に引用のボタンを押せばOKです。

 

The・THORでは、この引用マークをカスタマイズできます。

 

引用の装飾一覧

 

引用は、「カスタマイザー」→「引用設定」で装飾できます。

 

基本「カラーA:文字 B:背景 C:マーク」

 

左線「カラーA:文字 B:背景 C:マーク D:線」

 

線「カラーA:文字 B:背景 C:マーク D:線」

 

丸角「カラーA:文字 B:背景 C:マーク」

 

丸角線「カラーA:文字 B:背景 C:マーク D:線」

 

左背景「カラーA:文字 B:背景 C:マーク D:線」

 

ラベル「カラーA:文字 B:背景 C:マーク D:影」

 

テーブル設定

 

テーブルとは表のことです。

 

The・THORでは、テーブルのカラーを設定しておくことができます。

 

準備

 

投稿ページでテーブルを作ると次のようになります。

 

テキストモードにしてみると、WordPressのマスは<td style="width: 33.3333%;">WordPress</td>と、tdタグになっていることが分かります。

 

一番上の見出しとなる行をthに書き換えます。

<th style="width: 33.3333%;">WordPress</th>

 

すると、TH行の色が変わります。

 

注意


書き換えは、The・THORのカスタマイズ機能を使うためです。
機能が不要であれば書き換えなくてもOKです。

 

テーブルのカラーを設定する

 

テーブルのカラーは、「カスタマイザー」→「パーツスタイル設定」→「テーブル設定」で行ないます。

 

 

この設定は、サイト全てのテーブルに有効です。

 

ただし、投稿ページの設定が優先されるのでテーブルやマスごとにカラーを変えることは可能です。

 

シェアボタン設定

 

メインカラムのシェアボタンは、カスタマイザーの「投稿ページ設定」で表示非表示を選択できます。

 

さらにカスタマイザーの「パーツスタイル設定」→「シェアボタン設定」でデザインを変更できます。

 

シェアボタンのパターン一覧

 

同じように見えるものもありますが、立体になっていたり微妙に違います。

 

パターン1

 

パターン2

 

パターン3

 

パターン4

 

パターン5

 

パターン6

 

パターン7

 

パターン8

 

パターン9

 

パターン10

 

パターン11

 

まとめ

 

「パーツスタイル設定」は、記事を書く時に絶対に必要と言うわけでは無いですが、「読んでもらえる」ような記事に仕上がります。

おじさん
文字だけの記事じゃ読む気が出ません

 

あくまで記事の内容が重要ですが、見た目も意識していきましょう!

 

ブログはテーマでも速くなります

 

-The・THOR

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.