えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

コピペするだけ!最新記事と注目記事の「はてなブックマーク数」の位置を調整する方法

\フォロー!/
\シェア!/

f:id:mshitech:20161226080222j:plain

「最新記事」と「注目記事」のブックマーク数の位置がずっと気に食わなかったんですよ。

それをキッチリ揃えるためのCSSと軽く応用をご紹介します。

画像で説明

ブックマーク数の位置について、文章で書くとどんな感じになるのか分かりにくいので、画像で見せます。

 

使用前

f:id:mshitech:20161225210914j:plain

使用後

f:id:mshitech:20161225195013j:plain

 

こんな感じです。

左の「使用前」はブックマーク数があっちこっちに行っていますが、右の「使用後」はブックマーク数が右に寄っていますね。

スッキリしました。

揃うって、素晴らしいですね。

CSS

では貼り付け場所とコードを紹介します。

「貼り付け場所なんか分かっているよ」という方は読み飛ばしてくださいね。

貼り付け場所

まずはCSS、その貼り付け場所はこちら。
「デザイン」→「カスタマイズ」→「デザインCSS」です。

赤枠の部分をクリックして下さい、CSSの入力フィールドが現れます。

そして以下に紹介するコードを一番下辺りにペーストして貼り付けてくださいね。

コード

肝心のコードです。

/* ブックマークの数字の位置調整 */
a.bookmark-widget-counter img {
position: absolute;
right: 0px;
bottom: 20px;
}

これをコピペするだけで、当サイトと同じ位置にブックマーク数が表示されるようになります。

画像のサイズなど、各々の環境で違うと思いますので好みの数値を入れてください。

ちょうどいい場所を探すのはそんなに難しくないと思います。

絶対値を指定しているのでアイキャッチが無い場合だと、文字とブックマーク数の部分が重なってしまいます。ご注意ください。あと、恐らくタイトルが長すぎる場合なども同様です。

応用 : 位置を変える

例えば、上のコードにある"right: 0px; bottom: 20px;"の部分を

left: 0px;
top: 20px;

なんかに変えると、「ブックマークの数」がサムネイル画像の左上あたりに表示されるようになります。

ご存知かと思いますが、設定をいじればブックマーク数の表示をオフにも出来ますよ。

まとめ

基本はCSSを貼り付けるだけで出来ますし、位置の調整も簡単です。

表示位置を揃える事によってサイドバーがスッキリ見えると思うので、宜しければ導入してみて下さい。

 

ではでは、また次の記事で・・・

 

CSShtml5を学ぼう!