モバスペに最大限マテリアルデザインを適用してみた。

20代から30代の女性が中高生の頃に流行ったモバスペことmobile spaceは、簡単なHTMLでシンプルなサイトを作るのには向いていますが、リッチなサイトを作るのには向いていません。
それでも無理やりマテリアルデザインのふんわりオシャレなサイトを作ってみることにしたので、その奮闘記をここに記したいと思います。

作成したサイトはこちらです。 →やせ我慢

色々とUIのデザインが懐かしいし古いですが頑張ってみましょう。

モバスペマテリアルデザイン化手順

①jQuery等のライブラリやフレームワークのCDNをインポートする

今回モバスペでマテリアルデザインを実現するにあたり、自力でCSSを書くのは必要最低限にしたかったので、CSSフレームワークを活用することにしました。
モバスペでは外部のjs・cssファイルなどをアップロードできないので、CDNで読み込むことにしました。

ライブラリ紹介

今回読み込んだライブラリは以下の通りです。

• jQuery (CDN)
• Materialize (CDN)

Materializeは簡単にマテリアルデザインを実装できるCSSフレームワークです。
グリッドデザインなどBootstrapではおなじみの機能も使えますし、パララックスなんかも簡単に実装できます。
詳しい機能は公式を読んでみてください。
Documentation – Materialize
英語ばかりですが、デモが豊富でわかりやすいので、英語ができなくても全然大丈夫です。

CDNの導入

モバスペでCDNを導入するためには、HEAD間編集にコードを記載します。
jsのライブラリを読み込む際は必ず、jQueryを一番最初に読み込めるようにします。

実際にこんな感じで書きました。

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

②自動挿入のbrタグを消す

モバスペはガラケーで作成・更新することを目的に作られており、また女子中高生などのHTMLの知識に乏しい子たちでも簡単にデザインできるように、編集ページできる入力したHTMLタグに自動でbrタグが挿入されます。
これはデザインをするうえでとても邪魔なので、消してしまうことにします。
brタグを無効にする一番簡単な方法は、CSSでdisupay:none;を指定することです。

自作のHTMLエリアは、IDに「testhi」が付与されたdivクラスで囲まれています。
なので、HEAD間編集で

<style>
#testhi br{
    disupay:none;
}
</style>

と書きます。
また、もし必要があって意図的にbrタグを利用したい場合は、

<br class="br-availability">

などクラスを付与し、HEAD間編集のstyleタグ間に

br.br-availability{
    disupay:block;
}

と追記することでそのbrタグだけ有効にすることができます。

あとはstyleタグの中に自分の好きなデザインをゴリゴリ書いていく感じです。
(外部にサーバー持ってそっからcssファイルを読み込むのでもいいんですが、モバスペでそれやるのはメンテがだるいです。)

最終的に、HEAD間編集の中身はこんな感じになりました。

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<style type="text/css">
#myContents a{
color:#719371 !important;
}
#myContents a:hover{
color:#a7c7a7 !important;
}
#testhi br{
display:none;
}
#myContents{
height: calc(100vh - 170px);
}
#myContents .card{
height:80%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
#myContents iframe {
width: 100%;
min-height: 100% !important;
border:none;
}
#myContents .bottom-menu i{
display:block;
}
.link-wrap{
display: block;
margin:1px;
height: 2.5em;
padding: 2px;
width: 100%;
position: relative;
}
.link-wrap a{
width:100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

</style>
 
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> 

③各子ページをiframeで表示させる

モバスペは一般的なサイトと違って、各ページに共通のヘッダータグなどを適用しずらいので、もういっそのことiframeで子ページを表示してしまうことにしました。
頑張れば各子ページにも同じデザインを適用できますが、ページが増えるたびに同じこと書くのがめんどくさいのと、メンテができなくなっていくのでiframeにしました。
かなり邪道というか苦肉の策ですが仕方ありません…。

子ページのデザインをできる限りシンプルにしておけば一応ホームページのデザインの整合性がとりやすいです。

もし子ページから外部サイトにリンクを張りたい場合、aタグにtarget=”_blank”を記載するのを忘れずに。
でないとiframe内で表示されてしまいます。

まとめ

モバスペでも頑張れば今時のマテリアルデザインの可愛いサイトが作れるんだなと思いました。

本当は右サイドバーやgridを活用したレスポンシブデザインなんかも実装したかったし、もっとまともな色使いにしておしゃれな感じにしたかったのですが、基本的にモバスペはゴリゴリ作っていくには向いていないのもあって今の段階ではめんどくさくてやっていません。

無料でリッチなホームページが作りたければ、エックスドメインなんかでWordPressを使って作るのがいいと思いました。