THE THOR の便利な機能のひとつ「カラム」を少々カスタマイズします。
カラムの基本的な使い方やバリエーションは前回記事をご覧ください。
このサイトでは THE THOR というテーマを利用しています。 THE THOR は機能が豊富で便利。その中でもお気に入りの機能【カラム】を利用して画像を横並びにする方法を紹介。 THE THOR 画像を横に並[…]
個人的にカラムの中でもよく使うのは2カラム1:1(PC+スマホ)と2カラム1:1(PC)です。
ここでは2カラム1:1(PC)を使ってカスタマイズをします。
カラムを線で囲む
カラムに囲み罫をつけます。背景色がない場合は記事本文との境目がわかりづらくなるので囲み罫があったほうが良いかな〜と思います。
囲み罫の付け方は簡単で THE THOR のスタイルを使います。
囲み罫を付ける
ビジュアルエディタ → スタイル → スタイルセット → ボーダー系
カラムをセットし、囲み罫を付けたいカラムのテキストなどを選択した状態でボーダー系を選びます。
どんな感じになっていますか？
PC表示も試しに見てみてください。
囲み罫に余白を付ける
エディタ上ではキレイに表示されていたのが実際には囲み罫と文字がくっついてしまい格好が悪いですね。
左右に余白を追加しましょう。先ほど同様、スタイルで簡単に余白を追加できます。
ビジュアルエディタ → スタイル → スタイルセット → 内側余白系
ここではレフト(極小)とライト(極小)を選びました。
実例
左右に余白をつけました。先ほどとくらべてどうでしょうか？見やすくなりましたか？上下左右に好みの余白を付けてください。
PC表示も試しに見てみてください。
カラムに背景色を付ける
背景色を付けます。手順は同じでカラーセットから背景色を選びます。
※背景色以外にも色々とスタイルが適用できるので試してください。
ビジュアルエディタ → スタイル → カラーセット → 背景色
ここでは上下左右の余白を(小)にしています。
シャドウと角丸もつけた。
以上です。
カスタマイズというか使い方の追加みたいな感じですね。
THE THOR カスタマイズ カラム 隙間をなくす
上のカラムは囲み罫が付いているので良いのですが、次のカラムを見てください。
ら
の
カ
ラ
ム
使い方に
やけに
絡む
からあげ棒
からムぁげ棒
ちょっと例が悪くてあまり気にならないかも知れませんが、比較ボックスのようなものを並べた場合はこの隙間がとても気になります。
なので隙間を詰めるコードをちょこっと挿入します。
以下のコードをテキストエディタで挿入します。
ら
の
カ
ラ
ム
使い方に
やけに
絡む
からあげ棒
からムぁげ棒
<div class=”column column-2pc”>
<div class=”column__item”>テキスト</div>
<div class=”column__item” style=”margin-top: 0; margin-left: 0;”>テキスト</div>
</div>
</div>
以上です。
カラム全体に枠を付ける
個別のカラムではなく、カラム全体に枠を付けたいときはボックスの中にカラムを作ってボックスに枠を付けましょう。
やることは簡単
操作にクセがあるので注意
同じ色を使いたくて選択出来ない場合は
テキストエディタで直接指定
設定の仕方にクセがあります。 THE THOR の操作全体に共通するクセです。
まずボックスの設定を完了させます。ボックスに背景色やボーダーを設定するにはボックスの中にコンテンツがないと設定ができません。適当なテキストを打って選択した状態でボックスのカラーを設定しましょう。
ボックスの設定が完成したらカラムを設置してカラーなどを設定しましょう。ボックスで使用しているカラーと同じカラーを使おうとすると選択ができません。その場合はテキストエディタで直接コードを挿入しましょう。
・設定をつける順番を考える。
・テキストなどコンテンツがないと設定ができない場合がある。
・同色を使用するなどで選択ができない場合は、テキストエディタに直接コードを書く。
WordPressの達人が教える 本気でカッコよくするWordPressで人気ブログ 思いどおりのブログにカスタマイズす...
あとがき
ちょっとしたクセがあるので最初は上手くいかないことが多いかもしれません。
慣れればあまり考えず簡単に作れます。
ただ毎回記事を書くごとに作っていては面倒です。良いコンテンツが出来たらコードをテキストファイルなどにコピーして、いつでも使えるように準備しておきましょう。
コードのコピペはビジュアルエディタのメニューにある< >を使うと便利です。
THE THOR は AdSense を含め広告を表示する方法がいくつもあります。 ※当サイトは THE THOR を使用しています。 記事内最初のH2うえに自動で広告を挿入したり、ウイジェットで任意の場所に表示したり、ショート[…]
