THETHOR

ついに念願だったWordPressの有料テーマ「THE THOR」をインストールした。早速カスタマイザーでデザイン変更してみた。

ついに、念願だったWordPressの有料テーマを購入しました。

選んだのは「THE THOR」。
クールなデザインが自分好み。

他のテーマも悩んだけれど、自分の性格上、買って後悔するより「買わずに後悔する方が引きずる」ことがわかっていたので、潔く決めました。

早速、カスタマイザーで変更できるデザインの変更を確認していきます。

紹介するのは「パーツスタイル設定[THE]」で変更できる項目

ダッシュボード
→ 外観
→ カスタマイズ
→ パーツスタイル設定[THE]
→ 以降、各項目を選んで設定変更が可能

見出しのデザイン

↑この見出しは「h2」

人により、気になる箇所、こだわるポイントはマチマチでしょう。
私は、記事内の見出しのデザインは、結構気にするポイント。

THE THORで用意されている「見出し」

↑この見出しは「h3」

「THE THOR」では、53種類のデザインが用意されています。
どれを選ぶかは、あなた次第。

見出しは、話の区切りとして大事

↑この見出しは「h4」

私は視覚的に「区切り」が認識できるか否か、というポイントで選んでいます。

「入れ子構造」を意識した文字位置

↑この見出しは「h5」

あともう一つのポイントは「入れ子構造」になっていることがわかるように、文字の位置が、だんだん内側にずれていくように、h2~h5の見出しを選んでいます。

おまけの見出し

↑この見出しは「h6」

「THE THOR」のカスタマイザーで変更できるのは「h5」まで。
「h6」はWordPressの方で出てきます。
特に設定は変更していないと、この表示。

「h6」までは、ほとんど使うことがないと思いますが、確認用ということで表示します。

階層を増やし過ぎても、話の内容が細かくなりすぎて伝わらない懸念があるので「h4」ぐらいまでが、ちょうどいいのではと思っている。

3種類の共通ボタン

ブログでは「ボタン」も大事。
リンクとかで、よく使いますね。

「THE THOR」では、ボタンの属性が大きく分けて2種類になっています。
「共通ボタン」と「スタイルボタン」です。

ここでは「共通ボタン」のデザインを確認

用途に合わせて使えるように、3タイプ用意されています。
ちなみに、色は全て「青(#039de7)」にしました。
「リンク=青」が定説だからです。

ちなみに表示の位置は「左」「中央」「右」から選択できる。

重要度の高い場面で使える「プライマリボタン」

カーソルをホバーすると、光ります。
目立ってカッコいい!

ちょっと注目!っていう感じで使える「セカンダリボタン」

気軽に使える「ノーマルボタン」

ちなみにWordPressでもボタンを作れる

大きく分けて4タイプ。

上記の4つのボタンは、WordPressの機能で作れるボタンです。
角の丸みは、調整できるので、もっと丸くすることもできます。
色も変えることができます。(背景、文字、それぞれ設定可能)

結構いいデザインですよね?
差別化をしたい人は使わないかもしれないけど、これで十分使えそうですね。

引用ボックス

「THE THOR」では7種類が用意されています。
色の設定はそれぞれお好みで設定しましょう。

私が選んだのは「ラベル」というタイプ。

キリン (Giraffa camelopardalis) は、哺乳綱偶蹄目(鯨偶蹄目とする説もあり)キリン科キリン属に分類される偶蹄類。

引用元:Wikipedia

初心者の方、その使い方は間違ってるよ!

ブログやWordPress初心者のページで、たまに「引用ボックスのNGな使い方」を見かけます。

「 ” 」このマークが必ず表示されるので「目立たせたいボックス」みたいな感覚で使っているのかな?と思います。
引用ボックスを「見た目」で使ってしまうのは、間違った使い方です。

「引用」とは「他のページで表示されている文章を、そのまま転用する」ことです。つまりは「コピー」なんです。「コピー」は、検索エンジンからペナルティを与えられる可能性があります。

「コピー」を載せる際「これは他のページから転用しました」ということを明記するためのプログラムが、引用です。プログラム的にも「blockquote」というタグが使われ、他のテキストとは区別されます。

これにより、悪意のあるコピーと認定されるのを回避できます。
また、どのページからの転用なのかを「引用元」としてリンクをつけて明記するのが、ルールとなっています。

知らなかった!という方は、自分が間違った使い方をしていないか、確認してください。

リスト

記事作成で、かなり使用頻度が高くなるであろう「リスト」のデザインです。
大きく分けて「番号なし」と「番号あり」の2種類です。

「THE THOR」では、それぞれ8種類のタイプが用意されています。

私は、デフォルトとなる基本設定をシンプルなものにしています。
(*オリジナルのCSSデザインを活用しているため)

番号なし

  • キリンは、立ったまま寝る
  • たまに2 ~ 3 時間ほど、座って休憩をとることもある

番号あり

  1. ヌビアキリン
  2. アンゴラキリン
  3. コルドファンキリン
  4. ケープキリン
  5. ナイジェリアキリン
  6. アミマキリン
  7. ウガンダキリン
  8. キタローデシアキリン
  9. マサイキリン

テーブル設定

これも使用頻度高めですね。
色や、線の有無など、見た目の設定を変更できます。

漢字のキリンは「麒麟」だけど「麒」の一文字でも「きりん」と読めるらしい

「麒」の画数19画
「麒」の部首鹿
「麒」の読み方ギ / キ / きりん
「麒」の意味・麒麟
・想像上の動物
・偶蹄目キリン科の首の長い動物

「吹き出し」に初挑戦

「吹き出し」はWordPressテーマの中でも、特殊なデザインだと思います。

海外のWordPressテーマでは、あまり見たことがありません。
漫画やアニメの文化がある日本ならではの機能かもしれません。

吹き出しの画像を設定したり、文字や背景の色を変えることができます。

吹き出しの見本

 
ネボスケ
左側背景スタイル
 
ヨフカシ
右側背景スタイル
 
ネボスケ
左側ボーダースタイル
 
ヨフカシ
右側ボーダースタイル

Q&Aはどんな感じかな?

その他エディタ用パーツ設定からカラーを変更できます。

なぜ、そんなに「キリン」にこだわるの?
キリンが好きだから。