カスタマイズに関するご質問と回答

これまでにお問い合わせいただいたカスタマイズに関するご質問と、その回答を掲載しています。

※現在、カスタマイズに関するご質問はお受けしておりません。

★ JetTheme に関するお問い合わせ

スマホ表示の際にブログトップの FEATURED POST のサムネイル画像とタイトルが重なっています。重ならないようにする方法はありますか?

画像の位置はそのままでテキストボックスを下げる場合は、以下の CSS の -150px を 0px にしてください。

@media (max-width: 575.98px) {
.feature-posts .item-thumbnail {
margin-bottom: -150px;
}

-150px の数値を変えることで、テキストボックスの位置を微調整することもできます。

ページネーションを表示する方法を教えてください。記事が7つありますが、ページネーションが表示されません。

JetTheme では、ページネーションは通常何もしなくても表示されます。

Blogger 管理画面の「設定」で、「メインページに掲載する投稿数の上限」をご確認ください。

投稿数の上限よりも記事数が少ない場合、ページネーションが表示されない可能性があります。上限数よりも記事を増やして、表示を確認してみてください。

JetTheme のテンプレートには通常版と min 版があるようです。違いはありますか? どちらがおすすめですか?

通常版は、テンプレートに改行やコメントが入っていて、読みやすく理解しやすい状態になっています。

min は圧縮版で、コードの改行やコメントが最大限取り除かれたものになっています。

違いは、テンプレート内部のコードが圧縮されているかどうかという点だけなので、どちらでも HTML の編集やカスタマイズは可能です。テンプレートの可読性を重視したい場合は通常版を、圧縮されたものを使いたい場合は min 版を利用すれば良いと思います。

リモスキブログのトップページの記事一覧のように、画像を枠の上下一杯に表示するにはどうすれば良いですか? 画像の左右が見切れてしまいます。

以下の対応で実現できると思います。(個別のカスタマイズ状況により実現できない場合はご連絡ください)

1. 以下の CSS を追記

.list-item-thumbnail {
height: 100%;
}

2. 以下の HTML を書き換え

<a class='jt-bg-light d-block ratio ratio-1x1'
expr:href='data:post.url.canonical' rel='bookmark'>
....
</a>
↓↓↓
<div class='jt-bg-light d-block ratio ratio-1x1 h-100'
expr:href='data:post.url.canonical' rel='bookmark'>
....
</div>

※ a タグを div タグに変更し、クラス名として h-100 を追加
※ 閉じるタグも a から div に忘れずに変更

★ その他のお問い合わせ

リモスキブログのように、トップページのトップに最新記事を載せたいです。どのように設定していますか?

当ブログトップの最新記事の表示は、Blogger の管理画面 → 「レイアウト」画面にて「注目の投稿」ガジェットを使っています。

注目の投稿ガジェットに「最新の投稿を表示する」という設定ボタンがあるので、それを選んでおくと自動的に最新の投稿が反映されます。

Blogger のトップページをカスタマイズしたいのですが、どのようにコードを編集すれば良いですか?

カスタマイズしたい内容によりますが、以下2パターンの方法については次の記事で紹介しています。

  • トップページにのみ特定のコンテンツを表示する方法
  • 新着記事一覧を非表示にする方法

Bloggerのトップページをカスタマイズする方法

Twitter の埋め込みの重さを改善する defer.js は、Cocoon でも使えますか? どのように設定すれば良いですか?

私自身は Cocoon を使用していないのでこちらでは確認できないのですが、正しくタグを設置すれば defer.js を使用できると思います。

Cocoon の場合、管理画面から head タグ内、body タグ直前にコードを設置できるようです。以下を参考に、それぞれ必要なコードを設置してみてください。

head タグ内にコードを設置する方法
参考:https://to-min.net/cocoon-head-tag/

body タグ直前にコードを設置する方法
参考:https://seaside-crow.com/crow-1068/

※ この後、defer.js を利用して Twitter の埋め込みの重さを改善できたというご連絡をいただきました。

Google フォームのカスタマイズで、form action の文字が出てこなくて困っています。

おそらくですが、form action を探すページが異なっていると思います。

form action の値を探すのは、フォームの作成ページのソースではなく、完成したフォームのソースになります。(作成ページのソースには、form action は出てこないようです)

フォーム作成ページの右上の目のアイコンを押すと、完成したフォームが表示されます。そのフォームのソースから form action を探してみてください。