WEB SITEの英語版を作成・・・中。

需要があるかどうかは分かりませんが、何が起こるか分からないので、少ないコストでやれることはやっておこう精神で今朝からやり始めました。

現状の日本語のWEB SITEを英訳したものはあるので、すぐ終わるだろうと思って始めましたが、言語切り替えのボタンをTOP画面の目立つところに入れられず、あっという間に一日過ぎてしまいました。

とりあえず、メニューに、

  • 日本語表示している時には、英語表示にできるよう「English」
  • 英語で表示している時は、日本語を表示できるよう「日本語」

を追加しました。何とも分かりにくい・・・。

日本語版のメニュー
日本語版のメニュー。右端の「English」をクリックすると英語版になります
英語版のメニュー
英語版のメニュー。右端の「日本語」をクリックすると日本語版になります。

しかもメニューに追加したせいで、ベトナム語の資料ダウンロードがページ最下部に追いやられました。応急処置として最下部に早くたどり着けるよう、TOPページに表示していた設備情報や加工サンプル、アクセスは表示しないようにしました(画面上部のメニューをクリックすることで見られます)。

英語版の作成が終わったら、ベトナム語版も作成したいですが、今の方式だとメニューが言語名だらけになってしまうので、何とかしないとダメですね。

そろそろWEBサイトのテーマを新しくするのもアリかなと思い始めましたが、とりあえず、英語版の完成を急ぎます。

ホームページをちょっと変えてみました

当サイトはWordPressで作っています。なので、テーマを変更すれば、見栄えが簡単に変えられます。先日のサーバ移行時にプラグインとGUIでできるカスタマイズだけでホームページを作ったので、着せ替え人形的に楽にテーマ変更できるはずなので、ちょっと変えてみました。

理想は、テーマ変更作業以外の作業が発生しないことですが、やってみたところ、そうはいきませんでした。もし戻すことになったら、同じ作業をしないといけないので、備忘録代わりに以下にまとめておきます。

ヘッダー画像の差し替え

テーマによってヘッダー画像の推奨サイズが違うので、サイズを合わせた画像を5枚用意しました。(クリックするごとにヘッダ画像が変わるため、1枚ではさびしいのです)

CSS修正

  1. タイトルのフォントサイズが本文よりも小さかったのが気になってしまい、追加CSSを使って変更しました。
  2. 会社案内ページにある会社の外観写真が新テーマとサイズが合っていないため、左に寄ってしまっていたので、センタリング。ヘッダー画像と一緒に画像サイズを合わせればよかったかと、後から気付きました。
  3. (投稿作成後、プレビュー時に気付いて追記)下記ソースコードがフォントカラーが黒くてさっぱり見えないので、変更しました。
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    color: #222;
    font-size: 14px;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
		text-align:center
}

img {
     max-width:100%;
     display: block;
     margin: 0 auto;
}

.wp-block-code, .wp-block-preformatted pre {
     font-family: Menlo,Consolas,monaco,monospace;
     font-size: 14px;
     color: #fcb900; 
}

会社概要の表の設定を変更

会社概要に使っている表が1行おきに背景色が変わるように設定していたのですが、今回文字色が白くなったことで、背景が白い部分の文字が見えなくなってしまったため、背景色を無くしました。

フッターの再設定

フッタ―の設定は、テーマごとに保存されているのか、テーマを変えたら、消えてなくなったので、元のテーマからコピペしました。

Googleマップの大きさ変更

新テーマの横幅に合わせてGoogleマップのサイズを修正しました。(カスタムHTMLの中のwidthの部分)

以上です。結構ありました。テーマによって、ヘッダー画像や、カラムのサイズが異なるので、それに伴う画像の修正がほとんどですね。個人的にはCSSを全く理解していないので、CSSの修正は時間がかかりました。月1回ペースでテーマ変えていったら、その辺も多少理解できるようになりますかね?

最後になりましたが、1か所、気持ち悪いけど直していないところがあります!

メニューの右側の微妙な空白(赤い〇で囲ったところ)、何でしょうか?よくわからないのですが、時間も無いので今回は放置することにしました。

さらに最後に。

今回の投稿のプレビューを表示したら、フォントのカラーが黒くてCSSのソースが全くみえません。なので、カスタムCSSに追記です。繰り返しになりますが、CSSが分からないので、GoogleCromeの「検証」機能使って、必要なところを切り取って、カスタムCSSに追記です。なんで、これで反映されるのか、さっぱり分かりません。