記事本文末尾に著者紹介を挿入するように設定したので、そのデザインや方法を備忘録がてら書いていこうと思います。
どうやら、「はてなブログPro」ユーザのみ記事本文末尾にモジュールを追加可能っぽいので、そうでない方は記事下などに設定してみてください。（動作確認はしていませんが、たぶん大丈夫なはず…）
ちなみに完成図はこんな感じ。
①記事本文末尾にモジュールを追加する
記事本文末尾（もしくは記事下）にHTMLコードを追加します。
具体的には、「デザイン」 → 「カスタマイズ」 → 「記事本文末尾」 → 「モジュールを追加」 → 「HTML」と遷移して、以下のコードを記述します。
（記事下の場合は、「デザイン」 → 「カスタマイズ」 → 「記事」 → 「記事下HTML」）
赤太字の箇所は、各々が設定してください。
aboutページについては補足1、
プロフィール画像については補足2、
読者になるボタンについては補足3、
SNSリンクについては補足4、補足5を参照ください。
<div class="author">
<p class="subtitle">
この記事を書いた人
</p>
<div class="author-content">
<div class="author-content-image">
<a href="自分のaboutページのURL">
<img src="自分のプロフィール画像のURL" alt="適当に設定" class="author-image" />
</a>
</div>
<div class="author-content-text">
<p class="author-name">
<a href="自分のaboutページのURL" class="author-name-link">
自分の名前
<span style="font-size: 80%";>
(id:自分のID)
</span>
</a>
</p>
<p class="author-description">
適当な紹介文
</p>
</div>
</div>
<p style="margin: 0;">
読者になるボタンのHTMLコード
</p>
<ul class="author-sns">
<li class="author-sns-item">
<a href="自分のSNSURL" class="author-link">
<em class="SNSに応じたクラス名">
</em>
</a>
</li>
</ul>
</div>
補足
補足1 aboutページ
aboutページは、「自分のブログのURL + /about」にあります。
自己紹介記事などがあり、そちらに誘導したい場合はそのURLを記載してください。
補足2 プロフィール画像のURL
自分のプロフィール画像のURLは、「アカウント設定」 → 「基本設定」 → 「プロフィール」 の欄にある画像を右クリック、「画像アドレスをコピー」で取得できます。
補足3 読者になるボタン
読者になるボタンのHTMLコードは、「設定」 → 「詳細設定」 → 「読者になるボタン」にあります。（結構下の方にあります。）
補足4 SNSリンク
上記のコードは、SNSが1つのみの想定で記述しています。
複数を表示したい場合、SNSリンクはリストで設定しているので、<li>～</li>を追加してください。
補足5 SNSアイコン
はてなブログでは、特定のクラス名を記述するとアイコンが表示されます。
以下に、代表的なSNSに応じたクラス名を紹介します。
サイズを大きくしたい場合はlgをクラス名に追加してください。
| アイコン | クラス名 |
|---|---|
| blogicon-twitter | |
| blogicon-facebook | |
| blogicon-instagram |
ほかにもアイコンが用意されているので、下記の記事などを参考にしてみてください。
>>【ブログカスタマイズ】「はてなブログ」のアイコンフォントの種類・使い方を解説｜グローバルメニューにおすすめ - redoブログ
…と書きましたが、私個人はFont Awesomeを使用してSNSアイコンを表示させています。
手順は以下の通り。
- 設定 → 詳細設定 → head内タグ → <head>要素にメタデータを追加 で遷移し、
<link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">（バージョンは適宜変更してください）を追記 -
Font Awesomeでほしいアイコン名を検索し、表示されているクラス名を記述
サイズ変更や回転などもできるので、必要に応じて適宜調べてください。
CSSを使用して記述することも可能なので、必要に応じて調べてください。
②デザインCSSを追加する
デザインCSSにコードを追加します。
具体的には、「デザイン」 → 「カスタマイズ」 → 「デザインCSS」と遷移して、以下のコードを記述します。
色などは適宜変更してください。
.subtitle {
position: relative;
line-height: 1em;
padding-left: 1em;
font-weight: bold;
}
.subtitle::before {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
border-radius: 20px;
content: "";
background-color: #181818;
}
.entry-footer-section.track-inview-by-gtm {
display: none;
}
.author {
position: relative;
width: 100%;
padding: 15px;
border-width: 3px;
border-color: #dddddd;
border-style: solid;
}
.author-content {
display: flex;
padding-top: 15px;
}
.author-content-image {
margin-right: 1em;
}
.author-content-image .author-image {
width: 64px;
min-width: 64px;
height: 64px;
min-height: 64px;
border-radius: 50%;
}
.author-content-text .author-name {
font-weight: bold;
font-size: 17px;
}
.author-name-link {
color: #119e4d;
}
.author-content-text .author-description {
font-size: 14px;
}
.author .author-sns {
display: flex;
position: absolute;
right: 20px;
bottom: 20px;
margin: 0;
list-style: none;
}
.author-sns .author-sns-item {
margin-left: 1em;
}
.author-sns .author-link {
color: #181818;
font-size: 20px;
}
補足
補足1 既存の著者情報の削除
以下コードにて、デフォルトで記事末尾に表示される著者名、ID、何日前を表示しないように設定しています。
.entry-footer-section.track-inview-by-gtm {
display: none;
}
まとめ
以上で、記事本文末尾に著者情報を挿入する方法紹介を終わります。
コピペなど自由にしていただいて大丈夫ですが、参考とした旨を記事として投稿する場合は、本記事のリンクを貼っていただけると助かります。
Font Awesome関連の記事は今度書きたいと思います。
以上、『【はてなブログ】記事本文末尾に著者情報を挿入する』でした！
ここまで読んでいただき、ありがとうございました！
合わせて読みたい
