モバスペに最大限マテリアルデザインを適用してみた。たくましゅくじょaboutcontactlinkaboutcontactlink更新通知モバスペに最大限マテリアルデザインを適用してみた。spaceは、簡単なHTMLでシンプルなサイトを作るのには向いていますが、リッチなサイトを作るのには向いていません。それでも無理やりマテリアルデザインのふんわりオシャレなサイトを作ってみることにしたので、その奮闘記をここに記したいと思います。作成したサイトはこちらです。UIのデザインが懐かしいし古いですが頑張ってみましょう。まとめモバスペマテリアルデザイン化手順1jQuery等のライブラリやフレームワークのCDNをインポートする今回モバスペでマテリアルデザインを実現するにあたり、自力でCSSを書くのは必要最低限にしたかったので、CSSフレームワークを活用することにしました。モバスペでは外部のjs・cssファイルなどをアップロードできないので、CDNで読み込むことにしました。今回読み込んだライブラリは以下の通りです。(CDN)Materializeは簡単にマテリアルデザインを実装できるCSSフレームワークです。グリッドデザインなどBootstrapではおなじみの機能も使えますし、パララックスなんかも簡単に実装できます。詳しい機能は公式を読んでみてください。Materialize英語ばかりですが、デモが豊富でわかりやすいので、英語ができなくても全然大丈夫です。CDNの導入モバスペでCDNを導入するためには、HEAD間編集にコードを記載します。jsのライブラリを読み込む際は必ず、jQueryを一番最初に読み込めるようにします。実際にこんな感じで書きました。src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>2自動挿入のbrタグを消すモバスペはガラケーで作成・更新することを目的に作られており、また女子中高生などのHTMLの知識に乏しい子たちでも簡単にデザインできるように、編集ページできる入力したHTMLタグに自動でbrタグが挿入されます。これはデザインをするうえでとても邪魔なので、消してしまうことにします。brタグを無効にする一番簡単な方法は、CSSでdisupay:none;を指定することです。自作のHTMLエリアは、IDに「testhi」が付与されたdivクラスで囲まれています。disupay:none;}</style>と書きます。disupay:block;}と追記することでそのbrタグだけ有効にすることができます。あとはstyleタグの中に自分の好きなデザインをゴリゴリ書いていく感じです。(外部にサーバー持ってそっからcssファイルを読み込むのでもいいんですが、モバスペでそれやるのはメンテがだるいです。)最終的に、HEAD間編集の中身はこんな感じになりました。src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>3各子ページをiframeで表示させるモバスペは一般的なサイトと違って、各ページに共通のヘッダータグなどを適用しずらいので、もういっそのことiframeで子ページを表示してしまうことにしました。頑張れば各子ページにも同じデザインを適用できますが、ページが増えるたびに同じこと書くのがめんどくさいのと、メンテができなくなっていくのでiframeにしました。邪道というか苦肉の策ですが仕方ありません...。子ページのデザインをできる限りシンプルにしておけば一応ホームページのデザインの整合性がとりやすいです。子ページから外部サイトにリンクを張りたい場合、aタグにtarget=”_blank”を記載するのを忘れずに。ないとiframe内で表示されてしまいます。まとめモバスペでも頑張れば今時のマテリアルデザインの可愛いサイトが作れるんだなと思いました。本当は右サイドバーやgridを活用したレスポンシブデザインなんかも実装したかったし、もっとまともな色使いにしておしゃれな感じにしたかったのですが、基本的にモバスペはゴリゴリ作っていくには向いていないのもあって今の段階ではめんどくさくてやっていません。なんかでWordPressを使って作るのがいいと思いました。]メールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。モバスペに最大限マテリアルデザインを適用してみた。非表示のinput要素ではクリップボードへのコピーSlackの普及でデコメ絵文字の復権なるかシュガーラッシュのネット世界と、サマーウォーズのO個性的でオシャレなダーツボードを買うならZazzlGitのユーザ名を変える方法の使い分けについて。気になるサイトの更新通知はRSSリーダーで受け取ろう!マルチ商法の勧誘の問題点を知れば、仕事で成功するヒントが見えるこのサイトの運営者ノッテ92年うまれ。