Studio TA Subsite の案内とお知らせ

SNSボタンの周辺レイアウト / エキサイトブログ

2017年 07月 17日
ブログ発信者にとって、SNS連携でより広い層へのアピールを求めるのは常識となりつつある様で、私もそろそろ食わず嫌いを改めねばと考えています。

エキサイトは現在の所、ソーシャルネットワークツールとして6種のSNSボタンを用意しています。「ブログイイネボタン」は、エキサイトユーザー間の効果を重視した機能の様です。 また、他の「Twitter」「Facebookシェアボタン」 「はてなブックマーク」等は、とても気になる機能です。

さて、これらのSNSボタンは、私のアレンジ元の公式スキンでは、下図の様な微妙な場所に配置されます。

a0349576_22151577.png

上側は「タグリスト」、下側は「他記事のテキスト表示」「他記事の画像表示」に挟まれています。 周囲の機能はブログ内の他記事参照機能で、押せば他ページに飛んでしまいます。 このページに対して押してもらいたい「SNSボタン」は、どう考えても本文の直下にあるべきでしょう。

「タグリストは非表示で良い」という人は問題がないでしょう。 しかし、私の場合は「タグリスト」「他記事の画像表示」を必要と考えています。 そこで、この配置をスキンアレンジで変える事にしました。

以下の説明は「他記事のテキスト表示」を非表示とした有料会員を前提にしています。 有料会員でない場合は、「SNSボタン」の下に宣伝が入りますが、「SNSボタンを投稿本文の直下に移動するアレンジ手法」はそのままで有効です。 ただし、表示パーツの間隔は、適当に調整が必要と思います。



下図は「他記事のテキスト表示」を非表示とした、アレンジ前の状態です。

a0349576_22370349.png

IE11のDOMを使って「タグリスト」の構造を調べると、以下の様なものと判ります。

a0349576_22460507.png

「.taglist」は「margin: 20px 0 10px」(マージン値は、上/左右/下)で、その内部に「~をまとめ読み」の「.taglist-matome」が有ります。「SNSボタン」の移動先を上マージン「50px」と増して確保し、「~をまとめ読み」は表示しない事にしました。

.taglist {
margin: 50px 0 10px !important; }

.taglist-matome {
display: none; }

a0349576_22585530.png

SNSボタン群は、纏めて「.sm_icon_mini」というブロックに入っています。 ブロックの元のマージン値は「0」で、これを「.taglist」より上に配置するために、上マージン値を「-100px」のマイナス指定としました。

ここで配慮が必要なのは、SNSボタンは投稿ごとに「表示」「非表示」を切り替える場合がある事です。 両方の場合で、周囲のパーツの間隔が変わらないのがベストです。 これについては、
「マイナスマージン値」=「ボタン自身の高さ」+「プラスマージン」
とする事で、周囲パーツの間隔を「表示」「非表示」で不変にできるはずです。

ボタン自身の高さは「25px」程度です。(これは実は、後の背景着け後に修正した値です) そこで、とりあえず次のマージン値を設定しました。

.sm_icon_mini {
margin: -100px 0 75px; }

下図はこの指定の結果です。

a0349576_11044949.png

下図は、DOMのマージン表示を外した実表示の様子です。

a0349576_11080510.png

SNSボタンの配置を本文側に持って来れましたが、パーツの間隔が間延びしてる様に感じます。 これは本文の行間隔や、全体のスキンデザインの詰め方等との「バランスの問題」です。 余り詰めると堅苦しくなりますが、私は少し詰めることにしました。

「.taglist」の下マージン「10px」を「0」に、それでも足りず、リスト内部のパーツ「.taglist-list-li」の下マージン「8px」を「0」に。 また、ボタン自身のマージンは「-75px 0 50px」に調節。 下側の「他記事の画像」の罫線は要らないので消した結果が、以下の状態です。

.taglist {
margin: 50px 0 0 !important; }

.taglist-list-li {
margin: 0 8px 0 !important; }

.sm_icon_mini {
margin: -75px 0 50px; }

.preview_inn {
border-top: none; }

a0349576_11115976.png

ここで、SNSボタンのブロックに背景色を着けて、本文の範囲を明確にすることにしました。 上下padding値で背景の高さを調節、左端からの余裕は「15px」が関係します。

.sm_icon_mini {
padding: 0 15px 4px;
background: #ddd; }

また、「他記事の画像表示」の下マージンを10px→0px に少し詰めました。

.preview_inn {
margin: 30px 0 0 !important; }

a0349576_11130994.png

最後に、SNSボタンの横方向の間隔を調整。 ここに表示されていないボタンに付いては不明です。

.sm_icon_mini .xbg_like, 
.sm_icon_mini .xspf_icon,
.sm_icon_mini a,
.sm_icon_mini iframe,
.topsy_widget_data {
margin: 5px 11px 0 0 !important; }

a0349576_11304624.png



これで完成と思い、SNSボタン非表示のサンプルを作りテストして見ると、予想外に隙間が空きます。

a0349576_12365700.png

この隙間の実体をDOMで調べると、以下の指定が原因でした。

a0349576_12384422.png

下側は想定外で、ボタン表示の場合は「30px」を変えても何も変わらず放置していました。 つまりボタン非表示で「30px」を調節して、ボタン表示の場合と同じ間隔にすれば良く、結局これは「0」が最適でした。

上側の「50px」は、本文にSNSボタンが重ならない様に、予防的に空けたものです。 SNSボタンが非表示となれば、本文の下端が空くのは仕方ないですが、本文末に改行で余裕を作るのが常ですから、SNSボタンを出来るだけ上に寄せる事にしました。 調整の結果、下図の様に「30px」と決めました。

.taglist {
margin: 30px 0 0 !important; }

.preview_inn {
margin: 0 !important; }

a0349576_13355376.png

この設定で、SNSボタンの「表示」と「非表示」の違いを比べた結果が以下です。 両者でボタンの有無が異なるだけで、周辺パーツの配置に変化が無く、当初の目的を達しています。

    〔SNSボタンが表示の場合〕
a0349576_13430419.png

    〔SNSボタンが非表示の場合〕
a0349576_13435366.png



以上の推敲から、ブログスキンに追記するコードを纏めたものが以下です。


/* TAG and SNS */

.taglist {
margin: 30px 0 0 !important; }

.taglist-list-li {
margin: 0 8px 0 !important; }

.taglist-matome {
display: none; }

.sm_icon_mini {
margin: -75px 0 50px;
padding: 0 15px 4px;
background: #ddd; }

.preview_inn {
margin: 0 !important;
border-top: none; }

.sm_icon_mini .xbg_like,
.sm_icon_mini .xspf_icon,
.sm_icon_mini a,
.sm_icon_mini iframe,
.topsy_widget_data {
margin: 5px 11px 0 0 !important; }


公式スキンでは、これらのパーツに使用されるセレクタ名は、おそらく共通と思うのですが、完全に確認したわけではありません。 もし大変に変な表示となる場合は、セレクタと構成をDOMで調べてください。 また、上記のアレンジコード中の上下マージン値は、使用しているスキンに合せて適当に調整をしてください。

なお、公式スキンを使用中で、初めてスキンアレンジをされる場合は、必ず以下の(1)(3)の段を参照してから始める事をお勧めします。



この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。




[PR]
# by Ataron | 2017-07-17 18:34 | ブログスキンのアレンジ | Comments(0)