お久しぶりの書き込ですが、何故なら、最近MTは更新くらいしか触ってないので。
Wordpressを使うことが多くなりました。。。ちょっとした構築はそっちの方が便利。
でも、大きなカスタマイズをする時はMovable Typeの方が好み。なので、これからもMTカスタマイズしていくとおもいます。
と、いいながら。
今日の話題はPCとスマホ同じファイルを使って表示する、そう。
レスポンシブWEBデザイン
についてです。
仕事でもう何回もレスポンジブ対応してみて、だんだんどうやればやりやすいかわかってきました。
とにもかくにも
head内に入れるものとして
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="./css/smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="./css/ie.css">
<![endif]-->
まず、viewportのmeta
普通のPC向けのcssと、スマホ向けcss。
必要があればタブレット向けも作ります。
それから重要。
IE対応。
そして外部CSSファイルの用意。
PC向けのCSSは
-----------------
@charset "utf-8";
@media screen and (min-width: 481px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
/*-------------481ｐｘ以上 pc用レイアウト--------------*/
}
-----------------
スマホ向けは
@charset "utf-8";
@media screen and (max-width:480px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
/*-------------480px以下 スマホ用レイアウト--------------*/
}
で、
@media
がIEでは認識されないので、普通のCSS、「./css/ie.css」を用意するわけです。
進め方としては、
「このあとスマホ対応を考えていく作業があるぞ～」
と思いながら先にPCを組み立てていくのが楽です。
今日の一言: お腹が痛かったので昼休みに昼寝したら、だいぶ治りました。睡眠、偉大。
August 28, 2013 12:11 PM
｜
カテゴリー：
レスポンシブWEBデザイン
|
|
コメント(0)
|
トラックバック(0)
|
前に類似のエントリーをした記憶がありますが、今回、アメブロの記事を引っ張ってきました。
アメブロの記事の下に広告が入り、1つの記事としてRSSでは呼び出してしまうので、それを防ぎたいと思います。
アメブロのRSSアドレスをオレンジのRSSアイコンをクリックして取得します。
その後以下のページへ
テキストボックスに先ほどのRSSアドレスを入力します。
表示される一覧のなかで広告が削除されているのを確認して、
「Get as RSS」をクリック。
表示されたページのURLをコピー、phpファイルの中に記載します。
記載方法はこちらが分かりやすいです。
私はphpファイルを本文にインクルードで読み込ませました。
<!--#include virtual="/magpierss/feed.php" -->
文字化けしてしまう場合は、rss_fetch.inc(357-359行目)を
if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {
define('MAGPIE_OUTPUT_ENCODING', 'ISO-8859-1');
}
から
if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {
define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
}
へと更新する。
rss_fetch.incに上記記載がない場合はバージョンが古いのかもしれません。
magpierssは0.72.tar.gzをダウンロードしてください。
今日の一言: またMT限定ネタではありませんが、ものすごく忘れたくないので記載。
February 25, 2013 2:09 PM
｜
カテゴリー：
その他のプログラム
|
|
コメント(0)
|
トラックバック(0)
|
すごく、今さらな感じのエントリーですが、
あれ、どうだっけ。。。となることが多いので覚書
カスタムフィールドに入力があったら表示
なければブロックごと非表示
<mt:If tag="Entrymarumaru">
<img src="./img/marumaru.gif" alt="まるまる" />
<p><$mt:Entrymarumaru$></p></mt:If>
今日の一言: 毎朝、神社で手を合わせるのが日課。前向きに強くなれますように。
February 12, 2013 11:00 AM
｜
カテゴリー：
MTタグ記述
||
Movable Type Open Source
||
カスタムフィールド
|
|
コメント(0)
|
トラックバック(0)
|
MTに限定した話ではないですが、覚書ということで。
近年、スマホの爆発的な売れ行きは、はたから見ててもすごいですよね。
って、はたからのん気に驚いていたけど、そんな悠長なこと言ってられなくなったのは、会社でもスマホ対応することになり、担当になってしまった～。。
スマホでGoogle検索などすると、スマホページとPCページとふたつあっても、今はPCページの方が上がってくる場合が多いのではないでしょうか。
そのうち、スマホが追い抜くのか。
それとも、検索エンジンが何らかの対応するのか。
そりゃ後者は必須よね。PCでスマホページが表示されたら、ビックリしますよ。素人さんは。
画像とか、％表示なので。
ま、それはそのうちという話で。
振り分けの、スマートなJavaScriptを見つけたので、手始めと言う事でご紹介しましょう。
<script type="text/javascript">
if (( navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0) {
if(confirm('スマートフォン用サイトがあります。表示しますか？')) {
location.href = 'スマホサイトのアドレス';
}
}
</script>
上記を<head></head>内に記述します。
PCで表示すると無視して通常に表示しますが、スマホで表示すると、ダイアログが出ます。
「スマートフォン用サイトがあります。表示しますか？」
はいを選ぶとスマホページ、いいえを選ぶとPCページを表示します。
とても、シンプルでスマートですね。
しかし。
結局PCとスマホとふたつファイルを用意しなくちゃいけないのは変わりません。
修正等、結構大変だったりしますよねん。
次回予告
レスポンシブWEBデザインに挑戦。
1つのファイルで、PC・スマホ、CSSで表示を変える方法です。
お楽しみに。
今日の一曲: ミスチル 常套句
January 8, 2013 12:27 PM
｜
カテゴリー：
スマホ
|
|
コメント(0)
|
トラックバック(0)
|
「
TinyMCEで emoddyを使う方法」という記事を前述しましたが、もっと良いプラグインを見つけました。
このプラグインいろんなWEBアプリ版がでてるので、間違えないようにしてください。
実は、仕事で別サーバのデータ引っ越しがあり、MTOS4からMTOS5へ移行したのですが、やっぱり動かなくなるプラグイン続出で。。。
TinyMCEも不具合がでました。
CKEditerは絵文字も搭載してるので、emoddyプラグインの必要もなくなって、シンプルな使用感がうれしいです。
今日の一言: 最近、WPも触り始めました。うわきもの～。
今日の一曲: スキマスイッチ「藍」
November 13, 2012 3:22 PM
｜
カテゴリー：
Movable Type
||
Movable Type Open Source
||
プラグイン
|
|
コメント(0)
|
トラックバック(0)
|
