jimdoモバイル対応フッターメニュを作ろう

jimdoは簡単にホームページが作れるので便利です

しかし、細かいことを行いたいととても苦労します

レスポンシブデザインが採用されていますので、モバイルでも自動調整でレイアウトが変更されます

 

さあ

 

本当に？ モバイル対応にするためには？

自動でされるレスポンシブデザインではきれいな画面ができないです

 

本当にきれいにするには、モバイルに対応したCSS HTMLを書かなくてはいけません。

jimdoはHTML、CSSの知識があれば十分カスタマイズ可能です。

 

実際に作って見ましたが、jimdoを追加わないでホームページを作った方が簡単なような気がします。

 

モバイルに特化した操作しやすいフッターメニューを作ります

  • jimdoのナビゲーションメニューを非表示
  • jimdoのフッター削除
  • 最下部にアイコンを伴ったフッターメニュー

修正箇所は二か所です

①フッターメニュコンテンツを作ります

コンテンツの追加・文書

ここにhtmlをペーストします

各項目は

<a class="アイテム" target="_top"></a>

アイテムはヘッダーのCSSで表示を設定します

hrefで作成したページにリンクします

<div id="cc-m-15031093223" class="j-module n j-text ">

<div id="cc-m-10239818084" class="j-module n j-htmlCode">

<div id="footerMenu">

<a class="home" target="_top" href=”/”></a>

<a class="tayori" target="_top" href="/だより"></a>

<a class="news" target="_top" href="/お知らせ"></a>

<a class="disaster" target="_top" href="/防災"></a>

<a class="trash" target="_top" href="/ゴミ"></a>

<a class="mail" target="_top"></a>

</div>

</div>

</div>

この状態では作成した文書コンテンツには何も表示されていませんが、これでいいのです

このコンテンツはヘッダーで指定された情報を元に、ページが表示されたとき見られるようになります

 

 

②CSSとフォントをヘッダーに挿入します

 

管理メニュー・基本設定・ヘッダー編集

 

一行目でフォントを指定します

最初にjimdoのヘッダー、ナビゲーション、フッターを非表示にします

新しく作るフッターは#footerMenuに作ります

HTMLで指定したアイテムの表示文字は

アイテム             HTMLで指定した名称

before            フォントのコードを指定　コードは参照１を

after               表示文字　漢字３文字以内に

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

 

<style type="text/css">

/*<![CDATA[*/

/* =======================================

モバイルスタイル

======================================= */

@media screen and (max-width: 800px) {

    .jtpl-header {        disiplay:none ;    }

    .jtpl-navigation__inner {        display:none ;    }

       nav {        display:none ;    } 

    footer { display:none ;  }

   

/*------ フッターメニュー ------*/

#footerMenu {

    display: block;

    width: 100%;

    position: fixed;

    left: 0px;

    bottom: 0px;

    text-align: center;

    margin: 0 auto;

    padding: 0 0 10px 0;

    background-color: #a0a0a0;

    font-size: 2em;

    z-index: 99999;

}

#footerMenu a {

    text-decoration: none !important;

    position: relative;

    padding: 10px 6px;

}

#footerMenu a:before {

    font-family: FontAwesome;

    color: #000000;

}

#footerMenu a:after {

    font-size: .3em;

    color: #ffffff;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 0 auto;

    padding: 0;

    text-align: center;

}

a.home:before {    content: "\f015";}

a.home:after {    content: "HOME";}

a.tayori:before {    content: "\f1ea";} 
a.tayori:after {    content: "たより";}
a.news:before {    content: "\f1ea";} 
a.news:after {    content: "News";}

a.disaster:before {    content: "\f134";}

a.disaster:after {    content: "防災";}

a.trash:before {    content: "\f014";}

a.trash:after {    content: "ゴミ";}

a.mail:before {    content: "\f0e0";}

a.mail:after {    content: "問合せ";}

 

}

/*]]>*/

</style>