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

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

 

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

基本事項

このサイトでは THE THOR というテーマを利用しています。 THE THOR は機能が豊富で便利。その中でもお気に入りの機能【カラム】を利用して画像を横並びにする方法を紹介。 カラムが便利! THE TH[…]

THE THOR カラム 使い方 サンプル

 

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

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

 

カラムを線で囲む

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

 

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


囲み罫を付ける

操作手順
ビジュアルエディタ → スタイル → スタイルセット → ボーダー系

 

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

実例
便利なカラムに囲み罫をつける
どんな感じになっていますか?
便利なカラムに囲み罫をつける2
PC表示も試しに見てみてください。

 

囲み罫に余白を付ける

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

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

 

操作手順
ビジュアルエディタ → スタイル → スタイルセット → 内側余白系

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

実例

便利なカラムに囲み罫をつける
左右に余白をつけました。先ほどとくらべてどうでしょうか?見やすくなりましたか?上下左右に好みの余白を付けてください。
便利なカラムに囲み罫をつける2
PC表示も試しに見てみてください。

 


カラムに背景色を付ける

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

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

 

操作手順
ビジュアルエディタ → スタイル → カラーセット → 背景色
カラムに背景色を付ける
ここでは上下左右の余白を(小)にしています。
背景色とボーダーを付けた。
シャドウと角丸もつけた。

 

以上です。

 

 

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

 

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

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

 






カラムの
使い方に
やけに
絡む
からあげ棒
からムぁげ棒

 

 

真ん中の隙間、気になりません?

 

 

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

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

 

 

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

style=”margin-top: 0; margin-left: 0;”

 

 

出来上がり





カラムの
使い方に
やけに
絡む
からあげ棒
からムぁげ棒

 

 

コードを挿入する場所は以下の通りです。(カラムを設置しただけのコードです。)赤文字が挿入したコード。
<div>
<div class=”column column-2pc”>
<div class=”column__item”>テキスト</div>
<div class=”column__item” style=”margin-top: 0; margin-left: 0;”>テキスト</div>
</div>
</div>

 

この記事でサンプルに使っているカラムはPCで横、スマホで縦の配置になるカラムです。
PCで隙間が無くなっているか?スマホで隙間が無くなっているか?確認してみてください。
※数値を0ではなく、5pxなどにすると隙間を小さくすることができます。PC表示でのもとの隙間は20pxです。好みのサイズに変更しましょう。(スマホでの画面左右の隙間が15pxなので、それ以下が良いと個人的には思います。)

 

 

以上です。

 

カラム全体に枠を付ける

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

 

実例
ボックスの中にカラムを設置
やることは簡単
操作にクセがあるので注意
ボックスの設定を完成させてからカラムの設定をする
同じ色を使いたくて選択出来ない場合は
テキストエディタで直接指定

 

 

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

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

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

 

 

THE THOR 操作のクセ

・設定をつける順番を考える。
・テキストなどコンテンツがないと設定ができない場合がある。
・同色を使用するなどで選択ができない場合は、テキストエディタに直接コードを書く。

 

 

あとがき

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

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

 

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

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

広告コードだけじゃない

THE THOR は AdSense を含め広告を表示する方法がいくつもあります。 ※当サイトは THE THOR を使用しています。 記事内最初のH2うえに自動で広告を挿入したり、ウイジェットで任意の場所に表示したり、ショート[…]

アドセンス 広告設置 THE THOR

 

THE THOR カラム カスタマイズ
呟くのよ・・・私の棒ストが