はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。 記事下と順番を入れ替える css ちょっと細かい解説 記事下の要素の間に入れる html css ちょっと細かい解説 そのほかのカスタマイズ 2列にする ○○を非表示にする サムネイルを消す 日付を消す 冒頭文を消す リストの5番目を消す 「関連記事」の表示を別の名前にする サムネイルを大きくする まとめ 記事下と順番を入れ替える 通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。cssだけで簡単にできます。 css .customized-footer{ d

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

ブログの記事下にアドセンス広告を横に2つ並べて表示している人は多いですよね。いわゆるダブルレクタングルというものです。これ、スマホ表示の時にどうしてますか？ スマホ表示の時も無理やり横に並べることはできますが、それでおかしな横スクロールが発生してはカッコ悪いです。かといってこれを縦に2つ並べると、おそらくポリシー違反となってしまいます。 ならばどうしたらいいのかと言うと、答えは「公式が認める方法を使って、スマホ表示の場合に広告を1つ消す」です。 ダブルレクタングルというのは、上の画像のようにレクタングルサイズ（300×250や336×280）のアドセンス広告を横に2つ並べることです。効果が高かったりバランスがいいということで採用している人も多いと思います。 はてなブログのテーマでレスポンシブデザイン対応のものを使っている時、この広告表示にも注意しておかないと先に書いたように横スクロールが発