Bloggerカスタマイズ追補:「Vaster2」テンプレートで投稿者名を表示する方法


天宮です。



Bloggerテンプレート「Vaster2」の
カスタマイズ講座の追補として、

記事上部に投稿者名を表示する方法を
紹介してみたいと思います。



ネットでググってみても、

Bloggerの投稿者名を非表示にしたい!
という記事はよく目にするけど

その逆「表示したい!」というのは
見掛けませんね。



これはなぜかと考えてみると、


おそらく、

Bloggerは一つのアカウントで
たくさんのブログを開設できるから

アフィリなどでブログ量産する場合に
投稿者名の表示をしたくないのかと思います。


そういう事もあって、
「Vaster2」でも表示しないような
テンプレートにしてあるのかも知れませんね。



ま、個人的には以前の記事でも書いた通り

投稿者の表示については有っても無くても
どっちでも良いような気がしていますが…



もし表示をしてアピールするのであれば、
その投稿者がどういう人物像であるのか?

読者さんに伝わりやすいような工夫を
忘れないようにして下さい。





それでは、カスタマイズに入っていきます。


まずは現状の表示を確認しましょう。



今回は、HTMLとCSS(PC用・スマホ用)
3ヵ所を編集するカタチとなります。



HTMLの編集


<span class='post-tag'>を検索し
そのスグ上に下記をを追加します。


 <span class='post-author'>
  <b:if cond='data:top.showAuthor'>
   <data:top.authorLabel/>
   <b:if cond='data:post.authorProfileUrl'>
    <a class='fn url' expr:href='data:post.authorProfileUrl' rel='author'>
    <data:post.author/>
    </a>
   <b:else/>
    <span class='fn'><data:post.author/></span>
   </b:if>
  </b:if>
 </span>


 <span class='post-author'>
  <b:if cond='data:top.showAuthor'>
   <data:top.authorLabel/>
   <b:if cond='data:post.authorProfileUrl'>
    <a class='fn url' expr:href='data:post.authorProfileUrl' rel='author'>
    <data:post.author/>
    </a>
   <b:else/>
    <span class='fn'><data:post.author/></span>
   </b:if>
  </b:if>
 </span>
  <span class='post-tag'>


CSSの編集

2ヵ所ある.post-tag{ のうち
上部に記載してある方を検索し
そのスグ上に下記を追加します。


.post-author{
    font-size: 14px !important;
    color: #777;/* 投稿者という文字の色 */
    padding-bottom: 2px !important;
    margin-right: 12px !important;
    display: inline-block;
}
.post-author a{
    color: #CF1856 !important; /* 投稿者名リンクの文字の色 */
    text-decoration: none !important;
}


.post-author{
    font-size: 14px !important;
    color: #777;/* 投稿者という文字の色 */
    padding-bottom: 2px !important;
    margin-right: 12px !important;
    display: inline-block;
}
.post-author a{
    color: #CF1856 !important; /* 投稿者名リンクの文字の色 */
    text-decoration: none !important;
}
.post-tag{
    font-size: 14px !important;
    background-color: #FBC92D;  /* カテゴリーリストタグの色 */


レスポンシブ用CSSの編集

.post-tag{ レスポンシブを検索しスグ上に下記を追加


.post-author{
    font-size: 12px !important;
    padding: 1px 0 1px 4px !important;
    line-height: initial !important;
}


.post-author{
    font-size: 12px !important;
    padding: 1px 0 1px 4px !important;
    line-height: initial !important;
}
.post-tag{
    font-size: 12px !important;
    padding: 1px 4px !important;
    line-height: initial !important;




編集したテーマをアップロードして
表示を確認して見ると、


このように投稿者名の表示が出るようになります。



今回は「Vaster2」テンプレートで
投稿者名を表示する方法を紹介させて
頂きましたが、いかがだったでしょうか?


Bloggerはテーマのカスタマイズを
学んでいくと自分好みのデザインで
ブログを作ることができますから
参考にしてみて下さい。