つなろっく

イロトリドリな毎日

はてなブログの記事下に「この記事を書いた人」を設置してみよう

f:id:pea-nut:20190112132650j:plain
おすっ!つな(@tu_na_69)です(・∀・)

はてなブログの記事の下に「この記事を書いた人」というボックスを設置してプロフィールをおしゃれにアピールしてみたいと思います。

この記事を書いた人を設置する

 目標は、Wordpressのサイトなどでよく見かける「author」ボックスのようなものです。

「この記事を書いた人」「プロフィール」などで検索すると、コピペできるサイトがいくつかありました。

今回、参考にさせていただいたのはこちらのサイトです。

skyfish25.hatenablog.com

コピぺでできます。自分用にカスタマイズする箇所も結構ありますが、画像つきでわかりやすく解説してくれているので、その通りに作業すれば大丈夫です!

わたしの行ったカスタマイズをメモしておきます。

HTMLをコピペ

「HTML」をコピペします。

貼り付ける箇所は「デザイン」→「カスタマイズ」→「記事」→「記事下」

【カスタマイズ】

①2行目:「Font Awesome」は使わずに削除して好きな文字に変更

②4行目:自分のアイコンに変更。画像サイズも150pxと少し大きくしました。

③7行目:名前を書き換える。

④8行目:コメントを書く。

おすすめしたい記事などリンクをいれてもいいですね。わたしはプロフィールページへのリンクを入れています。

⑤「読者になるボタン」を設置。

CSSをコピペ

「CSS」をコピペします。

貼り付ける箇所は「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」

【カスタマイズ】

①3行目:背景色を削除して、背景画像を設定。

background-image: url(画像アドレス);

②11行目:「この記事を書いた人」部分の背景色を変更。

「読者になる」ボタンと色を合わせました。

フォローボタンを設置

「読者になる」ボタンの下にSNS用のフォローボタンを設置しました。

サルワカさんのサイトでコピペさせていただきました。

saruwakakun.com

 HTMLとCSSをそれぞれコピペします。

必要のないボタンは削除します。

それぞれのボタンにリンクを挿入します。

「はてブ!」のリンク先がわからなくて、調べたのでメモしておきますね。

「はてブ!」→http://b.hatena.ne.jp/entry/自分のサイトアドレス/

つなろっくの場合→http://b.hatena.ne.jp/entry/pea-nut.hatenablog.com/

まとめ

こんな感じにできあがりました。

こちらは、モバイルで見た時の画像です。

f:id:pea-nut:20190112172608j:plain

記事下に「この記事を書いた人」を設置してブログがちょっとカッコよくなりましたヾ(≧▽≦)ノ

背景色を変えるだけでもすっきりした印象になります。今回は、名刺のようなイメージにしたくて背景画像に紙っぽい画像を入れてみました。 まだカスタマイズしたいところがいくつかあるので、ちょこちょこと変更していくと思います。