はてなブログの記事下に「この記事を書いた人」を設置してみよう
おすっ!つな(@tu_na_69)です(・∀・)
はてなブログの記事の下に「この記事を書いた人」というボックスを設置してプロフィールをおしゃれにアピールしてみたいと思います。
この記事を書いた人を設置する
目標は、Wordpressのサイトなどでよく見かける「author」ボックスのようなものです。
「この記事を書いた人」「プロフィール」などで検索すると、コピペできるサイトがいくつかありました。
今回、参考にさせていただいたのはこちらのサイトです。
コピぺでできます。自分用にカスタマイズする箇所も結構ありますが、画像つきでわかりやすく解説してくれているので、その通りに作業すれば大丈夫です!
わたしの行ったカスタマイズをメモしておきます。
HTMLをコピペ
「HTML」をコピペします。
貼り付ける箇所は「デザイン」→「カスタマイズ」→「記事」→「記事下」
【カスタマイズ】
①2行目:「Font Awesome」は使わずに削除して好きな文字に変更
②4行目:自分のアイコンに変更。画像サイズも150pxと少し大きくしました。
③7行目:名前を書き換える。
④8行目:コメントを書く。
おすすめしたい記事などリンクをいれてもいいですね。わたしはプロフィールページへのリンクを入れています。
⑤「読者になるボタン」を設置。
CSSをコピペ
「CSS」をコピペします。
貼り付ける箇所は「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」
【カスタマイズ】
①3行目:背景色を削除して、背景画像を設定。
background-image: url(画像アドレス);
②11行目:「この記事を書いた人」部分の背景色を変更。
「読者になる」ボタンと色を合わせました。
フォローボタンを設置
「読者になる」ボタンの下にSNS用のフォローボタンを設置しました。
サルワカさんのサイトでコピペさせていただきました。
HTMLとCSSをそれぞれコピペします。
必要のないボタンは削除します。
それぞれのボタンにリンクを挿入します。
「はてブ!」のリンク先がわからなくて、調べたのでメモしておきますね。
「はてブ!」→http://b.hatena.ne.jp/entry/自分のサイトアドレス/
つなろっくの場合→http://b.hatena.ne.jp/entry/pea-nut.hatenablog.com/
まとめ
こんな感じにできあがりました。
こちらは、モバイルで見た時の画像です。
記事下に「この記事を書いた人」を設置してブログがちょっとカッコよくなりましたヾ(≧▽≦)ノ
背景色を変えるだけでもすっきりした印象になります。今回は、名刺のようなイメージにしたくて背景画像に紙っぽい画像を入れてみました。 まだカスタマイズしたいところがいくつかあるので、ちょこちょこと変更していくと思います。