systeme.ioを「日本ブログ風」に改造せよ!初期の英語テンプレートを日本語化する3ステップ

systeme.io

※本記事にはアフィリエイトリンクが含まれています。

 「systeme.ioでブログを始めてみたものの、テンプレートが全部英語でどこから手を付ければいいのかわからない…」

systeme.ioはブログ作成時に最初にテンプレートを選ぶのですが、表示言語がすべて英語です。日本語ブログを運営するには、書き始める前にひと通り日本語に直す作業が発生します。

一度やってしまえばそれ以降は困ることもないですが、これは海外SaaSならではのデメリットと言えるでしょう。

この記事では、私が実際に約1日かけて試行錯誤した結果をもとに、初期英語テンプレートを日本語ブログのレイアウトに変える方法を3ステップでまとめました。専門知識は一切不要です。順番通りにやれば必ず完成します。

まだ登録していない方は先に無料アカウントを作っておくとスムーズです。
systeme.ioを無料で始める

まずブログを作成しよう

systeme.ioにログイン後、ダッシュボードから 「サイト → ブログ → 作成」 をクリックしてください。

systeme.ioダッシュボードのブログ作成画面

ダッシュボードから「サイト → ブログ → 作成」を選択

ブログのタイトルは後から変更できるので、とりあえず仮のものでOKです。ドメイン名も後から変更可能なので安心してください。URLパスは空白のままで問題ありません。

テンプレートは複数から選べますが、どれを選んでも後述する日本語化の手順は同じです。テンプレートを選んだら保存ボタンを押し、作成されたブログ名をクリック。そこから 「ブログレイアウト」 を選択しましょう。

この段階で確認できるのが「基本英語のレイアウト」です。ここからが本題、日本語ブログへの改造スタートです。

3ステップの全体像

英語テキストを日本語に翻訳する
不要なパーツを削除する
2カラムレイアウトに変更する

STEP ① 英語テキストを日本語に翻訳する

ここからが実際の作業です。まだアカウントを持っていない方は先に登録を済ませておいてください。

まだ登録していない方はこちら(無料)

最初にやることは、英語で書かれているテキストをすべて日本語に変えることです。具体的には以下の2カ所を確認してください。

  • ヘッダー(サイト上部):HOME、Articlesなどのメニュー
  • フッター(サイト下部):About、Legal、各リンクテキスト
ヘッダーの英語テキスト

ヘッダーのメニューテキストを日本語に変更する

フッターの編集画面

フッターの各項目も日本語に変更

フッター編集の詳細

細かいテキストも見落とさないように確認

💡日本語の読みやすさのコツ

海外テンプレートをそのまま日本語にすると、文字が小さかったり行間が詰まりすぎて読みにくいことがあります。フォントサイズは18px以上、行間は1.6以上に設定しておくと、ぐっと読みやすい日本語ブログになります。

STEP ② 不要なパーツを削除する

英語テキストの変更が終わったら、次は不要なパーツを取り除きます。初期テンプレートには一般的なブログ運営では使わないパーツがいくつか含まれています。

例えば以下のようなものが該当します。

  • ページ上部にある不要なロゴ画像
  • フッターのAboutやLegal下にある英語の説明文
  • その他、自分のブログに不要と感じるパーツ
不要なロゴパーツ

このようなロゴはカーソルを合わせてごみ箱アイコンから削除

🗑️ 削除の方法

削除したいパーツにカーソルを合わせると、右端にごみ箱アイコンが表示されます。それをクリックするだけでパーツが削除されます。「消しすぎた」と思ったらブラウザの戻るボタンで元に戻せるので安心して進めましょう。

STEP ③ 2カラムレイアウトに変更する

最後のステップは、メインコンテンツとサイドバーの2カラム構成にすることです。「2カラム」とは、ページを縦に2列に分けたレイアウトのこと。おそらく皆さんがよく見る日本のブログのほとんどがこの構成です。

もし「メインコンテンツだけの1カラムでいい」という場合はこのステップを飛ばしてもOKです。ただ特にこだわりがなければ、馴染みやすい2カラムをおすすめします。

2カラム設定の手順1

ブログコンテンツをクリックして「2列」を選択

2カラム設定の手順2

広げた方がメインコンテンツ、狭い方がサイドバーになる

手順

  1. ブログの内容エリアをクリックする
  2. 列のレイアウトから「2列」を選択する
  3. そのままブログの内容エリアにドラッグする
  4. メインコンテンツにしたい側の端を広げる

広げた方がメインコンテンツ、狭くなった方がサイドバーになります。一般的な割合は メインコンテンツ:サイドバー = 2:1 が目安です。

📱スマホ表示も忘れずに確認しよう

2カラムに設定したあとは、必ずスマホでの見え方を確認してください。systeme.ioはスマホ表示を自動で調整してくれますが、スマホではサイドバーが記事の下に移動して表示されます。見た目がガラッと変わるため、設定後に一度スマホでチェックしておくと安心です。

忘れずに!各ページのレイアウトも修正する

ここまでの設定は「全ページ共通のレイアウト」です。各ページの中身はまだ英語のままになっている場合があります。ブログのページに戻り、以下のページの修正も行いましょう。

  • Home page(トップページ)
  • Post list page(記事一覧)
  • Search(検索ページ)
  • About(自己紹介ページ)
  • Contact(お問い合わせページ)
👤 Aboutページは特に丁寧に

Aboutページは「海外ツールを使っている怪しいサイト」と思われないための大切なページです。プロフィールをしっかり日本語で書くことが、読者からの信頼につながります。顔写真や運営の目的を書いておくだけでも印象が大きく変わります。

まとめ

今回の初期英語テンプレートを日本語ブログのレイアウトに変えるまでにかかった時間は、私の場合約1日でした。systeme.ioの操作に不慣れだったこともありますが、日本ブログ(はてなブログ等)のように「ブログ作成後すぐ記事が書ける」とはいかない点は正直なデメリットです。

さらには一般的な日本ブログサイトは日記のように記事を書けますが、systeme.ioの場合はテキスト要素をドラッグして配置する、という一手間が発生します。文章だけなら大した作業ではありませんが、画像と文章を交互に挿入する場合は、パーツごとにドラッグが必要になるため余計に手間を感じるでしょう。

正直、日記を書くだけならはてなブログの方が楽です。
ただステップメールや決済機能が無料で使えるsysteme.ioは、収益化を考えているなら初期設定の手間を乗り越える価値があります。自分がどういったブログを目指しているかを考えて、ツール選びの参考にしてみてください。

systeme.ioを無料で試してみる

  • STEP①:ヘッダー・フッターの英語テキストを日本語に変更
  • STEP②:不要なパーツをごみ箱アイコンで削除
  • STEP③:2カラムレイアウトに設定してサイドバーを追加
  • 各ページ(Home、About、Contactなど)も忘れず修正
  • フォント18px以上・行間1.6以上でスマホ表示も確認
タイトルとURLをコピーしました