レスポンシブWEBデザイン!

お久しぶりの書き込ですが、何故なら、最近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; 
}

/*-------------481px以上 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を組み立てていくのが楽です。

別ブログのRSSを表示させる方法

前に類似のエントリーをした記憶がありますが、今回、アメブロの記事を引っ張ってきました。
アメブロの記事の下に広告が入り、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:If tag="Entrymarumaru">
<img src="./img/marumaru.gif" alt="まるまる" />
<p><$mt:Entrymarumaru$></p></mt:If>

スマホ用ページ作成 覚書その1

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で表示を変える方法です。
お楽しみに。

エディタプラグインCKEditerはいいゾ。

TinyMCEで emoddyを使う方法」という記事を前述しましたが、もっと良いプラグインを見つけました。


ckeditor.gif

このプラグインいろんなWEBアプリ版がでてるので、間違えないようにしてください。

実は、仕事で別サーバのデータ引っ越しがあり、MTOS4からMTOS5へ移行したのですが、やっぱり動かなくなるプラグイン続出で。。。

TinyMCEも不具合がでました。


CKEditerは絵文字も搭載してるので、emoddyプラグインの必要もなくなって、シンプルな使用感がうれしいです。


1  2  3  4  5  6  7  8  9  10  11

▲トップへ戻る

2017年2月

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28        

タグクラウド

My Photo