pressにあってはてなブログにないもの、それは、「この記事を書いた人」の有無です。一時期の僕なら、涙で枕を濡らすことしかできませんでした。最近はそれなりにCSS/HTMLの勉強をしているので、自分でこの程度のカスタマイズならなんとか出来るようになりました。誰得かは分かりませんが、使ってみてください。ほとんどのブロガーには必要ないおそらくほとんどのブロガーが、サイドバーにプロフィールを表示させているはずです。いう方がこのカスタマイズを実装すると、自己顕示欲の塊みたいに見えて非常に見苦しいことになります。サイドバーにプロフィールは必要ないかもサイドバーはに表示するのはあくまで、回遊率を高めるためのものが良いと個人的に考えています。ほとんどの読み手は、僕のプロフィールに興味はありません。記事下にひっそりと置く程度が丁度いいと思っています。目次の後を参照してください。一応レスポンシブ対応です。ちなみに上の画像はPC版、アイキャッチはスマホ版です。HTML(追記が結構必要)はじめに、僕の書いたHTMLを表示しておきます。僕は記事下に入れております。結構な量の追記が必要です。もって、長すぎると表示が崩れます。PC版は結構余裕があると思いますが、スマホ版はそれなりに崩れやすいのでご注意を。確認しながらカスタマイズしてください。カスタマイズするところが沢山あります。頑張って解説していきます。Awesomeを使ったアイコンです。僕のカスタマイズだとコーヒーになっています。fontawesome.ioこちらのサイトから好きなアイコンを持ってきて実装するとグッドです。いらないのであれば、ここは消してください。style="font-size:0.8em;">-この記事を書いた人-</span></b>は、好きなように変えることが出来ます。僕のカスタマイズであれば、ABOUTの部分はCSSで指定された文字の大きさになっていますが、その横の「この記事を書いた人」の部分は、直接font-sizeを指定して文字を小さくしています。ABOUTだけでよければ消してください。<b>~</b>で囲まれていますが、これは太字にするためだけのタグなので、不要であれば適時消してください。プレーンなCSSある程度知識がある方であれば、こちらを使ってください。/></a></p>アイコンは四列目に3つ挿入するところがあります。はてなフォトライフのURLが長くてHTML自体がめちゃくちゃ長くなってますね。明らかにURLなんだろうなってとこを変えてください。ちなみに、最後のwidth="100"を変えると、画像の横幅を変えることが出来ます。大きすぎると表示が崩れます。注意:画像は正方形で画像は縦長、横長のものだと表示がおかしくなりますので、必ず正方形のものを使ってください。画像のサイズは特に指定はありませんが、500×500以下のものが、表示速度的にも良いかなと思います。style="font-size:0.6em;">(id:skyfish25)</span></span></b></p>ここは、自分の名前のカスタマイズです。〜を変えると、文字色が変わります。各自のテーマに合わせてかっこよくしてあげてください。8行目のカスタマイズ:自己紹介<p>元気な大学生ブロガー。href="https://odaibako.net/u/25_sKy_fiSh_"><b>お題箱</b></a>からどうぞ。雑食でなんでも書きます。href="http://skyfish25.hatenablog.com/about"><b>こちら</b></a>から。</p>めちゃくちゃ複雑そうに見えますが、これは僕が沢山リンクを貼っているからです。リンクを沢山貼るつもりがない方は、<p>最近そうめんチャンプルーが好きです</p>みたいのだけでいいと思います。10~14行目のカスタマイズ:読者になるボタンwww.notitle-weblog.comNOTITLEさんからのコピペなので上の記事を参照してください。https://blog.hatena.ne.jp/skyfish25/skyfish25.hatenablog.com/subscribeをhttps://blog.hatena.ne.jp/自分のID/httpを抜いた自分のブログのURL/subscribeに書き換えると、読者登録ボタンになります。コピペで実装すると僕の読者が増えるのでそのままでも構いません。CSS(コピペでOK)ここまで頑張った方、本当にお疲れ様でした。皆さんは修羅場を超えました。ここからはコピペでOKです。変えるところと言えば、背景色、文字サイズと色等をお好みで変えるだけです。めんどくさいならコピペでパクっちゃってください!解説ここのカスタマイズは任意なので、ちょっと簡略化して解説していこうと思います。最初の、.authorbの後のbackgroundは背景色です。薄い色が合うと思います。それぞれ、背景色と文字色をさしています。色のコードを逆にすれば、白背景に黒字になります。backgroundの色をポップな色にすれば、可愛い雰囲気になると思うのでぜひ適時カスタマイズしてみてください。!important;padding-top:5px;}のborder-radius:15%は、値を大きくすると角が丸くなります。50%にすると丸くなり、0%にすれば角張ります。30行目以降は文字サイズです。表示に問題がなければデフォルトでいいと思います。最初のフォントサイズがスマホ版の文字サイズ、後者のフォントサイズはタブレット以降の文字サイズです。出来ましたか最初にも言った通り、誰得なのか全くわかりません。この記事いる?とか思わないようにしながら頑張りました。ちなみに出来ねえ!!ってなったらコメント欄にでも書いてくだされば答えます。ツイッターまでどうぞ。宇宙魚id:skyfish25現在絶賛就活中の21歳大学生。