Jimdoのナビゲーションに日本語と英語のタイトルを付ける方法

難易度:高

この情報は公開するべきか悩みました。

正直言いますが、ホームページを作成する者にとって『飯のタネ!』的な要素が強いからです。 現在Jimdoには、URLの短縮機能がないため、英語でページを作って、 日本語のナビゲーションをつけることが容易ではないことから、この情報を公開することで、悩んでいる人にひとつの解決の糸口を見つけてもらうことが出来ればと思い、公開することにいたしました。


【全てのテンプレートで使用することは出来ません】

あらかじめ書いておきますが、この方法はテンプレートは限定されてしまいます。
 
チェックいたしましたが、およそ半数くらいのレイアウトで使用することは確認しています。 この手法を応用すれば、英語で作ったページに日本語をつけることも日本語のページに英語をつけることも可能です。また日本語と英語の大きさを変更することも、上下を入れ替えることも可能です。

 

このスタイルシートを設定された方のホームページです!

表示例
 

■Food Business Laboratory Japanさんのホームページ

⇒ http://www.food-blab.com/

 

JimdoはURLが日本語表記のため スマートフォンを使用してFacebookタイムライン上の当サロンの情報紹介(リンク)経由で来ると 正常にHPへ遷移できませんでした。
(これはiphoneでもその他スマートフォンでも発生しました。)
今回の方法でURLを英語表示にしかつHP上では日本語表示で見やすくなったことでFacebook上からでも正常にアクセスすることができるようになりました。

 

他にも『上手く行ったよと』とご連絡いただければ
こちらのページかでご紹介をさせていただきます!

以下のソースコードを設定⇒ヘッダ部分を編集に貼り付ける

<style type="text/css">

 

#mainNav1 li a{
    text-align:center;
    line-height:1.5;
    font-weight:bold;
}

#mainNav1 li a span{
    display:block;
    font-size:10px;
    font-weight:normal;
    color:#ccc;
}

#mainNav1 li a.current span{
    color:#1C86AF;
}

</style>

ナビゲーションのidを取得する

難易度:高

プレビューで表示させます。

そのあと、ページのソースを表示します。

Jimdo推薦のFirefoxならページの何もないところで、右クリックして、「ページのソースを表示」をクリックします。IEの場合は、同じく右クリックして「ソースを表示」をクリックします。

 

ソースの中から『<ul id="mainNav1" class="mainNav1">』
で始まる行を全てコピーしてください。

 

このままでは、見辛いので、</li>のところで改行していきます。

<ul id="mainNav1" class="mainNav1">

<li id="cc-nav-view-976464967"><a href="/" class="level_1"><span>HOME</span></a></li>

 <li id="cc-nav-view-976465067"><a href="/profile-1/" class="current level_1"><span>Profile</span></a></li>

<li id="cc-nav-view-1184976467"><a href="/pinterest/" class="level_1"><span>Pinterest</span></a></li>

<li id="cc-nav-view-1185113967"><a href="/mp3-player/" class="level_1"><span>MP3 Player</span></a></li>

</ul>

 

idだけを抜き出す。

上記の赤い文字の部分がこのソースのidになります。

これを抜き出して縦に並べ、頭に#をつけます。

 

#cc-nav-view-976464967

#cc-nav-view-976465067

#cc-nav-view-1184976467

#cc-nav-view-1185113967

これにスタイルシートとなる部分を追加します。

#cc-nav-view-976464967 a:before{content:"ホーム";}
#cc-nav-view-976465067 a:before{content:"プロフィール";}
#cc-nav-view-1184976467 a:before{content:"ピンタレスト";}
#cc-nav-view-1185113967 a:before{content:"ポッドキャスト";}

 

この日本語の部分が、頭に追加される部分です。

各ページにあわせて追加してください。

英語のページなら日本語、日本語のページなら対応する英語名を書くという事です。

 

これを先ほど追加したスタイルシートの一番後ろに追加します。

<style type="text/css">

 

#mainNav1 li a{
    text-align:center;
    line-height:1.5;
    font-weight:bold;
}

#mainNav1 li a span{
    display:block;
    font-size:10px;
    font-weight:normal;
    color:#ccc;
}

#mainNav1 li a.current span{
    color:#1C86AF;
}

 

/* この後ろに追加 */

 

#cc-nav-view-976464967 a:before{content:"ホーム";}
#cc-nav-view-976465067 a:before{content:"プロフィール";}
#cc-nav-view-1184976467 a:before{content:"ピンタレスト";}
#cc-nav-view-1185113967 a:before{content:"ポッドキャスト";}

 

</style>

忘れないで!!

ヘッダ部分を編集に追加したものは、再読み込みをしないと反映されませんので、保存した後、必ずページの再読み込みをしてください。(F5ボタンを押す

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422