(cache) ZENO-TEALでシェアボタンがずれちゃっている方、よければお試しください

f:id:tsubasa123:20170501162816j:plain

こんにちは、つばさ（@tsubasa123）です。

タイトル通りですが、今日はちょっとおせっかいなカスタマイズネタ、対象となる方は「ZENO-TEAL」というテーマを使われていて、さらに特定のシェアボタンカスタマイズをご利用中の方になります。お心当たりのある方がいらっしゃいましたら少しお付き合いください。

一応お断りしておきますが

テーマやシェアボタンのカスタマイズに文句を言う気はサラサラございません。ただ、色々なカスタマイズを組み合わせたことでなんかずれちゃっている人がいて、自力で直せずに困っている人がいるのかもしれない、と思ってこの記事を書いています。やらない善よりやる偽善ってことです。

問題の原因を突き止めようかとも思いましたが、別にちゃんと表示されるようになればそれでいいんじゃない、ってことで原因究明よりも解決案を提示することにしました。とりあえず、ChromeとEdgeの最新版では確認しました（Edgeだと1pxくらいずれてますが）。スマホは大丈夫っぽいので確認していません、ダメなら教えてください。

シェアボタン、ずれちゃっているような

はてなブログでは珍しいカード型、WordPressの某有料テーマにそっくりなデザインということで、ちょっとした話題になったはてなブログ用のテーマ「ZENO-TEAL」。流行り出して一ヶ月以上たちましたが、たまーにお見かけするんですよね、記事上や記事下に配置されているシェアボタンの下の部分がちょっとずれちゃっている方。

こんな感じ。

f:id:tsubasa123:20170501143114j:plain

ボタンとしては機能していますし、気にならない人にとっては問題ないのかもしれませんが、一度気にしちゃうとどうしてもそこに目がいっちゃうんですよね。私の悪い癖です。

CSS追記してみてください

多分ですが、ボタンがずれちゃっている人はみんな同じボタンのカスタマイズを利用していて、

.share-buttons .inner a {
    position: relative;
    display: inline-block;
    width: 17.5%;
    height: 45px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    padding: 5px;
}

（font-sizeやpaddingはお好みで調整されているかもしれませんが）このようなカスタムCSSを指定しているんじゃないかと思います。ですので、この記述よりも下で、

.share-buttons .inner a {
    line-height: inherit;
    font-size: 15px;
}

上記の4行を追記してみてください。

f:id:tsubasa123:20170501143122j:plain

多分これで下にはみ出ちゃっていた文字が上にぐぐっと持ち上がって、ボタンの枠内で表示されるようになるはずです。この時、全体的に上にずれるのでアイコン上の余白がちょっと狭くなります。それも気になる方は、

.share-buttons .inner a {
    line-height: inherit;
    font-size: 15px;
    padding: 4px
}

と一番下に「padding: 4px;」も追加すると余白の調整が可能です。数字を変えてお好みの幅で整えてみてください。

本当はググタスとポケットのアイコンも一回り大きくできればもっと馴染むのかもしれませんが、まぁそこまでしなくても十分キレイなデザインなのでこれでいいかな、と。

あー、修正をお試しいただく際はバックアップをお忘れなく。追記とはいえ、戻せなくならないようにお気を付けください。

おまけ

ZENO-TEAL、改めて見直しましたがやっぱかっこいいですね。あちらこちらで使われているのも納得です。

ただ、公式のサポートブログでも説明されていますが、やっぱり皆さん、記事の最初の画像じゃなくてアイキャッチ画像をトップページに出したいみたいですね。たしかに、記事の最初に画像が配置されることを想定しているというのは結構厳しい制約だなーと。これは仲良くしていただいているブロガーさんも仰っていましたし、ツイッターやブコメで同じような意見を見かけたりもしました。

私もテーマ作成に少し手を出したので、はてなブログの仕様的にアイキャッチをトップページで表示するのは厳しいということは把握してはいるのですが、まぁ、皆さんの意見もごもっともだなーと思うところ。はてな運営さん、なんとかなりませんかね、APIとか専用の埋め込みタグとか作ってくれるとすごい助かります。

で、ちょっと考えてみたんですが、アーカイブページっていうのかな、「/archive」にアクセスすると表示される、最大50件表示の一覧ページみたいなやつ。あれはアイキャッチが使われる仕様になっているみたいでして。この辺工夫すれば、アイキャッチがトップページに表示されるテーマが作れたりしないかな、と考えています。

デフォルトだとサムネのサイズがちょっと小さいですが、JavaScriptでURLをこねくり回せば元画像もとれそうですし、CSSのアニメーションやフィルタ使えばちらつきもごまかせたりしないかな、なんて。んー難しそう。

orefolderさん、いかがでしょうか。もし技術的に対応できそうなら、アーカイブバージョンの作成もご検討ください。私でよければ微力ながらお手伝いもさせていただきます。