【WordPress】Fancier Author Boxでよくあるレイアウトずれを修正する方法

@tanisukeです。

blog記事の下部に、よくある著者情報を載せたい時に重宝するプラグイン「WordPress › Fancier Author Box
表示する事自体には、ハマリポイントはないのですが、色々なblogを拝見しますと、意図しないレイアウトになってるんじゃないかなというblogを多く見つけました。

概ね、下記の様な悩みを抱えておられるのではないでしょうか。

ボックスからタブが浮く

レイアウトずれ01

PCで見たとき、著者情報が表示されるボックスから20pxほどタブが浮いております。
たぶん、特定のthemeとの相性の問題かも。そういう匂い。

治し方

プラグインのスタイルシートをいじります。(ダッシュボードからできます)

fancier-author-box/css/ts-fab.css の
[php]
/* Tabs content */
.ts-fab-tab {
display: none;
border: 2px solid #55A2E5;
padding: 12px;
background: #fff;
min-height: 80px;
overflow: hidden;
}

[/php]

に一行
margin:-20px 0 0 0;

を追記してやると、無理やりですが治ります。

スマートフォンでタブが並ばない

これは非常によく見かける
レイアウトずれ02

治し方

タブ横並び時の幅がディスプレイサイズを超えているため、縦になっちゃう病です。なので、Androidを使っている人は気づかないかもしれません。
タブ内の文字のpaddingを小さくしてやると、ちゃんとなおります。

上記と同じく、fancier-author-box/css/ts-fab.css を弄ります。

[php].ts-fab-list li a {[/php]

内の、paddingを下記の様に調整することで治りました。
[php] padding: 8px 5px;[/php]

以上

スポンサー
  • このエントリーをはてなブックマークに追加
スポンサー

コメント

  1. … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  2. … [Trackback]

    […] Find More Informations here: tanisuke.net/entry/2840 […]

  3. angara fahise より:

    … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  4. bursa orospu より:

    … [Trackback]

    […] Read More: tanisuke.net/entry/2840 […]

  5. … [Trackback]

    […] Find More Informations here: tanisuke.net/entry/2840 […]

  6. new blog より:

    … [Trackback]

    […] There you will find 38796 more Infos: tanisuke.net/entry/2840 […]

  7. … [Trackback]

    […] There you will find 77915 more Infos: tanisuke.net/entry/2840 […]

  8. web より:

    … [Trackback]

    […] Read More: tanisuke.net/entry/2840 […]

  9. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  10. satta matka より:

    … [Trackback]

    […] Read More: tanisuke.net/entry/2840 […]

  11. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  12. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  13. … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  14. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  15. … [Trackback]

    […] There you will find 5155 more Infos: tanisuke.net/entry/2840 […]

  16. slitherioo.com より:

    … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  17. buy peg mgf より:

    … [Trackback]

    […] There you will find 10019 more Infos: tanisuke.net/entry/2840 […]

  18. PSD 2 HTML より:

    … [Trackback]

    […] There you will find 55731 more Infos: tanisuke.net/entry/2840 […]

  19. … [Trackback]

    […] Read More Infos here: tanisuke.net/entry/2840 […]

  20. matka play site より:

    … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  21. … [Trackback]

    […] Read More: tanisuke.net/entry/2840 […]

  22. Aaron Reed より:

    … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  23. Eric Cain より:

    … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  24. … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  25. anabolic buy より:

    … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  26. … [Trackback]

    […] Read More Infos here: tanisuke.net/entry/2840 […]

  27. … [Trackback]

    […] Read More Infos here: tanisuke.net/entry/2840 […]

  28. … [Trackback]

    […] Read More Infos here: tanisuke.net/entry/2840 […]

  29. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  30. … [Trackback]

    […] Find More Informations here: tanisuke.net/entry/2840 […]

  31. Agen Bandarq より:

    … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  32. yandex ankara より:

    … [Trackback]

    […] There you will find 98524 more Infos: tanisuke.net/entry/2840 […]

  33. … [Trackback]

    […] Read More: tanisuke.net/entry/2840 […]

  34. … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  35. … [Trackback]

    […] Read More Infos here: tanisuke.net/entry/2840 […]

  36. ICQ Chat より:

    … [Trackback]

    […] There you will find 60408 more Infos: tanisuke.net/entry/2840 […]

  37. yandex ankara より:

    … [Trackback]

    […] There you will find 95916 more Infos: tanisuke.net/entry/2840 […]

  38. … [Trackback]

    […] Informations on that Topic: tanisuke.net/entry/2840 […]

  39. … [Trackback]

    […] Read More Infos here: tanisuke.net/entry/2840 […]

  40. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  41. yandex ankara より:

    … [Trackback]

    […] Read More: tanisuke.net/entry/2840 […]

  42. … [Trackback]

    […] Find More Informations here: tanisuke.net/entry/2840 […]

  43. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  44. akan.co より:

    … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]

  45. … [Trackback]

    […] Read More here: tanisuke.net/entry/2840 […]