【第62章】〜ちゃんとしたRWDの記事2〜

  • このエントリーをはてなブックマークに追加
お次はやり方をおつたえしませう。

まともな記事を久しぶりに。

こんにちは! WEBど素人秘書の今津です。

前回、余談が多過ぎて
RWDの実験工程の紹介が出来なかったので
こちらの記事でご紹介させていただきます。

 

前回の記事はこちら

さて。では 早速まいりましょう。

 

まずは、CSSのファイルを
作ってもらって(人任せ)
中身はこんな記述にしてもらいました。

@media only screen and (min-width: 0px) and (max-width: 736px) { .rwd_glow {

background-color: #000;
text-shadow: 0 0 25px #edf8ff, 0 0 20px #edf8ff, 0 0 0.4px #edf8ff; color: #ffffff;
padding: 10px;

} }

で、 ページ編集画面の上部にある

「CSS/JS」をクリックして、

 

<link rel="stylesheet" href="[         ]" media="[         ]" />

href="[          ]"
の入力欄に
/imazu/css/rwd.css
を入力して「追加」をクリックするとcssが設定されます。

 

記事の中に「枠」というカスタムパーツを設置します。


その枠の「CSS class」に「rwd_glow」を指定!

 

ちなみに、今津のCSSファイル

/imazu/css/rwd.css←(これが在り処を示しています。)

ページ編集モードの左上「ファイル」の中、

さがしてみると・・・

 

いた☆

 

 

で、その枠の中に
リッチテキストとか設置すると、
スマホの時だけ見た目が変わる!

という仕組み!!

 

OWLetなら、
ブラウザからスマホ表示が
簡単に確認できちゃいます。

 

では

見てみましょう。

右上のタブがデフォルトでPCになってます。

このときは

ふむ。

 

ではスマホ縦で見てみましょう。

 

 

わぉ。

こういうふうにPC用、スマホ用、

ガラリと見た目を変えることが

できちゃうというわけでございます。

勉強に、なりましたぁ(´・ω・`)

つまり、RWDってのは
「デバイスに合わせて最適化」を
勝手にしてくれるんじゃなくて、
スマホの時に違う表示にしてくれる、
ということなので、

 


その最適な表示方法は、
また、人間の脳が必要ってことですかね。
あ!それってつまり…

 

RWD化することで、
もしかしたらデバイスごとの「見やすさ」

だけでなく、ターゲットによって

デザインとかを変えたりできるようになるのでは!?

と思ったいまづでした。

あと、キャプチャの記事タイトル
「ちゃんした」ってなってるw

今津

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 09:30~17:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>