がオススメ！Newspeedでカスタマイズしたこと一覧
こんばんは！
表示速度も早くてデザイン（デモページ）も大好きなテーマNewspeedなんですが、なぜだか関連記事の表示をさせることができません😭💦
「BloggerをPrimeZELOにしました。」でBloggerのテーマを変えたと書きました。
ただ、表示スピードがあまり速くないので、Newspeedという少し前に購入して使っていなかったテーマで再挑戦することにしました。
日本語のテーマだとカスタマイズの方法を探すと、そのまま使えたりするのですが、海外のテーマだと使っているコードがちょっと違ったり...😩
忘備録として残しておきます。
Bloggerに関連記事を表示させる
>> 参考元: 【改良版】Blogger用の関連記事表示
去年このテーマを使っていたときは、そのせいで使うのを諦めてしまいました。
でもでも！このテーマでもしっかり使える関連記事のカスタマイズを見つけたのでNewspeedにもう1度挑戦することにしました。
記事下にある、前後記事にリンクするもなんですが、Newspeedのぺージャーはシンプルで見にくい！
のところをコメントアウト（
まずHTML編集で
</article>の上に参考元のコードをまるっと貼り付けるだけで出来ちゃいます。関連記事の表示する場所を微調整したいので、パソコンが使える時に移動させたいです。
次／前の記事へのリンクをサムネイルと記事名で表示（ぺージャー）
<div class='post-nav'>
<b:include name='previousPageLink'/>
<b:include name='nextPageLink'/>
</div>
のところをコメントアウト（
<!--と-->でコードの始まりと終わりを囲む）して、参考元のコードをその上に貼り付けるだけで出来ました。ページネーション
トップページの記事一覧で、表示されているより前の記事を見たいときはLoad More
というボタンで少しずつ表示していくのがNewspeed。
これかな？あれかな？と記事を読み漁っていると、なかなか先に見た記事へ戻りづらいのが難点。
こちらを使うと、コピペだけで記事が何ページ分あるのか分かりやすくなります。戻りやすいですしね😍🌸
<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>の前に貼り付けました。シェアボタン
<b:includable id='postShareButtons' var='post'>から</b:includable>の間のコードを参考元のコードと置き換えました。Newspeedの場合、このままだとシェアボタンの形がいびつになってしまいます。
.sns-share-buttons li a の height の値を 33px に変えてみてください。
参考記事に載っているように、33pxに変更したらちゃんと丸い形になりました！
コードを貼る位置の注意点
ちなみに、私は記事上のシェアボタンは必要ないかな？と思ったので
<b:include cond='data:allBylineItems.share' data='post' name='postEntryShare'/>の部分をコメントアウトして、非表示にしています。時間ができたらやりたいこと
ブログの色味をきちんと統一させる
スマホからブログのカスタマイズをしているので、色など細かいものを変えるのには時間がかかります。
そして、そういうの苦手人間〜😵💦
パソコンが使える時に全体的に見ながら変えたいです！！
Font awesomeのアイコンをSVGへ置き換える
PageSpeed Insightsを使って、カスタマイズ後に表示速度を確認したら、始めてオレンジ圏内に入れました！
FontAwesomeや不必要なコードを消しながら、もう少し表示速度が上がればいいな〜と思っています。
パソコンと向き合って好きなだけブログのデザインをいじったり、記事を書いたりしたいです〜！
コピペだけで簡単にスマホからカスタマイズできるものがあれば、随時更新していきますね。
あい
日本の片田舎でコソコソと英検1級の勉強をしているアラフォーママ。学習記録と育児記録を残してます。外国語が大好きで今は英語と韓国語をメインに勉強中。洋書も勉強を兼ねて読んでます💕
」の音声データを聞いて勉強ををしています。
がオススメ！
