【初期設定編】JetThemeでスマホでも見やすいブログを作ろう！初心者向け完全ガイド

4 10月, 2024

 「bloggerでブログを始めてみけど、デフォルトのデザインがスマホで見にくい…」って思いませんか？Webデザインをしたことのない初心者の私ですが、中級者向けと言われる「JetTheme」に挑戦してみました。スマホでも見やすいブログにできたので、解説していきます。

1. JetThemeってなに？

Googleの無料ブログであるBloggerで利用できる外部テンプレートファイルです。

Googleから提供されているテンプレートもあるのですが、スマホでブログを見るのに向いていないと感じています。例えば、Googleの標準テンプレートを使うと、スマホで記事を読むとき、画像が大きすぎてブログ一覧を見るときに縦スクロールが必要で読みづらかったりすることがあります。

JetThemeは、Bootstrapという人気のフレームワークを使って作られています。画面の大きさによってデザインが変わるレスポンシブデザインに対応していて、スマホでもパソコンでも見やすいブログを作ることができます。

JetThemeは、ほかのブロガーさんもカスタマイズ記事を作成しており、カスタマイズも頑張れるかと思いました。もちろん、読込み速度が速いことやダークモードがあるなど初期設定でも素晴らしいです。

2. 目指す構成

  • Blogger「Emporio」：スマホでは1つの記事が大きすぎる 
  • JetTheme修正後：スマホでも2列表示に見やすい 

    BlogTop

3. JetThemeをダウンロードしよう

JetThemeはNewspaperという有料版もありますが、カスタマイズ前提ということもありBlogの無料版(v2.9)を使いました。

  1. 下記リンクのDownloadから「Privacy Policy」のページに行ってDownloadボタンが再度あるのでクリック https://www.jettheme.com/


  2. Githubというサイトに飛ぶので、Download filesをクリック →core-main.zipがダウンロードされます。


  3. Core-main.zipを展開すると以下のようなファイルがあります。 今回は、シンプルで使いやすい「jettheme-v2.min.xml」を使用します。
    • blank.xml　テンプレート初期化ファイル 
    • jettheme-v2.min.xml　今回使うテンプレート（簡易版）
    • jettheme-v2.xml　　　JetThemeのテンプレート
    • README.md　説明書。インストール方法などのリンクがある

4. BloggerにJetThemeをアップロードしよう

ダウンロードしたJetThemeのファイルをブログに反映させます。

  • テーマのバックアップ: まずは、念のため、今使っているテーマのバックアップを取っておきましょう。
  • テーマの初期化: blank.xmlをアップロードして、テンプレートを初期化します。
  • JetThemeのアップロード: jettheme-v2.min.xmlかjettheme-v2.xmlをアップロードします。
詳細はこちらのブログがわかりやすいです。 

5. 初期設定：広告を消してすっきりさせよう！

JetThemeでは、初期設定で「Advertisement here」という広告枠が表示されるようになっています。まだ広告を貼っていない場合は、この枠が気になる方もいるでしょう。そこで、この広告枠を削除する方法を解説します。

広告枠を削除する方法

  1. 広告ウィジェットを探す: Bloggerの編集画面で、「レイアウト」を開き、「
    Advertisment」というウィジェットを探します。
    Advertisment
  2. ウィジェットを編集: 見つけた「Advertisment」ウィジェットをクリックして、編集画面を開きます。
  3. 表示設定を変更: 編集画面で、「このウィジェットを表示する」というチェックボックスのチェックを外します。
  4. 保存: 設定内容を保存します。

それでも広告が残ってしまう場合

上記の操作を行っても、広告が残ってしまうことがあります。その場合は、以下の手順で直接HTMLコードを修正します。

  1. HTMLコードの編集: 「Advertisment」ウィジェットのHTMLコードを探します。
  2. visible属性を変更: HTMLコードの中で、visible='true'となっている部分をvisible='false'に変更します。
    HTML
    <b:widget id='HTML11' locked='false' title='#Advertisement' type='HTML' visible='true'>
<b:widget id='HTML11' locked='false' title='#Advertisement' type='HTML' visible='false'>
  3. 保存: 変更内容を保存します。

補足

  • HTMLコードを直接編集する際は、誤って他の設定を変更しないようバックアップをとっておきましょう。

6. 初期設定：レイアウトをカスタマイズして自分用のサイトにしよう！

デフォルトでは不要な項目が多数あるため、カスタマイズしてオリジナルなブログにしていきましょう。すべてBloggerの編集画面で、「レイアウト」を開いて修正します。

ページ上部（Header）の修正

ブログタイトルのカスタマイズ

ロゴを追加することができるのですが、まだ画像の準備ができない人もいると思います。直接文字列を入れればタイトルとして表示できます。

Icons,Dark, Search(アイコン、ダークモード、検索)のカスタマイズ

Instagramなどのアイコンが表示されており、持っている人は編集画面でリンク先に設定します。私はリンク不要だったため、Iconのリストは削除しました。すべて削除するとダークモードも検索窓も消えてしまうので、1つは適当なタイトルで残しました。タイトルを変えればアイコンがでなくなり、リンク先のURLも#だけ設定すればホームに戻るため、ロゴと同じ挙動になります。

メニューのカスタマイズ

デフォルトのリンクがありますが、不要なので削除しました。プライバシーポリシーや連絡先などを設定しました。

投稿記事一覧の横 (Sidebar) のカスタマイズ

サイドバーは、ブログ記事の一覧の横に表示される部分です。スマホでは下に表示されます。サイドバーに表示されている「Popular Posts」や「Recent Posts」などのウィジェットを削除します。Bloggerの管理画面から、ウィジェットを非表示にできます。記事が増えたらPopularPostsは復活させるかもしれませんが、別途Pickupなど見せたい記事は別途リンクを作るつもりです。

ページ下部(footer) のカスタマイズ

フッターは、ブログの一番下に表示される部分です。

  1. 「About Us」の編集: 「About Us」の部分に、あなたの自己紹介やブログについて説明する文章を追加します。
  2. 「Follow Us」の編集: SNSのアイコンやリンクを追加して、読者にあなたのSNSアカウントをフォローしてもらうように促します。不要なら非表示にします。
  3. Copyrightの編集: Copyrightの部分に、あなたのブログの名前と作成年を追記します。
    「Copyright &copy; 2022 BlogName. Design by <a href="https://www.jettheme.com">JetTheme.com</a>」

まとめ

ここまでできたことで自分のオリジナルのブログの見た目になりました。次回は本格的にスマホで見やすい見た目にカスタマイズする方法を説明します。
【記事の2列表示編】JetThemeでスマホでも見やすいブログを作ろう！初心者向け完全ガイド
Koko

Koko

2人の子どもを持つ主婦です。子どもが絵本をとても好きなので、たくさん絵本を購入するようになりました。子どもと一緒に読んだ絵本や、子育て中の日常で感じたことなどを記録しています。

Next Post
No Comment
Add Comment
comment url