「テストです。」って記事・・・
おそらく大抵の方が「?」だと思います。
が、しかし。
ウチのブログ・・・
記事の見栄えには自分なりに相当こだわっていてリストやらテーブルやらいろいろCSSで定義しています。
でも、スマホや携帯では一切反映されてません(悲しい)。
私はAndroidのスマホ使っているんですけどウチのブログを表示させると行間・文字間がギチギチで読み難いったらありゃしない・・・
で、どうにかして携帯でも読みやすい表示ができないものかと考えていたところ・・・
これはウチのブログのアメンバー限定記事の表示画面。
以前使っていたスキンに合わせてCSSを書いているのでブログタイトルが「アメーバブログの歩き方」になっちゃってます(笑)
このアメ限記事をスマホで閲覧するといい具合にCSSが効いていてけっこう読みやすい。
これって使えるんじゃないかと思って現在試行錯誤中です。
スマホでのブログ表示のスクリーンショットを撮りたかったんですがスゲー面倒なので止めました。スマホでウチのアメ限記事を読みたいって方はアメンバー申請して見てください(否承認にはしませんよ)。
やり方は思ったより簡単で(とにかくメンドクセーっすが・・)、記事中にインラインでスタイルを入れ込むだけです。
<style>html {font-size:100% !important;}body#mainindex {background:#fafafa url(http://stat.ameba.jp/user_images/20110315/12/jcn9001/4f/db/p/o0042002211108740022.png) repeat-y 0 0;}ul#amebabar {display:none;}div#usernaviarea {display:none;}h1 {display:none;}#mainindex h2{text-indent:-9999px;}#mainindex h2 a {display:block;width:294px;height:83px;background:url(http://stat.ameba.jp/user_images/20110315/01/jcn9001/3d/96/p/o0294008311108475531.png) no-repeat top left;margin:0 0 20px 10px;}#overheader{width:960px;margin:0;padding-top:20px;padding-left:50px;}#frame{width:960px;margin:0;padding-left:70px;}#profile {width:230px;}#main {float: left;width: 690px;margin-bottom: 50px;}div#footerarea {position: relative;background:#fafafa url(http://stat.ameba.jp/user_images/20110315/12/jcn9001/4f/db/p/o0042002211108740022.png) repeat-y 0 0 !important;border-top: none !important;margin-top: 0;}/*■ページ送り*/.page{margin:10px auto 14px;padding:4px 0 4px 0;text-align:center;/* CSS3 Box Shadow */-moz-box-shadow:0 0 3px #cccccc;-webkit-box-shadow:0 0 3px #cccccc;box-shadow:0 0 3px #cccccc;/* CSS3 Rounded Corners */-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;border:1px solid #eeeeee;color:#666666;width:600px;}.page a{color:#666666;}.page a:active{color:#000000;}.page a:hover{text-decoration:none;color:#000000;}#comment_show {border:solid 1px #cccccc;background:url(http://stat.ameba.jp/user_images/20110313/11/jcn9001/00/8c/p/o0010020011106338071.png) bottom left repeat-x;padding:5px;}#comment_show h4 {color:#444444;background:none;padding:0;}#comment_show p {color:#666666;}#comment_show input#commentbutton {border-top: 1px solid #ccc; border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #ccc; padding: 5px 0; font-weight: bold; text-align:center;cursor: pointer; color: #666; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 -1px 1px #fff, -1px 0 1px #fff, 1px 0 1px #aaa; -webkit-box-shadow: 1px 1px 2px #e7e7e7; -moz-box-shadow: 1px 1px 2px #e7e7e7; width:150px;height:30px;background: -moz-linear-gradient(top, #fff, #f1f1f1 1%, #f1f1f1 50%, #dfdfdf 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #f1f1f1), color-stop(0.5, #f1f1f1), color-stop(0.99, #dfdfdf), to(#ccc)); }#comment_show input#commentbutton:hover {background: #ccc;}.contents h4 {font-size:1em;background:url(http://stat.ameba.jp/user_images/20110305/15/jcn9001/a1/88/g/o0015001511091287168.gif) no-repeat 0 .3em;padding:0 0 0 20px;margin:0.5em 0 !important;}.contents h5 {font-size:1em;background:url(http://stat.ameba.jp/user_images/20110305/15/jcn9001/a1/88/g/o0015001511091287168.gif) no-repeat 0 .3em;padding:0 0 0 20px;margin:0.5em 0 0.5em 20px!important;}.contents p {letter-spacing:1px;padding:5px 0;line-height:1.7;}.contents p br {letter-spacing:0;}.contents ul {margin:10px 0 0;padding:0;}.contents li {margin:0;padding:0 0 5px 17px;background:url(http://stat.ameba.jp/user_images/20110228/21/jcn9001/b6/60/g/o0013001311081378539.gif) no-repeat 1px .2em;list-style:none!important;line-height:130%;}.contents table {border:none;margin:10px 20px;}.contents th {border:none;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;padding:6px;text-align:center;}.contents td {border:none;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;padding:6px;text-align:left;}blockquote{margin:10px 30px;padding:10px;border:1px solid #cccccc;font-size:12px !important;}</style>
こんな具合に投稿記事の一番最後に「<style>~</style>」でスタイル定義を入れ込んでいるだけです。
スマホや携帯用のデベロッパーツールがあればいろいろ解析できるんですが、これまたメンドクセーんでまだやってません。
携帯ブラウザだとauやソフトバンクはCSSをある程度読み取ってくれるらしいんで(Docomoはダメっぽいです)イケそうだし、スマホはhtmlを解析できるアプリとかあるかもしれないので誰か教えてください。
