ワードプレスのウィジェット間にマージン(余白)をつける超簡単な方法


 

サイトやブログは中身、内容が全てなんでしょうけれど、デザイン的な細かいことが気になったりするのも事実ですよね

デザインも見やすくわかりやすくすることができればかなり便利になってサイトから必要な情報を探してもらいやすくなるのでかなり大事ですよね…

そんな中、なんとなく気になっていたデザイン的なことをスキマにちょとづつ直したりもしてるのですが、

この前、サイドバーをちょっと直してたら

おや?笑 ということがあったのでここに備忘録しておきます

 

Sidebar Widget

 

〜〜項目〜〜〜〜〜〜〜〜〜〜

❤︎1、サイドバーウィジェットの距離感がおかしい?

❤︎2、サイドバーウィジェットの距離感はCSSとかで編集しなくても直せる
(ウィジェット間の調整)

❤︎3、実はテーブルプレスもスペースを使って簡単に調整できる

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 

スポンサーリンク

 

 

❤︎1、サイドバーウィジェットの距離感がおかしい?

サイドバーにそれぞれタイトルバナーをつけてみたら。。。。。。。。

Side Bar Widget 1

 

なんか距離感、つまりマージンのバランスが変…….笑
sidebar Widget 2

 

本当は下図のように関係あるものどうしが隣接してなきゃわかりづらい

Side Barのバランス

 

なんかそれほど気にすることでもないのですがなんとなく気持ち悪い笑

 

で、これテーマのCSSとかで編集するのはなんだか面倒

いちいち調べてまで直す必要もないかな。。。って感じだった笑

でも実は簡単に誰でも

“スペースを利用することで調整できる” 

 

 

 

❤︎2、サイドバーウィジェットの距離感はCSSとかで編集しなくても直せる
(ウィジェット間の調整)

すんごい単純で当たり前なことなんですが笑

 

下図のように、ウィジェットにはタイトルを入れられる
今回はバナーがタイトルそのものになってるので、このタイトルはいらない

Widget タイトル 1

 

で、ここは空白のままではなく、

“スペースをしっかり入れる”

   ↓

Widget title blank

 

するとさっきのがこのように………↓

サイドバーウィジェットのバランス

 

サイドバーウィジェットの距離感の調整

 

もっと微調整もできますが私はこのくらいでOK w

こんな感じでただ単純にスペースを入力すすだけで距離感を保てる

めでたしめでたしw

 

 

 

❤︎3、実はテーブルプレスもスペースを使って簡単に調整できる

で、このスペースって意外にもTablePressでも使える笑

Webサイトの表現でまず最初の壁はテーブルな気がするんですが、ワードプレスの場合、TablePressというプラグインを使うと便利ということで使ってる方も多いとお思う

私も横幅、列が10以上あるとかの場合は仕方なくTablePressでも使うか。。。といった感じで笑 使うこともあります

そこで面倒になってくるのはレスポンシブ対応(スマホやタブレット対応)なんですが、単にレスポンシブ対応しただけでは列や行がずれるとかなる笑

 

なので、微調整が必要なんですが、これも “スペース” で調整できる

 

通常オプションカスタムCSSで指定すればいいのですが、結構面倒くさい笑

TablePress option

 

 

でもスペースだったら簡単w

 

例えば下図のようにスペースバーで “スペースを入力する”

Table1

 

Table2

 

すると、

下図のようなものが、

Table3

 

下図のようになる

Table4

 

 

つまりスペースはそのまま生かされる

 

 

下図のようなバランスなものを

Table5

 

 

スペースを入力することによって位置を変えることができる

Table6

                   

Table7

 

で、これらで微調整しながらレスポンシブにしたテーブルの列のズレを調節したりもできるよね、というお話でしたw

ただ、テーブルはテーブルプレスより“TinyMCE Advanced”の方が断然使いやすいw

Webサイトでの簡単なテーブル(表)の作成について参照

 

ま、”スペースが生きる” というのは当たり前といえば当たり前なのかもしれませんが、

</br>

とか

&nbsp;

 でなくともスペースバーでスペース入力で行けるならその方が一瞬で済むので、

な〜んだ そうなんすか!ってなんか力が抜けたので備忘録してみました!

 

ってことで楽しいサイト構築、デザインカスタマイズをば!

しゃらんるわあああぁあ❤︎

 

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤Twitter, Facebook, G+, Feedly にて当サイト更新情報配信中です
宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

 Twitter   asset.f.logo.lg   btn_g_red_normal.png-34

REACH_rh note

follow us in feedly

 

関連コンテンツ

\(`^`)b


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight + 12 =