Newspeedでカスタマイズしたこと一覧

Bloggerのおすすめテーマ "WindSpot" このブログで使っているテーマ。表示速度◎ Bloggerのテーマで迷っている方にオススメです♪

こんばんは！

「BloggerをPrimeZELOにしました。」でBloggerのテーマを変えたと書きました。

ただ、表示スピードがあまり速くないので、Newspeedという少し前に購入して使っていなかったテーマで再挑戦することにしました。

日本語のテーマだとカスタマイズの方法を探すと、そのまま使えたりするのですが、海外のテーマだと使っているコードがちょっと違ったり...😩

忘備録として残しておきます。

Bloggerに関連記事を表示させる

>> 参考元: 【改良版】Blogger用の関連記事表示

表示速度も早くてデザイン（デモページ）も大好きなテーマNewspeedなんですが、なぜだか関連記事の表示をさせることができません😭💦

去年このテーマを使っていたときは、そのせいで使うのを諦めてしまいました。

でもでも！このテーマでもしっかり使える関連記事のカスタマイズを見つけたのでNewspeedにもう1度挑戦することにしました。

</article>の上に参考元のコードをまるっと貼り付けるだけで出来ちゃいます。

関連記事の表示する場所を微調整したいので、パソコンが使える時に移動させたいです。

次／前の記事へのリンクをサムネイルと記事名で表示（ぺージャー）

記事下にある、前後記事にリンクするもなんですが、Newspeedのぺージャーはシンプルで見にくい！

とっても簡単に見やすくする方法を見つけました🖤

>>参考元: Bloggerにサムネ画像付きページャーを導入する

<div class='post-nav'>
 <b:include name='previousPageLink'/>
 <b:include name='nextPageLink'/>
  </div>

のところをコメントアウト（<!--と-->でコードの始まりと終わりを囲む）して、参考元のコードをその上に貼り付けるだけで出来ました。

ページネーション

トップページの記事一覧で、表示されているより前の記事を見たいときはLoad More

というボタンで少しずつ表示していくのがNewspeed。

これかな？あれかな？と記事を読み漁っていると、なかなか先に見た記事へ戻りづらいのが難点。

>> 参考元：【軽量＆高速】Blogger用ページネーションを作成しました

こちらを使うと、コピペだけで記事が何ページ分あるのか分かりやすくなります。戻りやすいですしね😍🌸

まずHTML編集で<b:includable id='ajaxPagination'>を探します。

 <b:class cond='data:posts.empty' name='no-blog-posts'/>

から

</b:if>

までをコメントアウトする。

ひこ

コメントアウトの方法は、適用したくない部分の始まりに<!-- 終わりに-->で囲むと、コードが赤くなって、ブログ上で表示されなくなります。

<b:includable id='ajaxPagination'>
<!-- Ajax Pagination on Index -->
<div class='blog-pager container' id='blog-pager'>   

の下に参考元のコードをまるっと貼り付けました。

目次がない

>>参考元: 自動目次とスムーススクロール

参考元のコードは[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）という記事をふじやんさんがカスタマイズして載せてくださっているものになります。

目次機能がほしいけど、自分なりにカスタマイズしたいという方は[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）もオススメです。

私はどうしても上手にカスタマイズできないので、ふじやんさんの自動目次とスムーススクロールに載っているコードを</head>の前に貼り付けました。

シェアボタン

>>参考元: オリジナル SNS シェアボタン 【JavaScript 版】(2021/05/14: コードをアップデートしました)

<b:includable id='postShareButtons' var='post'>から</b:includable>の間のコードを参考元のコードと置き換えました。

Newspeedの場合、このままだとシェアボタンの形がいびつになってしまいます。

.sns-share-buttons li a の height の値を 33px に変えてみてください。

参考記事に載っているように、33pxに変更したらちゃんと丸い形になりました！

コードを貼る位置の注意点

Newspeedには記事上と記事下2つに違うシェアボタンがあるので、postEntryShareの部分ではなくpostShareButtonsの部分を変更します。

ちなみに、私は記事上のシェアボタンは必要ないかな？と思ったので<b:include cond='data:allBylineItems.share' data='post' name='postEntryShare'/>の部分をコメントアウトして、非表示にしています。

時間ができたらやりたいこと

ブログの色味をきちんと統一させる

スマホからブログのカスタマイズをしているので、色など細かいものを変えるのには時間がかかります。

そして、そういうの苦手人間〜😵💦

パソコンが使える時に全体的に見ながら変えたいです！！

Font awesomeのアイコンをSVGへ置き換える

PageSpeed Insightsを使って、カスタマイズ後に表示速度を確認したら、始めてオレンジ圏内に入れました！

FontAwesomeや不必要なコードを消しながら、もう少し表示速度が上がればいいな〜と思っています。

パソコンと向き合って好きなだけブログのデザインをいじったり、記事を書いたりしたいです〜！

コピペだけで簡単にスマホからカスタマイズできるものがあれば、随時更新していきますね。