<script>
  let url = location.href;
  let pattern = '/en/';
  if(url.indexOf(pattern) > -1){
  let link = document.getElementsByClassName('hogehoge')[0];
  let urlNew = 'https://hogehogehoge.com/en/';
  link.setAttribute('href', urlNew);
  }
</script>

参考
www.javadrive.jp
into-the-program.com
www.sejuku.net
clicklyquickly.com

2021-10-02

CSSでhtmlのdir=rtl属性を指定する（アラビア語対応）

HTML,CSS,javascript

そんなことある？って感じなんだけど、

サイトの多言語化対応で、英語・アラビア語のサイトを作っている。

アラビア語って、右から左に書く言語。

なので当然サイトが全部 dir="rtl" になるってワケ。

そりゃレイアウト崩れるとこも出てくる。

CSSで崩れたとこ直すとき

サイト全体のCSSに、アラビア語のページだけに適用されるCSSを書き加える。

WordPress プラグイン「Polylang」で多言語化を行なっている場合、

アラビア語ページのソースコードを見ると

<!DOCTYPE html>
<html dir="rtl" lang="ar" data-loaded="false" data-scrolled="false" data-spmenu="closed">

という感じになっている。

これを利用して、CSSにこういう風に書くとよい

html[dir=rtl] .hoge{
  left:0;
  right:50px;
}

参考

developer.mozilla.org

やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

PHPのバージョンアップがWordPressの管理画面に反映されない

.htaccessのヤロ〜

JavaScriptで現在のページのURLを取得して条件分岐

CSSでhtmlのdir=rtl属性を指定する（アラビア語対応）

CSSで崩れたとこ直すとき

参考