お出かけ大好き!地域のことやグルメなど、何でもアリなレポ記事メインの雑記ブログです!

【THE・THOR】パーツを組み合わせたボックスの作り方と保存方法を詳しく解説!

WordPressで人気急上昇のテーマ、THE・THOR(ザ・トール)では、ラベルやボタン、ボックス等を組み合わせてオリジナルのパーツを作ることができます。

 

もちろん、デフォルトで入っているものもありますが、せっかくある機能なので使ってみたくはなりませんか?

 

そこで今回は、私が普段使いしているボックスを例にして、パーツの組み合わせ方や保存方法を解説します!

 

とん
自己流となりますが、少しでも参考になれば嬉しいです。

 

例)シンプルなオリジナルボックス

 

私が、普段の記事によく使うボックスはこちらです。↓

 

タイトル

コメントが入ります!

 

私のブログのテイストがオレンジのため、シンプルなオレンジ基調のボックスに、鉛筆のアイコンが入ったラベルをタイトルとして入れみました。

色もボックスもあまりごちゃごちゃしすぎると目が疲れてしまうので、とにかくシンプル重視なボックスです!

 

しかも、作り方も超簡単なので、誰でも真似しやすいと思います^^

 

 

ボックスの作り方

 

それでは早速、例となるオレンジボックスを作ってみましょう。

 

①「スタイル」→「■デフォルトパーツ」→「ボックス」と選択→グレーのボックスができる

 

ザ・トール-ボックスの作り方

 

見にくいかとは思いますが、グレーのボックスができているので、入れたい文章をコピペするか、適当に文字を入れておくと作業が楽です。

 

適当に文字を入れた際は、「Enterキー」を押してしまうとボックスがなくなるので、文章をクリックして確定させた方が良さそうです。

 

②文章をドラッグし、全て選択した状態で、「■カラーセット」→「背景色」→「ベリーペールトーン」→「オレンジ」と選択

 

ザ・トール-ボックスの作り方

 

ベリーペールトーンは、可愛くて柔らかい雰囲気の配色が揃っているのでオススメ!

 

ここまでくると、あとはタイトル用のラベル作りとなります!

 

③タイトル部分を選択した状態で、「スタイル」→「■デフォルトパーツ」→「ラベル」と選択

 

ザ・トール-ボックスの作り方

 

ここから、ボックスとラベルの組み合わせになります。

 

④タイトルを選択した状態で、「■カラーセット」→「背景色」→「ブライトトーン」→「オレンジ」と選択

 

ザ・トール-ボックスの作り方

 

ボックスとラベルの色系統は同じにした方が統一感が出ます!

 

今回は、鮮やかなブライト系のオレンジをラベル色に選びました。

 

⑤タイトルを選択した状態で、「■スタイルセット」→「文字系」→「サイズ(大)」と「太字」を選択

 

ザ・トール-ボックスの作り方

 

サイズ(大)を選んだら、もう一度「■スタイルセット」→からやり直して「太字」を選択!

 

しかし、タイトルが黒色となると違和感を感じたので、次にラベルの文字色を変えてしまいます。

 

⑥タイトルを選択した状態で、「■カラーセット」→「文字色」→「モノトーン」→「ホワイト」と選択

 

ザ・トール-ボックスの作り方

 

オレンジ基調だと、黒文字タイトルより白の方が統一感が出ますね。

 

⑦タイトルを選択した状態で、「■スタイルセット」→「ラベルパーツ専用」→「アイコン(ボーダー)」と選択

 

ザ・トール-ボックスの作り方

 

アイコン(ボーダー)を押しても見た目的にはあまり変化がありませんがそれでOK!

 

最後にアイコンを挿入していきます。

 

⑧アイコンオプションから鉛筆(icon-pencil2)をコピー→タイトルを選択→「アイコン挿入」と選択→完成!!

 

ザ・トール-ボックスの作り方

 

これで、例としたオレンジボックスが完成しました!

 

もちろん、これは一例ですので、ご自身で好きなようにカスタマイズ可能です!!

 



 

パーツの保存方法

 

ザ・トールのマニュアルにはパーツスタイルの保存について記載がありますが、簡単におさらいです!

 

まず、私が試した結果、ボックスとラベルを組み合わせたままカスタマイザーに保存することはできないようで、別々に保存して、ビジュアルエディタ内で組み合わせるしかなさそうです。

 

ザ・トールをお使いの方は、ダッシュボードページをスクロールして一番下までいくと、「THE THORマニュアル・会員フォーラムサイト」がありますので、そこからマニュアルをご覧ください。

次に、サイドメニューから「コンテンツ制作」の欄にある「エディタの使い方」をクリック。

「オリジナルのラベル・ボタン・ボックス・ボックス内ボックスの作り方」という記事にカスタマイザーへの登録方法が記載されているので、参考にしてみてくださいね。

 

登録は手間がかかって面倒!という方へ

 

例えば、複数のパーツを使う方は、その分登録を複数回行わなければなりませんし、数も限られているので難しい部分があると思います。

 

そこで、私が行なっているパーツの保存方法は、PCにもともと備わっているメモやテキストエディットにHTMLを貼り付けておくことです。

 

ザ・トール-パーツの保存

 

このように保存しておけば、わざわざパーツごとをスタイルから挿入することもなくなりますし、タイトル部分とコメント部分を書き換えればいいのでかなり楽!

 

また、使用するときは、HTMLを保存したテキストエディットを開いてコピーして、WordPress記事編集画面のテキストエディタに貼り付ければOK!

 

パーツごとに保存する手間もなくなるのでオススメですよ〜^^

 

ボックスの改行についてはこちらをご覧ください!

 

関連記事

今まで数回、ザ・トールのボックスについてブログを書いてきました。   このテーマのボックスの良いところは、自分でパーツをカスタマイズできたり、色を変更できたりするところです。   しかし、ザ・トー[…]

THE・THOR-改行

 

 

最後に

 

今回は、ザ・トールで、パーツを組み合わせたボックスの作り方や保存方法について解説してみました。

 

オリジナルでパーツを自由に作れるからこそ、デザインに悩んだり扱いきれなかったりしますが、シンプルを目指すと意外と簡単!

 

また、一度作ったパーツは、HTMLを保存することによって簡単に挿入できるので、作り方を忘れてしまった場合でも問題ありません。

 

今回ボックスは一例ですので、ご自身でお好きなようにカスタマイズして記事制作を楽しんでくださいね!

 

パーツの色だけ変えたい!という方はこちらをご参照ください。

 

関連記事

前回、私が普段使用しているボックスを例に、パーツの組み合わせ方を解説しました。   [sitecard subtitle=関連記事 url=https://www.aru-karu.com/entry/the-thor[…]

ザ・トール-パーツの色変更

 

 

関連記事

皆さんは、ブロガーさんが一つの記事を完成させるまで、どのような手順を踏んでいるか知りたいと思ったことはありませんか?   ブログの書き方のハウツーは、インターネット上でも書籍でもよく目にすると思います。 &nbs[…]

ブログルーティン
関連記事

はてなブログからWordPressへ移行して約1ヶ月が経ちました。   しかし、移行したのはいいけど、その後何をすれば良いのか、当時の私も手探り状態で悩んだ思い出があります…。   そこで、今回は[…]

移行後やることリスト

記事はいかがでしたか?

こちらには、記事を読んでくださった方にオススメな広告が表示されます。

<スポンサーリンク>




ザ・トール-ボックスの作り方
☆とんの日常はこちらから☆