THE THOR ザ・トール カラムをカスタマイズ

THE THOR の便利な機能のひとつ「カラム」を少々カスタマイズします。

カラムの基本的な使い方やバリエーションは前回記事をご覧ください。

あわせて読みたい

THE THOR ザ・トール 画像を横に並べる カラムが便利！ カラムを使うと簡単に画像などを横並びにすることができます。PCでは横並び、スマホでは縦並びなども簡単です。

個人的にカラムの中でもよく使うのは2カラム1:1(PC+スマホ)と2カラム1:1(PC)です。

ここでは2カラム1:1(PC)を使ってカスタマイズをします。

カラムを線で囲む

カラムに囲み罫をつけます。背景色がない場合は記事本文との境目がわかりづらくなるので囲み罫があったほうが良いかな〜と思います。

囲み罫の付け方は簡単で THE THOR のスタイルを使います。

囲み罫を付ける

カラムをセットし、囲み罫を付けたいカラムのテキストなどを選択した状態でボーダー系を選びます。

囲み罫に余白を付ける

エディタ上ではキレイに表示されていたのが実際には囲み罫と文字がくっついてしまい格好が悪いですね。

左右に余白を追加しましょう。先ほど同様、スタイルで簡単に余白を追加できます。

ここではレフト(極小)とライト(極小)を選びました。

実例

カラムに背景色を付ける

背景色を付けます。手順は同じでカラーセットから背景色を選びます。

※背景色以外にも色々とスタイルが適用できるので試してください。

以上です。

カスタマイズというか使い方の追加みたいな感じですね。

THE THOR カスタマイズ カラム 隙間をなくす

上のカラムは囲み罫が付いているので良いのですが、次のカラムを見てください。

ちょっと例が悪くてあまり気にならないかも知れませんが、比較ボックスのようなものを並べた場合はこの隙間がとても気になります。

なので隙間を詰めるコードをちょこっと挿入します。

以下のコードをテキストエディタで挿入します。

以上です。

カラム全体に枠を付ける

個別のカラムではなく、カラム全体に枠を付けたいときはボックスの中にカラムを作ってボックスに枠を付けましょう。

設定の仕方にクセがあります。 THE THOR の操作全体に共通するクセです。

まずボックスの設定を完了させます。ボックスに背景色やボーダーを設定するにはボックスの中にコンテンツがないと設定ができません。適当なテキストを打って選択した状態でボックスのカラーを設定しましょう。

ボックスの設定が完成したらカラムを設置してカラーなどを設定しましょう。ボックスで使用しているカラーと同じカラーを使おうとすると選択ができません。その場合はテキストエディタで直接コードを挿入しましょう。

あとがき

ちょっとしたクセがあるので最初は上手くいかないことが多いかもしれません。

慣れればあまり考えず簡単に作れます。

ただ毎回記事を書くごとに作っていては面倒です。良いコンテンツが出来たらコードをテキストファイルなどにコピーして、いつでも使えるように準備しておきましょう。

コードのコピペはビジュアルエディタのメニューにある< >を使うと便利です。

あわせて読みたい

THE THOR ザ・トール AdSense 簡単！広告を記事に挿入する方法 THE THOR AdSense 広告を簡単に記事へ挿入する方法。