いぬくら。

マイクラの世界をまったりのんびり楽しみます♡

  当Blogはプロモーションが含まれています

「シェアボタン」を「関連記事」の上に配置したい

  本ページはプロモーションが含まれています

 

 

hello

▼・ェ・▼デス

おもむろに、Blog Customize の記事第2弾を投入。

 

 

 

 

「文末」か「記事直下」がいいと思ったんだ

 

 

シェアボタン ってさ

「読んだ記事を他の人にもシェアしたいな」って時に押すものだと思ってるわけ。

 

 

なのにさ?

 

 

f:id:bless-you:20180913011401j:plain

「記事下」に CSS を貼り付けると「関連記事」の下に表示される

 

 

今はまだ、トータル記事数がショボいから、1記事くらいしか並ばないけど

記事数が増えてきたら5記事並ぶわけでしょ?

そんな下まで下がらないとシェアボタン押せないとかさ

▼・ェ・▼は変だと思ったわけ。 

 

 

『この記事をシェアする』って言ってんだからさ

位置的には、「文末」もしくは「記事直下」ってのがしっくりくる。

 

 

‥というわけで、ggrks

 

 

「関連記事」の上に配置する CSS

 

 

www.notitle-weblog.com

 

 

今回お世話になりましたのは、上記のBlog。

なにを隠そう(隠しませんけども)このBlogのテーマ「SOHO」の作者さんです。

 

 

最初は別のBlogが検索でヒットしたんですけども

そちらのBlogで紹介されていたのが

シロマさんの記事でしたので飛んでみましたところ

タイトルの意味がよくわからない・・・ 

 

 

よくよく読んでみましたらば、

「記事下」の CSS 記入エリア(カスタマイズ可能なエリア)は、

はてなBlogのデフォルトでは、関連記事よりも下からになるとのこと。

「ならば、その設定を CSS で逆にしちゃおうぜ?」ってことらしいです。

 

 

デザイン設定>カスタマイズ>デザインCSS に以下のコードを追加。

 

/* 関連記事を記事下よりも下に */
.customized-footer {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.entry-footer-modules {
-webkit-order:2;
order:2;
width: 100%;
}
.entry-footer-html {
-webkit-order:1;
order:1;
width: 100%;
}

 

f:id:bless-you:20180913013431j:plain

とりあえず、記事直下にシェアボタンは配置されたヨ

 

 

うん、そーだよネー。

「記事下」と「関連記事」の位置を逆にしたんだからそうなるよね。

 

 

「シェアボタン」だけ「記事直下」で

「関連記事」の下に「広告」とかできれば尚良しだったんだけども。(。・ɜ・)

 

 

じゃぁ、フッター部分に広告配置すればいんじゃね?

って思い付いて、試してみたけど位置的にバランス悪くて気持ちが悪かったから断念。

 

 

うーむ、どしよかな。

 

 

シェアボタン配置すること自体をやめよ!!(๑•̀ㅂ•́)و✧

元はと言えば、シェアボタン配置することにしたから色々気になっちゃったわけで。

パッと見かっちょ良さげに見えたから配置したくなっただけだし。

うん、やめよ!

 

 

記事は、せっかくここまで書いたのでシェアしますね!

 

 

 

 

 

 

ってところで、今日はおしまいデス。
どなたさまも素晴らしいブログライフを! *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

 

 

゚*。.ღ ⊹⊱ £ονё & βLёss уoц ⊰⊹ ღ.。*゚
Thank you.
I love you.