ホーム Hello world Smart 自作テンプレート補足自作テンプレートのコメント欄を仕様変更しました

自作テンプレートのコメント欄を仕様変更しました

2020/09/22

以前コメントで当サイトのテンプレートのコメント欄についてアドバイスをいただきました。そのアドバイスを参考にコメント欄をアップグレードしてみたので、その詳細と旧バージョンからの変更方法についてまとめることにします。

変更に関する詳細

変更点

埋め込み

ポップアップ・フルページ

今回の変更では「コメント欄にGoogle外部ユーザー用のアバター画像を追加したこと」「ポップアップ・フルページ選択時にコメント内容を一覧表示できるようにしたこと」の2点が主なもので、他にもいくつか修正を加えています。見た目は画像のようになります。詳細は以下の通りです。

・コメントのポップアップ・フルページ選択時にコメント内容を表示

・外部ユーザー用のアバター画像追加

・アバターの切り抜きを丸型に変更

・埋め込み時のGoogleユーザー名の右にできる余白を調整

・埋め込み時にコメント内容を左寄せに変更

・埋め込み時のコメント内容の文字間隔・行間を調整

・ポップアップ・フルページ時のフォント・余白などを設定

参考にさせていただいた記事

今回の変更の手法は、アドバイスをくれたふじやん。さんのブログ記事「コメント欄のデザインカスタマイズ」から引用したものになります（ありがとうございます）。

ほとんど記事通りに作業しただけなので、変更方法に関する詳細を知りたい方は元記事を参照してください。

旧バージョンをお使いの方へ

変更の必要性

今回の変更はコメント欄の見た目を大幅に改変したものなので、不具合修正ではありません。今までの仕様でよければ変更する必要性は無いと思います。

また、変更が若干面倒なので、WEBデザインに詳しく無く、旧バージョンである程度設定を終えたテンプレートをお使いの場合も無理して変更する必要は無いでしょう。

一応、テンプレートの元ファイルは変更済なので、設定がデフォルトに戻っても新バージョンを使いたいという方は、新たにテンプレートファイルをダウンロードしてご自身のブログに適用させてください。

アップグレードの方法

今回の変更は、下記の方法で手動でアップグレードすることができます。

1．テンプレートのバックアップをする

失敗したときのために予めテンプレートをバックアップしておいてください。

バックアップと復元の方法は以下の通りです。

【バックアップ】

・管理画面で「テーマ」を選択する

・「カスタマイズ」横の「▼」ボタンをクリックする

・「バックアップ」をクリックしてテンプレートファイルをダウンロードする

【復元】

・管理画面で「テーマ」を選択する

・「カスタマイズ」横の「▼」ボタンをクリックする

・「元に戻す」をクリックしてバックアップしたテンプレートファイルをアップロードする

2．テンプレートを編集してコメント部分のHTMLを書き換える

まず、管理画面で「テーマ」から「HTMLの編集」を選択してテンプレートファイルを開きます。

次に「<data:commentPostedByMsg/>」で検索して以下の部分を探します。

<data:commentPostedByMsg/>

</dt>

この部分を次のコードをコピペして上書きします。

<data:commentPostedByMsg/>

<b:if cond='data:comment.isDeleted'>

<b:else/>

<p>

<data:comment.body/>

</p>

</b:if>

</dd>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</dt>

次に「<b:includable id='commentDeleteIcon' var='comment'>」を検索して以下の部分を探します。

<b:includable id='commentDeleteIcon' var='comment'>

この部分を次のコードをコピペして上書きします。

<b:includable id='commentDeleteIcon' var='comment'>

<b:if cond='data:showCmtPopup'>

</div>

<b:else/>

</a>

</b:if>

</span>

これでコメント部分のHTML設定は終わりです。

コードの意味合いはふじやん。さんのブログ記事を参照してください。

3．CSSを変更する

「.comment-wrap」で検索して以下の部分を探します。

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

.comment-wrap {

margin-top:20px;

}

/* 長いので途中省略 */

/* レスポンシブ（タブレット小縦） */

@media (max-width: 768px) {

.comment-area {

padding: 10px;

}

.comment-area h4 {

font-size: 13px;

margin-left: 0;

}

この部分はコメント部分を構成するCSSになっており、途中省略していますが変更部分は「コメント」～「@media (max-width: 768px) {…}」までとなっています（分かりにくかったらすいません）。

この該当部分にお使いになっているテンプレートの種類に沿ったCSSコードを上書きします。Hello, world!・Smartともにノーマル版かテーマデザイナー版でコードが違いますのでご注意ください（目次の有無は関係ないです）。

Hello, world! ノーマル版をお使いの方

    /* ----------------------------------------------------------------------------
    コメント
    ---------------------------------------------------------------------------- */

    .comment-wrap {
      margin-top:20px;
    }

    .comment-wrap h3 {
      font-size: 18px;
      letter-spacing: 2px;
      background: #333;
      color: #fff;
      padding: 6px 15px;
      margin: 0;
    }

    .comment-area {
      background: #fff;
      padding:10px 20px;
    }

    .comment-area a {
      font-size: 13px;
      text-decoration: none;
      color: #00f;
      padding: 2px;
    }

    .comment-area a:hover {
      opacity: 0.6;
    }

    .comment-area h4 {
      display: inline;
      font-size: 15px;
      color: #555;
      padding: 2px 0;
      border-bottom: dashed 1px #555;
      margin-left: 8px;
    }

    .comments .comments-content .comment-thread {
      margin: 15px 0 8px;
    }
    
    .comment-area p {
      font-size: 13px;
      line-height: 1.5em;
      letter-spacing: 1px;
    }

    /* 埋め込み時
    ---------------------------------------------------------------------------- */

    /* １コメントあたりの範囲 */

    .comments .comment-block {
      margin-left: 42px;
    }

    /* コメントの投稿者名 */

    .comments .comments-content .user {
      font-size: 14px;
      color: #555;
    }

   .comments .comments-content .user a {
      font-size: 14px;
      color: #0075c2;
    }

    .comments .comments-content .icon.blog-author {
      width: 0;
      margin: 0;
    }

    /* コメントの投稿日時 */
    .datetime a {
      color: #666;
    }

    /* 返信ボタン・削除ボタンの位置 */
    .secondary-text {
      margin-left: 5px;
    }

    /* コメントの内容 */
    .comments .comments-content {
      font-size: 13px;
      color: #333;
      margin-bottom: 5px;
    }

    /* コメント内容 */
    .comments .comments-content .comment-content {
      margin: 0 0 8px 8px;
    }

    /* 返信の背景 */

    .comment-replies {
      background-color: #fafafa;
    }

    .comment-content {
      padding-right:5%;
     }

    /* 返信・削除ボタン */
    a.comment-reply{
      font-size: 12px;
      color: #0075c2;
    }

    span.blog-admin a {
      font-size: 12px;
      color: #0075c2;
    }

    /* ポップアップ時
    ---------------------------------------------------------------------------- */

    /* 投稿ユーザー名 */
    .comment-author {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    }

    /* 投稿ボタン */

    .comment-footer {
      margin: 10px;
    }

    .comment-footer a {
      display: block;
      color: #333;
      background: #eee;
      font-weight: bold;
      text-align: center;
      padding: 10px 0;
    }

    #comments-block.avatar-comment-indent {
      margin-top: 30px;
    }

    /* 匿名ユーザー */
    .avatar-image-container {
      position: relative;
      border-radius: 50%;
      width: 36px;
      height:36px;
      background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIqRyw6hHOOIURPiS77pN905zB_KdlKPV31RrUMe06SsCqHfFFB_0NBwtbHmz6vY0Z3nLGC87CCPKLQ3GAXGAr7GoKPKqZFYbIpS-SpEjZV0b6XnqUY79Kz0yqDZVU6nGB8PXGwnGdegD/s0/ba.png);
      background-repeat:no-repeat;
      background-size: contain;
      border: 1px solid #eee;
      margin-right: 10px;
    }

    /* Bloggerユーザーアイコン */

    .avatar-image-container img {
      position: absolute;
      top: 0;
      left: -0.5px;
      width: 38px;
      height: 38px;
    }

    .avatar-image-container a:hover {
      opacity: 1;
    }

    /* ユーザー名 */
    #comments .avatar-comment-indent .comment-author {
      padding-left: 50px;
    }

    /* コメント */
    .comment-body p {
      padding-left: 4px;
      margin-bottom: -5px;
    }

    /* コメントパーマリンク */
    .comment-timestamp a {
      display: inline-block;
      font-size: 12px;
      font-weight: normal;
      color: #666;
      background: #fff;
      padding: 4px;
    }
    
    .comment-timestamp a:hover {
      opacity: 0.6;
    }

    /* 削除ボタン */
    .comment-delete img {
      width: 0;
      height: 0;
    }
    .comment-delete::after {
      content:"削除";
      margin-left: -2px;
    }

    /* 削除コメント */
    .deleted-comment {
      font-size: 12px;
    }

    /* レスポンシブ（タブレット小縦） */
    @media (max-width: 768px) {
      .comment-area {
        padding: 10px;
      }
      .comment-area h4 {
        font-size: 13px;
        margin-left: 0;
      }
    }

フォームをクリックし、Ctrl+Aキーで全選択し、Ctrl+Cキーでコピーしてください

Hello, world! テーマデザイナー版をお使いの方

    /* ----------------------------------------------------------------------------
    コメント
    ---------------------------------------------------------------------------- */

    .comment-wrap {
      margin-top:20px;
    }

    .comment-wrap h3 {
      font-size: 18px;
      letter-spacing: 2px;
      background: $(comment.title.background.color);
      color: $(comment.title.color);
      padding: 6px 15px;
      margin: 0;
    }

    .comment-area {
      background: $(comment.background.color);
      padding:10px 20px;
    }

    .comment-area a {
      font-size: 13px;
      text-decoration: none;
      color: $(comment.link.color);
      padding: 2px;
    }

    .comment-area a:hover {
      opacity: 0.6;
    }

    .comment-area h4 {
      display: inline;
      font-size: 15px;
      color: $(comment.subtitle.color);
      padding: 2px 0;
      border-bottom: dashed 1px $(comment.subtitle.color);
      margin-left: 8px;
    }

    .comments .comments-content .comment-thread {
      margin: 15px 0 8px;
    }
    
    .comment-area p {
      font-size: 13px;
      line-height: 1.5em;
      letter-spacing: 1px;
    }

    /* 埋め込み時
    ---------------------------------------------------------------------------- */

    /* １コメントあたりの範囲 */

    .comments .comment-block {
      margin-left: 42px;
    }

    /* コメントの投稿者名 */

    .comments .comments-content .user {
      font-size: 14px;
      color: $(comment.user.color);
    }

   .comments .comments-content .user a {
      font-size: 14px;
      color: $(comment.user.color);
    }

    .comments .comments-content .icon.blog-author {
      width: 0;
      margin: 0;
    }

    /* コメントの投稿日時 */
    .datetime a {
      color: $(comment.date.color);
    }

    /* 返信ボタン・削除ボタンの位置 */
    .secondary-text {
      margin-left: 5px;
    }

    /* コメントの内容 */
    .comments .comments-content {
      font-size: 13px;
      color: $(comment.color);
      margin-bottom: 5px;
    }

    /* コメント内容 */
    .comments .comments-content .comment-content {
      margin: 0 0 8px 8px;
    }

    /* 返信の背景 */

    .comment-replies {
      background-color: $(comment.reply.background.color);
    }

    .comment-content {
      padding-right:5%;
     }

    /* 返信・削除ボタン */
    a.comment-reply{
      font-size: 12px;
      color: #0075c2;
    }

    span.blog-admin a {
      font-size: 12px;
      color: #0075c2;
    }

    /* ポップアップ時
    ---------------------------------------------------------------------------- */

    /* 投稿ユーザー名 */
    .comment-author {
    font-size: 13px;
    color: $(comment.number.color);
    font-weight: 600;
    }

    /* 投稿ボタン */

    .comment-footer {
      margin: 10px;
    }

    .comment-footer a {
      display: block;
      color: $(comment.button.font.color);
      background: $(comment.button.background.color);
      font-weight: bold;
      text-align: center;
      padding: 10px 0;
    }

    #comments-block.avatar-comment-indent {
      margin-top: 30px;
    }

    /* 匿名ユーザー */
    .avatar-image-container {
      position: relative;
      border-radius: 50%;
      width: 36px;
      height:36px;
      background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIqRyw6hHOOIURPiS77pN905zB_KdlKPV31RrUMe06SsCqHfFFB_0NBwtbHmz6vY0Z3nLGC87CCPKLQ3GAXGAr7GoKPKqZFYbIpS-SpEjZV0b6XnqUY79Kz0yqDZVU6nGB8PXGwnGdegD/s0/ba.png);
      background-repeat:no-repeat;
      background-size: contain;
      border: 1px solid #eee;
      margin-right: 10px;
    }

    /* Bloggerユーザーアイコン */

    .avatar-image-container img {
      position: absolute;
      top: 0;
      left: -0.5px;
      width: 38px;
      height: 38px;
    }

    .avatar-image-container a:hover {
      opacity: 1;
    }

    /* ユーザー名 */
    #comments .avatar-comment-indent .comment-author {
      padding-left: 50px;
    }

    /* コメント */
    .comment-body p {
      padding-left: 4px;
      margin-bottom: -5px;
    }

    /* コメントパーマリンク */
    .comment-timestamp a {
      display: inline-block;
      font-size: 12px;
      font-weight: normal;
      color: $(comment.date.color);
      background: #fff;
      padding: 4px;
    }
    
    .comment-timestamp a:hover {
      opacity: 0.6;
    }

    /* 削除ボタン */
    .comment-delete img {
      width: 0;
      height: 0;
    }
    .comment-delete::after {
      content:"削除";
      margin-left: -2px;
    }

    /* 削除コメント */
    .deleted-comment {
      font-size: 12px;
    }

    /* レスポンシブ（タブレット小縦） */
    @media (max-width: 768px) {
      .comment-area {
        padding: 10px;
      }
      .comment-area h4 {
        font-size: 13px;
        margin-left: 0;
      }
    }

フォームをクリックし、Ctrl+Aキーで全選択し、Ctrl+Cキーでコピーしてください

Smart ノーマル版をお使いの方

    /* ----------------------------------------------------------------------------
    コメント
    ---------------------------------------------------------------------------- */

    .comment-wrap {
      margin-top:20px;
      border-left: 1px solid #ddd;
      box-shadow: 1px 1px 2px rgba(0,0,0, .4);
    }

    .comment-wrap h3 {
      font-size: 18px;
      letter-spacing: 2px;
      background: #0078ba;
      color: #fff;
      padding: 6px 15px;
      margin: 0;
    }

    .comment-area {
      background: #fff;
      padding:10px 20px;
    }

    .comment-area a {
      font-size: 13px;
      text-decoration: none;
      color: #00f;
      padding: 2px;
    }

    .comment-area a:hover {
      opacity: 0.6;
    }

    .comment-area h4 {
      display: inline;
      font-size: 15px;
      color: #555;
      padding: 2px 0;
      border-bottom: dashed 1px #555;
      margin-left: 8px;
    }

    .comments .comments-content .comment-thread {
      margin: 15px 0 8px;
    }
    .comment-area p {
      font-size: 13px;
      line-height: 1.5em;
      letter-spacing: 1px;
    }

    /* 埋め込み時
    ---------------------------------------------------------------------------- */

    /* １コメントあたりの範囲 */

    .comments .comment-block {
      margin-left: 42px;
    }

    /* コメントの投稿者名 */

    .comments .comments-content .user {
      font-size: 14px;
      color: #555;
    }

   .comments .comments-content .user a {
      font-size: 14px;
      color: #0075c2;
    }

    .comments .comments-content .icon.blog-author {
      width: 0;
      margin: 0;
    }

    /* コメントの投稿日時 */
    .datetime a {
      color: #666;
    }

    /* 返信ボタン・削除ボタンの位置 */
    .secondary-text {
      margin-left: 5px;
    }

    /* コメントの内容 */
    .comments .comments-content {
      font-size: 13px;
      color: #333;
      margin-bottom: 5px;
    }

    /* コメント内容 */
    .comments .comments-content .comment-content {
      margin: 0 0 8px 8px;
    }

    /* 返信の背景 */

    .comment-replies {
      background-color: #fafafa;
    }

    .comment-content {
      padding-right:5%;
     }

    /* 返信・削除ボタン */
    a.comment-reply{
      font-size: 12px;
      color: #0075c2;
    }

    span.blog-admin a {
      font-size: 12px;
      color: #0075c2;
    }

    /* ポップアップ時
    ---------------------------------------------------------------------------- */

    /* 投稿ユーザー名 */
    .comment-author {
      font-size: 13px;
      color: #333;
      font-weight: 600;
    }

    /* 投稿ボタン */

    .comment-footer {
      margin: 10px;
    }

    .comment-footer a {
      display: block;
      color: #333;
      background: #eee;
      font-weight: bold;
      text-align: center;
      padding: 10px 0;
    }

    #comments-block.avatar-comment-indent {
      margin-top: 30px;
    }

    /* 匿名ユーザー */
    .avatar-image-container {
      position: relative;
      border-radius: 50%;
      width: 36px;
      height:36px;
      background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIqRyw6hHOOIURPiS77pN905zB_KdlKPV31RrUMe06SsCqHfFFB_0NBwtbHmz6vY0Z3nLGC87CCPKLQ3GAXGAr7GoKPKqZFYbIpS-SpEjZV0b6XnqUY79Kz0yqDZVU6nGB8PXGwnGdegD/s0/ba.png);
      background-repeat:no-repeat;
      background-size: contain;
      border: 1px solid #eee;
      margin-right: 10px;
    }

    /* Bloggerユーザーアイコン */

    .avatar-image-container img {
      position: absolute;
      top: 0;
      left: -0.5px;
      width: 38px;
      height: 38px;
    }

    .avatar-image-container a:hover {
      opacity: 1;
    }

    /* ユーザー名 */
    #comments .avatar-comment-indent .comment-author {
      padding-left: 50px;
    }

    /* コメント */
    .comment-body p {
      padding-left: 4px;
      margin-bottom: -5px;
    }

    /* コメントパーマリンク */
    .comment-timestamp a {
      display: inline-block;
      font-size: 12px;
      font-weight: normal;
      color: #666;
      background: #fff;
      padding: 4px;
    }
    
    .comment-timestamp a:hover {
      opacity: 0.6;
    }

    /* 削除ボタン */
    .comment-delete img {
      width: 0;
      height: 0;
    }
    .comment-delete::after {
      content:"削除";
      margin-left: -2px;
    }

    /* 削除コメント */
    .deleted-comment {
      font-size: 12px;
    }

    /* レスポンシブ（タブレット小縦） */
    @media (max-width: 768px) {
      .comment-area {
        padding: 10px;
      }
      .comment-area h4 {
        font-size: 13px;
        margin-left: 0;
      }
    }

フォームをクリックし、Ctrl+Aキーで全選択し、Ctrl+Cキーでコピーしてください

Smart テーマデザイナー版をお使いの方

    /* ----------------------------------------------------------------------------
    コメント
    ---------------------------------------------------------------------------- */

    .comment-wrap {
      margin-top:20px;
      border-left: 1px solid #ddd;
      box-shadow: 1px 1px 2px rgba(0,0,0, .4);
    }

    .comment-wrap h3 {
      font-size: 18px;
      letter-spacing: 2px;
      background: $(comment.title.background.color);
      color: $(comment.title.color);
      padding: 6px 15px;
      margin: 0;
    }

    .comment-area {
      background: $(comment.background.color);
      padding:10px 20px;
    }

    .comment-area a {
      font-size: 13px;
      text-decoration: none;
      color: $(comment.link.color);
      padding: 2px;
    }

    .comment-area a:hover {
      opacity: 0.6;
    }

    .comment-area h4 {
      display: inline;
      font-size: 15px;
      color: $(comment.subtitle.color);
      padding: 2px 0;
      margin-left: 8px;
      border-bottom: dashed 1px $(comment.subtitle.color);
    }

    .comments .comments-content .comment-thread {
      margin: 15px 0 8px;
    }
    .comment-area p {
      font-size: 13px;
      line-height: 1.5em;
      letter-spacing: 1px;
    }

    /* 埋め込み時
    ---------------------------------------------------------------------------- */

    /* １コメントあたりの範囲 */

    .comments .comment-block {
      margin-left: 42px;
    }

    /* コメントの投稿者名 */

    .comments .comments-content .user {
      font-size: 14px;
      color: $(comment.user.color);
    }

   .comments .comments-content .user a {
      font-size: 14px;
      color: #0075c2;
    }

    .comments .comments-content .icon.blog-author {
      width: 0;
      margin: 0;
    }

    /* コメントの投稿日時 */
    .datetime a {
      color: $(comment.date.color);
    }

    /* 返信ボタン・削除ボタンの位置 */
    .secondary-text {
      margin-left: 5px;
    }

    /* コメントの内容 */
    .comments .comments-content {
      font-size: 13px;
      color: $(comment.color);
      margin-bottom: 5px;
    }

    /* コメント内容 */
    .comments .comments-content .comment-content {
      margin: 0 0 8px 8px;
    }

    /* 返信の背景 */

    .comment-replies {
      background-color: $(comment.reply.background.color);
    }

    .comment-content {
      padding-right:5%;
     }

    /* 返信・削除ボタン */
    a.comment-reply{
      font-size: 12px;
      color: #0075c2;
    }

    span.blog-admin a {
      font-size: 12px;
      color: #0075c2;
    }

    /* ポップアップ時
    ---------------------------------------------------------------------------- */

    /* 投稿ユーザー名 */
    .comment-author {
      font-size: 13px;
      color: $(comment.number.color);
      font-weight: 600;
    }

    /* 投稿ボタン */

    .comment-footer {
      margin: 10px;
    }

    .comment-footer a {
      display: block;
      color: $(comment.button.font.color);
      background: $(comment.button.background.color);
      font-weight: bold;
      text-align: center;
      padding: 10px 0;
    }

    #comments-block.avatar-comment-indent {
      margin-top: 30px;
    }

    /* 匿名ユーザー */
    .avatar-image-container {
      position: relative;
      border-radius: 50%;
      width: 36px;
      height:36px;
      background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIqRyw6hHOOIURPiS77pN905zB_KdlKPV31RrUMe06SsCqHfFFB_0NBwtbHmz6vY0Z3nLGC87CCPKLQ3GAXGAr7GoKPKqZFYbIpS-SpEjZV0b6XnqUY79Kz0yqDZVU6nGB8PXGwnGdegD/s0/ba.png);
      background-repeat:no-repeat;
      background-size: contain;
      border: 1px solid #eee;
      margin-right: 10px;
    }

    /* Bloggerユーザーアイコン */

    .avatar-image-container img {
      position: absolute;
      top: 0;
      left: -0.5px;
      width: 38px;
      height: 38px;
    }

    .avatar-image-container a:hover {
      opacity: 1;
    }

    /* ユーザー名 */
    #comments .avatar-comment-indent .comment-author {
      padding-left: 50px;
    }

    /* コメント */
    .comment-body p {
      padding-left: 4px;
      margin-bottom: -5px;
    }

    /* コメントパーマリンク */
    .comment-timestamp a {
      display: inline-block;
      font-size: 12px;
      font-weight: normal;
      color: $(comment.date.color);
      background: #fff;
      padding: 4px;
    }
    
    .comment-timestamp a:hover {
      opacity: 0.6;
    }

    /* 削除ボタン */
    .comment-delete img {
      width: 0;
      height: 0;
    }
    .comment-delete::after {
      content:"削除";
      margin-left: -2px;
    }

    /* 削除コメント */
    .deleted-comment {
      font-size: 12px;
    }

    /* レスポンシブ（タブレット小縦） */
    @media (max-width: 768px) {
      .comment-area {
        padding: 10px;
      }
      .comment-area h4 {
        font-size: 13px;
        margin-left: 0;
      }
    }

フォームをクリックし、Ctrl+Aキーで全選択し、Ctrl+Cキーでコピーしてください

オリジナルのBloggerテンプレート配布中！

Smart（スマート）

カード型の記事リストが並ぶ、スマートなデザインのテンプレートです。

スッキリした形にまとめたいブログにおすすめのテンプレートとなっています。

Hello, world!（ハローワールド）

画像を目立たせた記事リストが並ぶ、シンプルなデザインのテンプレートです。

画像を強調したいブログにおすすめのテンプレートとなっています。

3 件のコメント :

ふじやんさんのコメント...: こんばんは。拙ブログ記事がお役に立てたようでなによりです。

ところで、Twitterのフォロワーさんの指摘で判明したのですが、ユーザーアイコンが Firefox だとズレて表示されてしまうようです。
検証してみたところ、CSSを以下のようにすればズレなくなるようですので、宜しければ参考にしてみてください。

/* Bloggerユーザーアイコン */
.avatar-hovercard img {
width: 38px;
height: 38px;
position: absolute;
top: 0;
left: 0;
}; 2020年9月23日 2:18
ふじやんさんのコメント...: 連投失礼します。
一応念の為に補足ですが、ずれる要因は margin-top:-20px; ですので、これは削除してください。; 2020年9月23日 2:32
ふでたまごさんのコメント...: >ふじやん。さんへ

報告ありがとうございます。
早速、不具合修正しました！ついでにhover時の透過も修正しました。
また、何か不具合がありましたら気軽にお知らせください^^; 2020年9月23日 3:56

コメントを投稿