はてなブログにnote風に作者を表示する

note流行ってますよね。

てことで、はてなブログにnote風に作者欄を表示したいときの方法をまとめました。

何のために表示するか?
わかりませんｗ

なんかnoteっぽくてカッコよくないですか？笑

CSSの設定

設定 > 詳細設定タブ
で”headに要素を追加”のフォームに以下のcssを設定します。

<style> .author-content { display: flex; line-height: 80%; font-size: 12px; margin-top: 8px; } .author-content .name-content{ display: flex; flex-direction: column; margin-left: 8px; justify-content: space-between; padding: 4px 0px; } .author-content img { border : 1px solid #DADADA ; width: 30px; height: 30px; border-radius: 15px; } .author-content a { color: #bdc3c7; text-decoration: none; } </style>

各記事の上部にHTMLを書く

記事の冒頭に以下のHTMLを挿入します。

今回はtwitterへリンクするようにしました。
画像URL、名前、twitterURL、twitterアカウントは適当に変更しましょう。

マークダウン記法、はてな記法、ともに大丈夫です。 (普通にHTML混ぜて書けるんですね)
みたまま記法の場合はHTMLタブに記載しましょう。

もし全ての記事に共通で挿入してもよいのであれば、

デザイン > カスタマイズ(真ん中の工具アイコン) > 記事
の”記事上”のフォームに設定してもOKです。

こんな感じになります

どん！

なんかnoteっぽくないですか？？笑