【Simplicity】テキストウィジェット表示位置の左右を調整する方法


このブログではデザインテーマとして無料WordPressテーマのSimplicityを使っています。私のような初心者にはとても魅力的なブログテーマです。

今回もそのカスタマイズに取り組みましたので記事にします。テーマはインデックスリストトップの広告表示位置の調整です。

スポンサーリンク

広告ウィジェットは表示位置の左右を変更できる

さて、「Simplicity」はウィジェットを使うことで簡単に表示位置を変更することができます。また、あらかじめ広告用のウィジェットも用意されているので、それを使うと広告の上に「スポンサーリンク」といったテキストが表示されるようになります。さらに、左マージンのピクセル数の調整もできるため、表示位置も変更することができます。

ところが、通常のテキストウィジェットの場合、左マージンのピクセル数を入力することができないため、広告ウィジェットのように簡単に表示位置を調整することができません。

スポンサーリンク

テキストウィジェットでも表示位置の左右を調整したい

広告ウィジェットを使うと、簡単に表示位置の左右を調整することができます。でも、このウイジェットを使うと、「スポンサーリンク」といったテキストも同時に表示されてしまうのが気になります。

この文字だけ消せばいいのですが、ウィジェットの位置で表示・非表示を切り替えるようにするのは面倒です。

そこで、テキストウィジェットの場合も、表示位置の左右を調整できるようにしてみました。

スポンサーリンク

その方法とは・・・

それは、テキストウィジェットで表示する内容に、クラス属性(class)で名前を付けて、CSS(スタイルシート)で表示位置を調整するという方法です。

今回は、インデックストップリストに表示する広告の位置を左に移動することを目的としていたので、class名を「left」としました。

まず、表示位置を調整したい内容のコードを次のようなクラス属性で名前をつけます。

次に、CSS(スタイルシート)で表示位置を調整します。今回は、style.cssに下のようなコードを追加しました。

これだけです。左マージンのピクセル数を変更すれば、表示位置の左右を変更することができます。