複数のブログメンバー毎のプロフィール欄を記事下に設置する

はてなブログのブログメンバー機能とは

はてなブログProには複数人で一つのブログを運営できる「ブログメンバー機能」があります。
help.hatenablog.com

このブログメンバー機能を使うとブログオーナー以外のはてなユーザーも記事を書いたり（寄稿者）、デザインの変更やブログの設定を変更したり（管理者）できます。
ブログメンバーの権限は「寄稿者」「編集者」「管理者」と三段階あります。詳しくは上記のはてなブログのヘルプページをご覧ください。

ユーザー毎に記事下にそれぞれのプロフィール欄を表示する

さて本題です。複数人のブログメンバーでブログ運営している場合、それぞれのユーザー毎の記事の著者をしっかりアピールしたいですよね。
はてなブログの標準の機能では

記事下の はてなID 投稿時刻 欄には、投稿したメンバーのIDが記載される

仕様になっているので、それで記事を区別することはできます。

また記事冒頭に

こんにちは！〇〇です。

と自己紹介を入れてらっしゃる方も多いと思います。

記事を文末まで読み終わったときにもっとわかりやすく記事の著者をアピールできるよう、ユーザー別のプロフィール欄を記事下に追加するカスタマイズを作りました。

このようにユーザーの記事毎にそれぞれのプロフィールが表示されます。

やり方はとても原始的ですw　記事下にそれぞれのメンバーのプロフィール欄のHTMLを入れてjQueryでユーザーIDを判定して別のメンバーのプロフィールを削除しているだけです。

はてなブログの記事下部にはその記事を書いたユーザーのIDが表示されるのでそれを判定に使っています。

以下にカスタマイズ方法をご紹介していきます。

プロフィールのHTML/jQuery

プロフィールのHTMLは以前書いた記事のものを流用しています。CSSはそちらの記事のものを追加して下さい。
blog.minimal-green.com

以下のコードを適宜編集し、デザイン＞カスタマイズ＞記事下に入れてください。以下はブログメンバーが「ユーザー1」「ユーザー2」と2名の場合です。
[data-user-name="user1"]と[data-user-name="user2"]はuser1、user2にそれぞれ該当のはてなIDを入れて下さい。

<div id="my-footer-profile-1">
	<div class="entry-footer-profile">
		<div class="entry-footer-profile-title"><i class="blogicon-subscribe"></i> Profile</div>
		<div class="entry-footer-profile-body">
			<div class="entry-footer-profile-left"><img src="ユーザー1のプロフィール画像URL" class="entry-footer-profile-icon" alt="プロフィールアイコン">
				<p class="entry-footer-profile-id"><a href="aboutページURL">id:ユーザー1</a></p>
			</div>
			<div class="entry-footer-profile-right">
				<div class="entry-footer-profile-description">ここはプロフィール説明文です。ここはプロフィール説明文です。ここはプロフィール説明文です。</div>
				<div class="entry-footer-follow-buttons">
					<a class="facebook" href="facebookページURL" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-facebook lg"></i>
						<span class="inner-text">Facebook</span>
					</a>
					<a class="instagram" href="https://www.instagram.com/ユーザー名" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-instagram lg"></i>
						<span class="inner-text">Instagram</span>
					</a>
					<a class="twitter" href="https://twitter.com/ユーザー名" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-twitter lg"></i>
						<span class="inner-text">Twitter</span>
					</a>
					<a class="hatena" href="http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-hatenablog lg"></i>
						<span class="inner-text">Hatena</span>
					</a>
					<a class="feedly" href="https://feedly.com/i/subscription/feed/http:ブログドメイン/feed" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-rss lg"></i>
						<span class="inner-text">Feedly</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="my-footer-profile-2">
	<div class="entry-footer-profile">
		<div class="entry-footer-profile-title"><i class="blogicon-subscribe"></i> Profile</div>
		<div class="entry-footer-profile-body">
			<div class="entry-footer-profile-left"><img src="ユーザー2のプロフィール画像URL" class="entry-footer-profile-icon" alt="プロフィールアイコン">
				<p class="entry-footer-profile-id"><a href="aboutページURL">id:ユーザー2</a></p>
			</div>
			<div class="entry-footer-profile-right">
				<div class="entry-footer-profile-description">ここはプロフィール説明文です。ここはプロフィール説明文です。ここはプロフィール説明文です。</div>
				<div class="entry-footer-follow-buttons">
					<a class="facebook" href="facebookページURL" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-facebook lg"></i>
						<span class="inner-text">Facebook</span>
					</a>
					<a class="instagram" href="https://www.instagram.com/ユーザー名" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-instagram lg"></i>
						<span class="inner-text">Instagram</span>
					</a>
					<a class="twitter" href="https://twitter.com/ユーザー名" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-twitter lg"></i>
						<span class="inner-text">Twitter</span>
					</a>
					<a class="hatena" href="http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-hatenablog lg"></i>
						<span class="inner-text">Hatena</span>
					</a>
					<a class="feedly" href="https://feedly.com/i/subscription/feed/http:ブログドメイン/feed" target="_blank" rel="noopener noreferrer">
						<i class="blogicon-rss lg"></i>
						<span class="inner-text">Feedly</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<!--jQueryを使用 既にこれより上に記述済みの場合は不要-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
	$(function() {
		var dataUser = $('.fn');
		// ユーザー1の記事のとき
		if (dataUser.is('[data-user-name="user1"]')) {
			$('#my-footer-profile-2').remove();
		// ユーザー2のとき
		} else if (dataUser.is('[data-user-name="user2"]')) {
			$('#my-footer-profile-1').remove();
		}
		// 上記のユーザー以外
		else {
			$('#my-footer-profile-1, #my-footer-profile-2').remove();
		}
	});
</script>

target属性に_blankが指定されているaタグにはセキュリティー上rel="noopener noreferrer"を入れた方が良いようなので追加しています。

3名のブログメンバーの場合は3つのプロフィールを用意して、scriptを

<script>
	$(function() {
		var dataUser = $('.fn');
		// ユーザー1の記事のとき
		if (dataUser.is('[data-user-name="user1"]')) {
			$('#my-footer-profile-2, #my-footer-profile-3').remove();
		// ユーザー2のとき
		} else if (dataUser.is('[data-user-name="user2"]')) {
			$('#my-footer-profile-1, #my-footer-profile-3').remove();
		}
		// ユーザー3のとき
		else if (dataUser.is('[data-user-name="user2"]')) {
			$('#my-footer-profile-1, #my-footer-profile-2').remove();
		}
		// 上記のユーザー以外
		else {
			$('#my-footer-profile-1, #my-footer-profile-2, #my-footer-profile-3').remove();
		}
	});
</script>

こうすればいけると思います。

以上あまり需要がないカスタマイズかと思いますが、ご家族やご友人ではてなブログを共同運営しているときなどにご利用下さい。