カテゴリーによって切り替わる『この記事を書いた人』の作成法（はてなブログ）

f:id:nobi2saku:20190131192048j:plain

このブログは弟と運営しているので、記事を書いた人をどうしても表示させたいと思っていました。

しかし、WordPressではそういうプラグインがあるみたいなのですが、はてなブログではなかなか自動で切り替えてくれるコードがなかったんですよ。

なので、超絶初心者の僕が他サイト様のコードを組み合わせてゴリ押しで作ってみました。

「この記事を書いた人」以外にも、カテゴリーによって「記事上」や「記事下」に任意の記述を表示できるので便利なのではと思います。

まずは完成例

「のび作」をカテゴリーに設定した記事は、記事下にこのように表示されます。

f:id:nobi2saku:20190131181145p:plain

弟が投稿した、「味付け海苔」をカテゴリー設定した記事はこうなります。

f:id:nobi2saku:20190131182216p:plain

「デザイン設定 - カスタマイズ - デザインCSS」に貼り付けるコード

こっちはコピペでOK。

/*この記事を書いた人*/
.authorb {
    margin: 2em 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    overflow: auto
}
.authorb .author-name {
    font-size: 1.3em;
    padding: 4px;
    text-align: left;
    background: #5D5D5D !important;
    color: #fff;
    font-weight: bold !important;

}
.authorb p {
    padding: 3px 9px;
    margin: 0;
    padding-top:5px !important;
}
.authorb .http-image{
border-radius:15% !important;
padding-top:5px;
}
.authorb .authorimg{
background-size:cover;
padding-top:5px;
}

@media screen and (max-width: 500px) {
.authorb p {
font-size:0.85em !important ;
}
}

@media screen and (min-width: 501px) {
.authorb p {
font-size:1.0em;
}
}

/* 読者ボタン */
.subscribe-button {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}
.subscribe-button-inner a {
  position: relative;
  display: block;
  top: 0;
  width: 300px;
  height: 46px;
  margin: 0 auto;
  line-height: 46px;
  border-radius: 4px;
  background-color: #5D5D5D;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  text-decoration: none;
  transition: all .3s;
}
.subscribe-button-inner a:hover {
  top: 3px;
  box-shadow: none;
}

「デザイン設定 - カスタマイズ - 記事 - 記事下」に貼り付けるコード

こちらは何箇所か直す必要があります。

<script>
showHTMLByCategoryWord1='１人目の名前';
showHTMLByCategoryWord2='２人目の名前';
var pageTags=document.getElementsByTagName('meta');
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ('article:tag'==pageTags[i].getAttribute('property')) && (showHTMLByCategoryWord1 == pageTags[i].getAttribute('content') ) ){
document.write('<div class="authorb">')
document.write('<div class="author-name">  <i class="fas fa-user-edit"></i><b> ABOUT<span style="font-size:0.8em;"> - この記事を書いた人 -</span></b></div>')
document.write('<div style="float: left; margin-left: 1px;">');
document.write('<p><a href="h１人目の画像" class="http-image" target="_blank"><img class="http-image" src="１人目の画像" alt="１人目の画像" width="100" /></a></p>')
document.write('</div>')
document.write('<div class="authorcontent">')
document.write('<p><b><span style="color: #5f91e0; font-size: 1.5em !important;">１人目の名前<span style="font-size:0.6em;">(id:nobi2saku)</span></span></b></p>')
document.write('<p>自己紹介</p>')
document.write('<p>自己紹介</p>')
document.write('<div class="subscribe-button">')
document.write('<div class="subscribe-button-inner">')
document.write('<a href="https://blog.hatena.ne.jp/nobi2saku/mokuji.hatenablog.com/subscribe"><i class="blogicon-hatenablog lg"></i> 読者になる</a>')
document.write('</div>')
document.write('</div>')
document.write('</div>')
document.write('</div>')
break;
}else if( ('article:tag'==pageTags[i].getAttribute('property')) && (showHTMLByCategoryWord2 == pageTags[i].getAttribute('content') ) ){
document.write('<div class="authorb">')
document.write('<div class="author-name"><i class="fas fa-user-edit"></i><b> ABOUT<span style="font-size:0.8em;"> - この記事を書いた人 -</span></b></div>')
document.write('<div style="float: left; margin-left: 1px;">');
document.write('<p><a href="２人目の画像" class="http-image" target="_blank"><img class="http-image" src="２人目の画像" alt="２人目の画像" width="100" /></a></p>')
document.write('</div>')
document.write('<div class="authorcontent">')
document.write('<p><b><span style="color: #5f91e0; font-size: 1.5em !important;">２人目の名前<span style="font-size:0.6em;">(id:nobi2saku)</span></span></b></p>')
document.write('<p>自己紹介</p>')
document.write('<p>自己紹介</p>')
document.write('<div class="subscribe-button">')
document.write('<div class="subscribe-button-inner">')
document.write('<a href="https://blog.hatena.ne.jp/ご自身のはてなid/サイトのurl/subscribe"><i class="blogicon-hatenablog lg"></i> 読者になる</a>')
document.write('</div>')
document.write('</div>')
document.write('</div>')
document.write('</div>')
break;
}
}
}
adsFilter();
</script>