有料WordPressテーマ「THE THOR(ザ・トール)」のパーツを考案

パーツがたくさん

有料Wordpressテーマ「THE THOR(ザ・トール)」のパーツ作成機能

ですが、正直使いやすいとは言えず、フォーラムでも色々と書かれていましたが、

他のテーマではボックスなどのパーツも数多くあり、その中から選べるようになっていますが、

「THE THOR(ザ・トール)」では自分で作成しないと数多くの使えそうなパーツは使えません。

デフォルトでは残念ながら余り良いデザインがあるとは言えませんので、記事にしながら

お気に入りのデザインを作成したいと思います。

 

WordPressテーマ「JIN」や「SAMGO」などのデザインはシンプルながら優れたデザインで

凄い参考になるデザインですが、なるべくオリジナルで作成してみて使えそうなデザインを

作成したいと思います。

 

スポンサーリンク

THE THOR(ザ・トール)のパーツデザインをカスタマイズ

 

まずはボックスを作成したいと思います。

やっぱりボックスはよく使う機会が多いと思いますし、やまとし使用の

プラグイン「Advanced Ads」は広告のコードを扱うプラグインですが、使い方により

通常のコードをショートコード化して投稿画面から簡単に使えたはずですので

活用しようかと考えています。

他にもタグ管理機能を使ってショートコード化する方法もありますが、コードをコピーしない

といけないので、メモ帳などにまとめておけばそちらでも良いでしょう。

 

テーブルでボックスを作成してみる

 

シンプルなデザインで良ければテーブルを使いボックスをつくるという手もあります。

その場合一応スマホテーブル横スクロールのボタンを押した後に

その中にテーブルを作成しましょう。

テーブル表のプロパティでboder styleなどやカラー変更などが出来ますので

お好きなデザインで作成しましょう。

 

ボックス見本(デフォルト)
 

 

 

 

Border style(Hidden)
 

 

 

 

タイトルと枠線のカラー変更しました。
 

 

 

定番の赤と黒の組み合わせ(う~ん)
 

 

 

 

アイコンを挿入してみましたが小さいです。
 

 

 

 

 

 

 

 

ここら辺はまだ改良の余地もありますが、Font Awesomeの場合は公式から

コードを持ってきてカラー変更や大きさも変更出来ますので色々とやりようはあります。

Font Awesomeのプラグインを使用していますが、表示速度に影響がでるので

THE THORではicomoonが使えますのでそちらを使った方が良いかも知れません。

 

THE THOR(ザ・トール)でボックスを作成してみる

 

サブタイトルボーダーボックス

これが今やまとしのデフォルトになってる状態です。

 

 右側めくりとサブタイトル(ラウンド)

 

ちょっとバグなのか偶然出来たスタイル

左右のめくりを有効化するとこうなります。

 

 

方眼ペーパーボックス(右めくり)
方眼ペーパーボックス(左めくり)

 

シンプルアイコンボックス+アイコン変更

 

後は適当に作成しました。

 

アイコンをコーナーに設置

 

アイコンをサークルに変更

 

アイコンを帯びに変更&方眼ペーパーボックス

 

ボックスの作成方法ですが、【スタイル】→【デフォルトパーツ】でボックスを選択するか

ボックス内のスタイルを選択した後【スタイルセット】→【ボックスパーツ専用】

パーツを選択すると変更されるものと、バグった表示になるものがありますのでお好みのパーツを作成しましょう。

 

選択しても選択したスタイルが反映されないので、不具合で適切に設定出来る方と

出来ない方がいる可能性がありますので、設定出来るか確認しておきましょう。

カラーなどの変更が反映されないのでテキスト表示で変更したい箇所を変更すると

いいかもしれません。

文字色(他)などは標準の機能で変更できるのでそちらを使いましょう。

 

 

かなり変なボックス

 

スタイル
基本的に■スタイルセット■カラーセット■デフォルトパーツの中で作成しないといけないですが、なかなか作成するのは難しいですし、お気に入りのパーツを作成するのは難しいです。一つのパーツを作成するのも時間がかかりますし、上手く作成出来ません。ボックスを複数選択しても変更は出来ましたので、組み合わせて使うと良いでしょう。

 

THE THOR(ザ・トール)でボタンを作成してみる

 

こちらはデフォルトパーツのボタンを選択したボタンです。

ボタン基本+icomoon

[icon name=”download” class=”” unprefixed_class=””]ボタン基本+(Font Awesomeアイコン)

デフォルト+立体

デフォルト+薄影+影

デフォルト+右矢印

デフォルト+薄影

オレンジ100%ボタン+立体+アイコン(余白)

 

グリーンシャドウ100%ボタン+薄影+影

 

ブルーボーダーボタン+アイコン(余白)+立体

 

ブルーグラデボタン+アイコン余白

 

ピンクアイコンボタン+立体

 

ピンクグラデアイコンボタン+薄影+影

 

グリーン立体アイコンボタン+アイコン変更

アイコンはアイコン挿入からいれてください。

グレーラウンドアイコンボタン+立体

 

サークルアイコンボタン+アイコンボックス

 

ボックスアイコンボタン+アイコンサークル

 

共通ボタンはこちらです。(カラーは変更しています)

 

 

 

どのボタンを使うかは個人の好みですが、個人的にいったら共通ボタンを使いますね。

他にもサイトを探すと色んなボタンがありますので探して活用しても良いでしょう。

 

ラベルも紹介しようかと思いましたが、あまり大幅な変更が出来なさそうなので

今回は掲載を見送りましたのでご自身で作成してみてください。

 

THE THOR(ザ・トール)パーツカスタム まとめ

 

もっと大幅にデザインを改善する予定でしたが、あまり大幅な変更が出来なくて残念でした。

デザインが反映されないものも多く不具合なのか正常なのかはわかりませんが、

使い方がわからないだけかも知れませんので、皆さんもチャレンジしてみてください。

 

ボックスやボタンやラベルに見出しなどのデザインは色々とCSSカスタムが公開

されているので、そちらを使った方が良いかも知れませんが、不具合やサイトの

読み込みや安定性に影響があるかも知れませんのでなるべく使うなら少しに

とどめておいた方が良いでしょう。

 

ボックスなどはテーブルなどを活用しても良さそうな気がしますので

テーブルを極めて良いデザインを目指すのもいいでしょう。

また、新しいことがわかりましたら公開していきます。

 

少し作成してみましたが、お気に入りのパーツをつくるには時間かかりそうです。(ボックス)
ボックス内ボックス
ラベル見本
文字を打ち込み選択した状態でスタイルを選ぶと変化すると思います。
最初はデフォルトパーツから選択した方がいいでしょう。
他の記事でthe thorのパーツの使いかたを覚えたので紹介していますので
そちらを紹介していますので参考にしてもらえると幸いです。
パーツがたくさん
最新情報をチェックしよう!