天宮です。
Bloggerテンプレート「Vaster2」の
カスタマイズ講座の追補として、
記事上部に投稿者名を表示する方法を
紹介してみたいと思います。
ネットでググってみても、
Bloggerの投稿者名を非表示にしたい！
という記事はよく目にするけど
その逆「表示したい！」というのは
見掛けませんね。
これはなぜかと考えてみると、
おそらく、
Bloggerは一つのアカウントで
たくさんのブログを開設できるから
アフィリなどでブログ量産する場合に
投稿者名の表示をしたくないのかと思います。
そういう事もあって、
「Vaster2」でも表示しないような
テンプレートにしてあるのかも知れませんね。
ま、個人的には以前の記事でも書いた通り
投稿者の表示については有っても無くても
どっちでも良いような気がしていますが…
もし表示をしてアピールするのであれば、
その投稿者がどういう人物像であるのか？
読者さんに伝わりやすいような工夫を
忘れないようにして下さい。
それでは、カスタマイズに入っていきます。
まずは現状の表示を確認しましょう。
今回は、HTMLとCSS（PC用・スマホ用）
３ヵ所を編集するカタチとなります。
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の編集
２ヵ所ある.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はテーマのカスタマイズを
学んでいくと自分好みのデザインで
ブログを作ることができますから
参考にしてみて下さい。
