Minimal WP「Juliet」ソーシャルボタンの余白が出来ないように調整した

投稿日:2016年10月3日 更新日:

当ブログのWordpressテンプレートはMinimal WPで販売されている「Juliet」というテンプレートを使用しています。このテンプレートは、とにかくシンプルで洒落ています。そして何より写真がきれいに見えるのが特徴です。

購入したのが2015年の2月。ノーマルの状態でも十分に使える状態なんですが、無駄なこだわりがあるので所々カスタマイズしています。基本的にWordpressのテンプレートをカスタムするのが好きなのかもしれません。他に使っているテンプレートも大体カスタマイズして使っています。

※現在は別のテンプレートを使っています。

 

スポンサーリンク
 

記録しておくことは大事ですね

今考えれば、この「Juliet」テンプレートのカスタマイズ記録を記事にして残しておけば良かったなと思います。理由は、どこを変更したか全部は覚えていないからです。唯一このカテゴリーの前の記事でh2の変更の記事を書いていますが、現在はよりシンプルな状態に戻しています。

そこで覚えている限りで変更している点を書き出すと、

  • 記事上のリンクをパンくずリストに変えた
  • 記事タイトル(h1)のフォントを変えた
  • PC表示の記事とサイドバーの高さを調整した
  • プラグイン「WordPress Popular Posts」の表示を改行しないようにした
  • サイドスクロールの「Q2W3 Fixed Widget」調整
  • ページネーションを設置した
  • スマホでの表示幅を広げた

ざっくりは以上ですが、おそらくまだ変更してると思います。
スマホの表示幅を調整したのはiPhone4sからiPhone6sに機種変更した時です。サイドの余白を広く感じたし、画像も大きく見せたかったので変更したのを覚えています。

 

今回は「WP Social Bookmarking Light」をカスタマイズ

20161003-01
とりあえず今回からはカスタマイズをした部分を記録しておこうと思います。

今回カスタマイズした部分はWordpressプラグイン「WP Social Bookmarking Light」の余白調整です。調整なのでカスタマイズと言える程では無いかもしれません。ちなみに「WP Social Bookmarking Light」を使うと、記事上・記事下・記事上下両方にソーシャルボタンを設置することが出来ます。直接コードに記入するパターンもありますが、現在はプラグインを使っています。

「WP Social Bookmarking Light」の特徴ははてブがあることと、この「Juliet」に合っているので使用しています。

そのまま使うと余白が出来る

20161003-04
この「WP Social Bookmarking Light」をそのまま使うと不自然に余白が出来たり、ガタガタになったりします。その状態でも気にならなければ良いのですが、ビシッと揃えたい性格なので変更しました。特にスマホ表示だと無駄にスペースが空くので、見てくれる人のわずかなストレスを生むとも思います。

そこで、下の画像の部分のStylesタブ部のCustom CSSを変更しました。
20161003-02
内容は以下の通り。

※もし変更される場合はバックアップを取りながら自己責任でお願いします。

 

結果、理想の表示スタイルになりました

20161003-05
バシッと横並び、ボタン間のスペースもベストな状態です。

スマホで見ても良い感じです。おそらくMinimal WPで販売されている新しいテンプレート「Slauson」か「Vanilla City」に変えれば、より良い感じもしますが「Juliet」に手間をかけてる分でしょうか、変更できない状態です。

 

Juliet (レスポンシブデザイン対応) - シンプルでおしゃれなWordPressテーマ

 

-ブログ

Copyright© goriback.blog , 2019 All Rights Reserved Powered by STINGER.