Blog

Takahiko Wada (Twitter, GitHub)
Software engineer / Tokyo.

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

November 03, 2018

note流行ってますよね。

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

f:id:wasan:20181102141421j:plain

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

なんか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を挿入します。

ユアネーム
@your\_name

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

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

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

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

f:id:wasan:20181102142522p:plain

こんな感じになります

どん!

f:id:wasan:20181102143423j:plain

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


Archives
2020 2019 2018 2017 2016 2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004