Simplicity SNSボタンの中身を縦中央寄せにしたい他

前回まで、Simplicityを少し改造してみたpart1〜4でその内容について、jQueryであったりPHPの説明をしてきたけれど、実はもっと気になっていたことがあってそれはFont Awesomeで表示している各SNSマークが縦中央に寄っていないと言うことであった。

↑これを、こうしたい↓

(※ 画像は公式より拝借。下の方は加工してあります。わかりにくいですが、例えば真ん中のはてなのB!マークの上下マージンあたりを見ていただけると縦中ができてるかがわかってもらえるかと思います。)

横の中央揃えはcssでtext-align:centerでもしておけばいいけれど、高さがわからない要素に対してでも何でもかんでもその親要素の中央に文字やら画像やらを配置したい時ってあるじゃないですか?

方法としてはまず簡単なのが、要素の高さとline-heightを同じにすると言うのがありますけども、高さがわからないとどうすればいい?となります。

そこで、こういうやり方でやってみてはどうでしょう?

potision:relativeは相対位置への配置となります。要素の50%に配置され、自身の50%分上に移動します。これはどういうことかと言いますと、配置する何かしらは必ず自身の周りに見えない枠があってこの枠に対してマージンやパディングまたはボーダー等を設定することになります。
今回の要素も同じく文字(FontAwesome)にも見えない枠があり、要素がtopから50%に位置するということは枠の上辺がその位置にあるということなのです。なので自身の高さの半分をマイナスすることで要素のセンターラインに沿うと言うことなのです。
(出典:コリス)

Screenshot_from_2014-11-11 22:34:15これはlinux-mint17のChromiumのF12の画面ですが、右下のようなボックスモデルになれば成功です。縦も横もautoになっていればどんな箱に入れていても絶対に真ん中に入ります。

さて、ではSimplicityではどこを設定するかですが、いろいろ試してみた所、webfontフォルダ内のstyle.cssに、

と修正。子テーマがあれば子テーマのstyle.cssを(できれば子テーマを追加して)、

とこの二点でイケたように思います。もし記事の中やその他若干の変更がいる場合は、そのセレクタに対して微調整をするという感じでしょうか。本当なら、これはclassにして、要素タグに記入するだけで縦中(vertical-align)で揃えられるようにしたい所ですが、親要素がどうなっているか、あるいはcssの書き方や構成の仕方に左右されるかも知れないので注意が必要です。

追記: いろいろ試した結果、上のようにするだけでいけると思われます

別件で。
トップページなどの記事のリストが表示される時、抽出した文字の最後に三点リーダー(…や…)を入れたい時どうするかをついでに書いておきます。
これは、親テーマのfunctions.phpのだいたい260行目付近にコメントで「本文抜粋を取得する関数」と書いてある部分に追加します。

この$contentの後ろに何かしらを入れると抽出した本文の後に任意の文字を入れられるようになります。と言うことは、抽出した文字の前にも入れられるということです。例えば<本文抜粋>抽出した記事…と言うようなこともできるということですね。アイコンを入れたり強調したい文字があれば新たに処理を加えて太字にしたりとかもできるわけです。
デフォルトでは70文字を抽出しているのであまり文に対して強調とか飾り付けはできないかもしれませんが、まぁアイデア次第で色々できる部分ではあります。

親テーマのfunctions.phpを変更するのでアップデートで無くなると困るという方は、子テーマのfunctions.phpにコピペして、親テーマの方をコメントアウトするようにすればよいかもしれません。そういう時は必ず、子テーマに自分でコメントを付けて親テーマのxxxと言う関数をいじったとメモを残しておくほうが良いでしょう。

スポンサーリンク

シェアする

フォローする