カスタマイズ Twitter・Instagram の埋め込みが重いのは万能な遅延読み込みで解決 2022/06/09 Twitter や Instagram の投稿をフツーに記事に埋め込むと、ページの表示速度が遅くなります。 PageSpeed Insights のスコアも一気に悪化してしまいます。 原因は埋め込みコード内にある JavaScript。 なので、スクリプトを 遅延読み込み...
カスタマイズ 【JetTheme】注目の投稿の遅延読み込みを解除する方法 2022/05/27 JetTheme では、「注目の投稿」ガジェットの画像は遅延読み込みされます。 ただ、注目の投稿がファーストビューに入る場合は遅延読み込みされないほうが良いですよね。 PageSpeed Insights でも指摘が出ると思います。 私はページスピードやスコアの問題...
カスタマイズ 入力フォームのフォントサイズは 16px 以上が良い(スマホ対応) 2022/05/10 検索ボックスやお問い合わせフォームの入力欄など、ブログに設置している入力フォームのフォントサイズは 16px 以上 にしておくと良いと思います。 理由は、スマートフォン(iOS)で入力フォームに入力しようとタップしたとき、16px 未満のフォントサイズだと画面が自動拡大さ...
カスタマイズ Bootstrap5 / table がレスポンシブにならない場合の対処法 2022/03/02 先日、Bootstrap 5 で table(表)がレスポンシブにならない という状況が起きました。 このブログのテンプレートは Bootstrap 5 で構成されているのですが、記事内で table-responsive を使っても効かない状況でした。 試行錯誤した結果...
カスタマイズ Bootstrap5 よく使うクラス一覧(早見表) 2022/02/01 Bootstrap 5 に標準で用意されているクラスのうち、よく使うものを一覧にしてみました。 カスタマイズの参考用です。 この一覧のクラスを html に指定することで、Bootstrap 5 標準の CSS が反映されます。 例えば次のようにクラスを指定すると、 ...
カスタマイズ Margin を上に取るか下に取るか問題について考える 2021/11/28 JetTheme に変えて、1つ気づいたことがある。 要素の余白が基本的に margin-bottom で設計されている!! ブログ全体の骨組みに関してはすでに完成されてるし、余白を調整したい部分は margin-bottom の値をちょろっと変えれば良いだけなので問題な...
カスタマイズ 【Blogger】JetTheme のトップページをリスト形式にするカスタマイズ 2021/11/11 JetTheme では、トップページの記事一覧は2列のカード形式になっています。スマホの場合は1列のカード形式。 これを、次の画像のようなリスト形式にカスタマイズする方法をご紹介します。画像はざっくり修正したサンプルですが、細かなデザイン修正ももちろん可能です。 ...
カスタマイズ 【Blogger】サイドバーの検索ボックスをカスタマイズ 2021/11/09 Blogger で 検索ボックス をサイドバーに設置するときのデザインカスタマイズをご紹介します。 検索ボックスは Blogger 標準のウィジェットが用意されていますが、テンプレートによってはデザインが用意されていません。JetTheme も、もともとヘッダーに検索が用...
カスタマイズ 【Blogger】JetTheme カスタマイズ方法一覧 2021/11/08 JetTheme を導入するにあたって、いくつかカスタマイズを行いました。 カスタマイズの参考サイトがまだあまりないので、当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。 随時、追記していく予定です。 本記事の作成時点では JetTheme ...
カスタマイズ Blogger 目次を自動生成するスクリプト 2021/10/15 Blogger には、デフォルトで目次を表示する機能がありません。 そこで自分好みの目次を目指し、アイデアやスクリプトをいろいろ探しつつ試行錯誤しながら 目次の自動生成スクリプト を作成しました。 目次を表示したい箇所に特定のコードを設置すると、そこに目次が自動で生成され...