はてなブログで「この記事を書いた人」/AUTOHRを記事下に実装するカスタマイズ
Word pressにあってはてなブログにないもの、それは、「この記事を書いた人」の有無です。
一時期の僕なら、涙で枕を濡らすことしかできませんでした。しかし、最近はそれなりにCSS/HTMLの勉強をしているので、自分でこの程度のカスタマイズならなんとか出来るようになりました。誰得かは分かりませんが、使ってみてください。
正直ほとんどのブロガーには必要ない
おそらくほとんどのブロガーが、サイドバーにプロフィールを表示させているはずです。そういう方がこのカスタマイズを実装すると、自己顕示欲の塊みたいに見えて非常に見苦しいことになります。
サイドバーにプロフィールは必要ないかも
サイドバーはに表示するのはあくまで、回遊率を高めるためのものが良いと個人的に考えています。正直ほとんどの読み手は、僕のプロフィールに興味はありません。なので、記事下にひっそりと置く程度が丁度いいと思っています。
まあ僕は自分のこと知って欲しいから見出しの下に表示してるけどね！！！
完成例
目次の後を参照してください。一応レスポンシブ対応です。
HTML（追記が結構必要）
はじめに、僕の書いたHTMLを表示しておきます。僕は記事下に入れております。
また、結構な量の追記が必要です。んでもって、長すぎると表示が崩れます。PC版は結構余裕があると思いますが、スマホ版はそれなりに崩れやすいのでご注意を。確認しながらカスタマイズしてください。
さて、カスタマイズするところが沢山あります。逐一頑張って解説していきます。
止まるんじゃねえぞ…
二行目のカスタマイズ：Font Awesome
二行目のこいつ
<i class="fa fa-coffee" aria-hidden="true"></i>
は、Font Awesomeを使ったアイコンです。僕のカスタマイズだとコーヒーになっています。
こちらのサイトから好きなアイコンを持ってきて実装するとグッドです。
いらないのであれば、ここは消してください。
二行目のカスタマイズ：好きな文字に変える&文字サイズの変更
さっきのFont awesomeの列の後に続くこいつ
<b>ABOUT<span style="font-size:0.8em;">-この記事を書いた人-</span></b>
は、好きなように変えることが出来ます。
僕のカスタマイズであれば、ABOUTの部分はCSSで指定された文字の大きさになっていますが、その横の「この記事を書いた人」の部分は、直接font-sizeを指定して文字を小さくしています。
ABOUTだけでよければ消してください。
また、<b>~</b>で囲まれていますが、これは太字にするためだけのタグなので、不要であれば適時消してください。
プレーンなCSS
ある程度知識がある方であれば、こちらを使ってください。
<div class="author-name">AUTHOR</div>
四行目：アイコンのカスタマイズ
<p><a href="http://cdn-ak.f.st-hatena.com/images/fotolife/s/skyfish25/20171229/20171229014808.jpg?1514479692?changed=1514479692" class="http-image" target="_blank"><img class="http-image" src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/skyfish25/20171229/20171229014808.jpg?1514479692?changed=1514479692" alt="http://cdn-ak.f.st-hatena.com/images/fotolife/s/skyfish25/20171229/20171229014808.jpg?1514479692?changed=1514479692" width="100" /></a></p>
アイコンは四列目に3つ挿入するところがあります。はてなフォトライフのURLが長くてHTML自体がめちゃくちゃ長くなってますね。明らかにURLなんだろうなってとこを変えてください。
ちなみに、最後の
width="100"
を変えると、画像の横幅を変えることが出来ます。大きすぎると表示が崩れます。
注意：画像は正方形で
画像は縦長、横長のものだと表示がおかしくなりますので、必ず正方形のものを使ってください。
画像のサイズは特に指定はありませんが、500×500以下のものが、表示速度的にも良いかなと思います。
７行目のカスタマイズ：自分の名前
<p><b><span style="color: #5f91e0; font-size: 1.5em !important;">宇宙魚<span style="font-size:0.6em;">(id:skyfish25)</span></span></b></p>
ここは、自分の名前のカスタマイズです。
最初の、color: 〜を変えると、文字色が変わります。各自のテーマに合わせてかっこよくしてあげてください。
８行目のカスタマイズ：自己紹介
<p>元気な大学生ブロガー。仕事の依頼は<a href="https://docs.google.com/forms/d/e/1FAIpQLSf8PdDP_zlBY_va8iwU7So55zRSMsLIdSt4eWphaEkfuaOqkA/viewform?usp=sf_link"><b>問い合わせフォーム</b></a>から。質問、殺害予告、依頼等は<a href="https://odaibako.net/u/25_sKy_fiSh_"><b>お題箱</b></a>からどうぞ。雑食でなんでも書きます。詳しいプロフィールは<a href="http://skyfish25.hatenablog.com/about"><b>こちら</b></a>から。</p>
めちゃくちゃ複雑そうに見えますが、これは僕が沢山リンクを貼っているからです。特にリンクを沢山貼るつもりがない方は、
<p>最近そうめんチャンプルーが好きです</p>
みたいのだけでいいと思います。
10~14行目のカスタマイズ：読者になるボタン
NOTITLEさんからのコピペなので上の記事を参照してください。
https://blog.hatena.ne.jp/skyfish25/skyfish25.hatenablog.com/subscribe
を
https://blog.hatena.ne.jp/自分のID/httpを抜いた自分のブログのURL/subscribe
に書き換えると、読者登録ボタンになります。
コピペで実装すると僕の読者が増えるのでそのままでも構いません。
CSS（コピペでOK）
ここまで頑張った方、本当にお疲れ様でした。皆さんは修羅場を超えました。
ここからはコピペでOKです。変えるところと言えば、背景色、文字サイズと色等をお好みで変えるだけです。
めんどくさいならコピペでパクっちゃってください！
解説
ここのカスタマイズは任意なので、ちょっと簡略化して解説していこうと思います。
最初の、.authorbの後のbackgroundは背景色です。薄い色が合うと思います。
7行目からの .author-nameの background:#444; color:#fff; は、それぞれ、背景色と文字色をさしています。色のコードを逆にすれば、白背景に黒字になります。
backgroundの色をポップな色にすれば、可愛い雰囲気になると思うのでぜひ適時カスタマイズしてみてください。
21行目からの
.authorb .http-image{
border-radius:15% !important;
padding-top:5px;
}
のborder-radius:15%は、値を大きくすると角が丸くなります。
50%にすると丸くなり、0%にすれば角張ります。
30行目以降は文字サイズです。表示に問題がなければデフォルトでいいと思います。最初のフォントサイズがスマホ版の文字サイズ、後者のフォントサイズはタブレット以降の文字サイズです。
出来ましたか
最初にも言った通り、誰得なのか全くわかりません。この記事いる？とか思わないようにしながら頑張りました。
ちなみに出来ねえ！！ってなったらコメント欄にでも書いてくだされば答えます。もしくはツイッターまでどうぞ。
