昨日見つけたBloggerの無料テーマ「Smart」。

私の好きが詰め込まれているSmart」のテーマ。息子が寝てから早速使ってみることにしました😊💕




\ こちらもどうぞ /




まさかの2時間もかからず、自分のやりたいカスタマイズが終わってびっくり🥰💕



というか、今まで時間をかけてカスタマイズの方法を探していたのが馬鹿らしくなるくらい、このテーマには始めからたくさんの機能が備わっています


お気に入りな点

  • 動きが早い
  • カスタマイズがしやすい
  • グローバルメニューが≡をクリックすると開く
  • 上に戻るボタンが始めからついている
  • カテゴリーをリスト表示出来る
  • アーカイブが階層式で表示出来る!(開閉式で場所を取らない)
  • 更新日が自動で表示される
  • 目次もついてる
  • 記事リストの下部には番号付きページナビまでついてる
  • SNSのシェアボタン有り(今まで海外のテーマを使っていたのでLINEとかなかった)
  • パンくずリストまであるよ



問題点・手間取った点:目次の位置


目次が記事の1番下に来る


  • <!--more-->
  • <h2></h2>
の2つが記事内にあれば目次は自動的に<!--more-->たぐの上に表示されるはず。



なんだけど、
 


やっぱり記事の下に表示されてる😢💨


目次•アドセンスを設定する方法について」で書いてある、記事の下に表示される場合を読んでみても、私の記事中<!--more-->は<span></span>で囲まれてないんだよ〜😭💦


<!--more-->と入力し直しても、目次は記事下に表示されたまま。


作成ビューで、既にある<!--more-->を消してから、もう一度<!--more-->を挿入。


それだとHTMLビューに<span></span>で囲まれた<!--more-->タグが出現。<span></span>をいちいち消しにいくことにしました。


あら不思議。目次が欲しいところに現れた!


結局、全部の記事で同じことをする羽目に。このBlogの記事数が少なくてよかった😂




どうしよう、Bloggerでコードとかソースの記述方法がわからない😭


【忘備録】

貼り付けたいコードを上記のサイトで変換し、HTMLビューでコードを貼り付ける。


たいそうな表示(設定してあれば)になるので上下の

<pre class="brush:text" title="">

</pre>

は消してしまう。




カスタマイズしたこと


カテゴリーの階層化



【Blogger】ラベルを階層化する方法」を使ってカテゴリーの階層化をしました。

こちらで紹介されているコード、前に使っていたテーマと相性が悪くて使えなかったんです。

Smart」とは相性が良いようで、すぐできました。

こんな感じで、メインカテゴリーとサブカテゴリーを並べて分かりやすくカテゴリー表示が出来ます!


<script type="text/javascript">

function sub_cat(str){

 (function($) {

   $(function() {

     $(str).each(function(){

        var txt = $(this).text();

         $(this).html(

             txt.replace(/.*-(.*)/g,'$1')

         );

      });

	});

 })(jQuery);

}

 (function($) {

    $(function() {

      $(".list-label-widget-content li:contains('-')").css( "margin-left", "20px" );

      sub_cat(".list-label-widget-content a:contains('-')");

	  sub_cat(".post-labels a[rel='tag']:contains('-')");

	});

 })(jQuery);

</script>


フッター部分に「HTML/JavaScript」を追加して、上記コードを貼り付けただけです!

Smart」にはもともとjQueryが組み込まれているので、特になにもしなくて大丈夫です。





記事下にリアクションボタンの設置


Bloggerの残念なところは、「はてなブログ」、「アメブロ」、「FC2ブログ」のような、読者の方がブログ読んだときに気軽にアクションを残せるもんが何もないところ。


いちいちコメントを残すのも面倒ですよね?


そんなときにBloggerでもできる、リアクションボタン見つけました!


顔文字を押してもらうだけ😊


Disqusを使ってみたのですが、このブログで使っているテーマ「Smart」のコメント欄と相性が悪いよう...


なので、たまたま見つけた記事を参考にリアクションボタンを設置。





ShareThis」というサイトに登録&コードを取得して貼るだけでできましたよ!



記事にちょっとした彩り

  • 色の変更
  • 文字の強調
  • 下線
  • ボックス
など、以前から使っていたものをそのままコピペ



フォントの変更


    body { 
      font-family:'M PLUS Rounded 1c', "Helvetica Neue", Arial,"Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
      background: #4496d3; /* フッターの背景色 */
      margin: 0;
      padding: 0;
    }

「HTML編集」のCtrl+Fで「body」を探し、上記のように「'M PLUS Rounded 1c', 」を追記しました。



記事中の文字サイズの変更


Ctrl+Fで「post-content」を検索、「font-size: 14px;」になっているところを好きなサイズに変更。私は16pxにしました。


ただ、このコードがうまく適用されていないようなので「;」の手前に「!important」も追加

    /* コンテンツ(本文の内容) */
    .post-content {
      font-size: 16px !important;
      font-weight: 500;
      color: $(post.body.font.color);
      letter-spacing: 2px;
      line-height: 1.8em;
      padding: 10px 20px 0;
      overflow: hidden;
    }



プロフィールの設置


【初心者向け】BloggerのHTML/JavaScriptガジェットの解説と活用方法」を参照してプロフィールを作成しました。

試行錯誤して、SNSのボタンも表示させました。



サムネイルの端っこをふんわり丸く


パソコンが使える体調のときに、Google chromeの検証機能(だったっけ?)を使って画像のクラスコードを探しました。

HTML編集から、画像のコード(4箇所ありました)に「border-radius: 10px;」を追加しました。



こんな感じで、写真の角が取れて少しだけ丸くなりました。


詳細は体調のいい時に、改めて書き直しますね😅ごめんなさい💦





サムネイルなしの記事用の画像を変更


pixabay」から自分好みの画像を探してきて、「Canva」でこのブログのバナーをつくりました。



「新規記事」でこのバナーをアップロードし、HTMLで画像のアドレスを確認。


当サイトのテンプレート導入後にやってほしいこと」に、4箇所(正しくは5箇所)変更部分があるとのことなので、探し出してアドレスを置き換えました。


Twitterで画像がないブログ記事をシェアすると、見事に先ほど作成したバナーが表示されました!


したいこと


はてなブログから記事の移動←これ1番時間かかる


昨日の夜と今日の午前中に、やりたいことが全部終わってしまった。


なので後は、はてなブログからちまちま記事を移行していくだけです。


つわりでパソコン触れる状態じゃないので、スマホからぼちぼちやっていきます。



Bloggerもスマホ対応になったんだけど、どうも反応が良くなくて時間かかるんだよな〜🤔💦



新しい記事を書くことを優先しつつ、ちまちま移行します。ちまちまね。