*広告・PR・アフィリエイトを含みます

ブログをカスタマイズしてみた~Blogger JetTheme 導入とカスタマイズの記録~

ブログをカスタマイズしてみた~Blogger JetTheme導入とカスタマイズの記録~

Blogger でブログを再開したタイミングで、海外テーマ「JetTheme」を導入しました。
このページでは JetTheme(ジェットテーマ)の導入からカスタマイズまでの記録をまとめています。
今後もカスタマイズを追加したら、ここに追記していく予定です。

JetTheme を選んだ理由

久しぶりのブログ再開だったので、、最初はデフォルトテーマでもいいかなと思っていました。
でも、後から色々手を入れたくなることを考えて、テーマを探すことにしました。

日本語テーマは扱いやすいのですが、別のサイトで海外テーマを使っていた経験もあり、 Blogger ユーザーさんの記事でよく名前が挙がる「JetTheme」を試してみることにしました。

デモとダウンロードはこちらです。

JetTheme - Best Ultimate Blogger Template in 2024

JetTheme - Best Ultimate Blogger Template in 2024

Penyedia Layanan Tema Blogger, Moderen Untuk Web Lebih Profesional.

無料版でも制限が少なく、暗号化されたコードなどもなく、クリーンで扱いやすい印象でした。
導入されている方の記事も参考になり、安心して使い始めることができました。

テーマ(テンプレート)のインストール

JetTheme の公式サイトにインストール手順が掲載されていたので、まずはその手順に沿って導入しました。
サイトの言語はインドネシア語のようですが、翻訳機能を使う場合は「抽出された言語 → 日本語」に設定すると問題なく読めます。

テーマを変更する際は、必ずバックアップを取ってから、自己責任で行ってくださいね。

Cara Install Template JetTheme di Blogger - JetTheme

Cara Install Template JetTheme di Blogger - JetTheme

Cara memasang atau install template Jettheme di blogger anda dengan baik.

なお、テーマ初期化用のコードを貼り付けてもエラーになる場合は、いったん Blogger のデフォルトテーマ「Simple」に変更してから再度貼り付けると成功することがあります。

初期設定(導入直後にやったこと)

HTML 設定の確認

Jettheme の HTML 内には、SEO や表示に関わる設定がいくつかあります。
こちらの記事を参考にしながら、必要な部分を調整しました。

Blogger無料テンプレート「JetTheme」のHTML設定について - after work lab

Blogger無料テンプレート「JetTheme」のHTML設定について - after work lab

はじめに 前回の記事では「JetTheme」の管理画面の設定について説明しましたが、今回はHTMLの設定について解説したいと思います。 この部分を設定しておかないと、SEOで損する恐れが出るので、一度ご覧になると良いかと思います。 --> JetThemeの...

日付の表示形式と更新日の追加

導入時点で日本語の日付表示はレイアウトから設定できました。
更新日付は別の記事を参考に追加しています。

「JetTheme」の日付の書式変更と更新日の追加方法 - after work lab

「JetTheme」の日付の書式変更と更新日の追加方法 - after work lab

はじめに この記事は「JetTheme」の日付の書式と更新日を追加するカスタマイズ方法の説明です。 デフォルトの表示に不満を持っている方は参考にご覧ください。 なお、上手く行かなかったとき元に戻す為に、変更前に必ずxmlファイルのバックアップを取り保存しておい...

追記
このブログは読み物が多いので、一覧で表示されるものには投稿日と更新日を表示し、投稿ページには更新日だけを表示することにしました。
アイコンはテーマに元々インストールされていたものを使用してます。

デザイン調整(日本語ブログ向けに整える)

フォントの調整

海外テーマは英語向けのフォントが設定されているため、日本語では少し違和感がでることがあります。
フォントファミリーや文字間・行間を HTML 側で調整して、日本語でも読みやすいように整えました。

カラーの変更

ブログの雰囲気に合わせて、フッターやソケットのカラーを変更しました。
アイキャッチ画像もこのカラーに合わせて作成しています。
HTML を使わずテーマデザイナーで変更できます。

不要エリアを非表示

フッターは上下2つのエリアがありますが、上のエリアは活用方法が決まっていないため、 HTML 上でコメントアウトしました。

プロフィールカードの設置

Blogger 標準のプロフィールウィジェットがしっくりこなかったので、Bootstrap を使ってシンプルなカードを作りました。詳細は別記事にまとめています。

▼ Bootstrap を使ったプロフィールカードの設置

Bootstrap で超シンプルなプロフィールボックスを作ってみた | わたしあむわ

Bootstrap で超シンプルなプロフィールボックスを作ってみた | わたしあむわ

ブログのサイドバーなどのプロフィール。 シンプルに簡単な方法で作れないかな?とやってみました。

機能追加(便利ツール)

ブログカード

以前からお世話になっているブログカードのツールをカスタマイズして使用しています。
他のサイトでも使っていて、とても便利です。

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

今後の予定・更新履歴

当面は最小限のカスタマイズで、まずは投稿を増やしていく予定です。
記事が増えてきたら、また必要に応じて手を入れていきます。
変更があれば、このページに追記していきます。

参考サイト一覧

テーマ公式

公式トップページ(ダウンロード)

公式デモサイト

公式チュートリアル

日本語で詳しい解説

after work lab

after work lab あトんさんの設定解説

after work lab あトんさんの更新日付の追加方法

便利ツール

THE OTHER WAY ROUND vanillaice さんのブログカード作成ツール

Next Post Previous Post