[K] #するぷろ プレビューでのCSSを設定するときに気をつけること

Screenshot 2012 06 06 7 34 55

どうも、連投乙です@knk_nです。
さっき書いたするぷろのアップデート記事でもそうなのですが、するぷろで記事を書く度にCSSの設定をしています。何回やっても何回やっても(ryうまくいかない。
自分でcssファイルを指定することでプレビュー時にそのスタイルが反映される機能はとても素晴らしい。便利だ。しかしCSSの書き方がわからない。
今回ようやくわかったので記事にしてみました。今後のMy 備忘録のために。

[K] テーマ変更可能が嬉しい!「#するぷろ for iPhone」のアップデートが来たよ!
こっちもよろしければぜひ!

まず基本であるCSSの設定ですが本家ページの説明がいちばんわかりやすいでしょう。

CSSURL
プレビューで使用したいスタイルシート(CSS)をURLで指定できます。(例:http://wayohoo.com/style.css)

via: するぷろ for iPhoneを設定してみよう!【使い方】 | 和洋風◎

するぷろでCSSを設定するときに気をつけること

ここから本編です。私が気をつけるべきと思うのは主に二つ。

  1. 外側のマージンをゼロにする
  2. スタイルはタグで指定する

1. 周りを余らせぬようマージン・ゼロを!

今までこのように周りが余る現象の解決方法がよくわかりませんでした。 かといって誰かに聞くほどでもない。

マージン・ゼロで解決した!

CSSのmarginを0にすればよかったのですね。 こんなこともわからなかったとは…

body {
	margin: 0;
	overflow: hidden;
}

htmlbodyに書けばよろしいでしょう。私はbodyに記述。コンテンツがはみ出さぬようにoverflow: hidden;もあるといいかも。

Screenshot 2012 06 06 8 38 55
マージン・ゼロON
Screenshot 2012 06 06 8 40 55
マージン・ゼロOFF

結果は明らか。
独自のCSSを指定する人。これだけは絶対書こう!

2/ スタイルはタグで指定せよ!

これはずいぶん前に解決したことですが合わせて書きます。
私は普段のようにクラス名とセットでスタイル指定をしていたのですが、これがマズかった。

.post-contents h2 {
	color: blue;
	/* 以下略 */
}

するぷろのプレビューもブログと同じようなhtml構造になっていると勝手に思い込んでいましたがどうも異なるようで。
記事タイトルには<h2>が使われているのかなと思い調べてみるとそうではないらしい。
するぷろプレビューで吐き出されるHTMLが分からない以上、idclassは使わない方向で。
実際に書いていて形式がわかっている<h2><a>といったhtmlタグを直接指定してスタイルを作ってやります。

h2 {
	color: blue;
	/* 以下略 */
}

最初に書いた「マージン・ゼロ」もクラス指定が無理そうなので、確実にあることがわかっているhtmlタグ<html> or <body>を使った。
よくよく考えてみれば、ブログや個々によって付けるidやクラス名は様々なのでそこまで縛ってしまうのはかえって使いにくい気もしますね。
このくらいがちょうどいいのでしょう。
あえてidやクラス名を使うとすれば、するぷろプレビューのhtml構造がわかっていて、開発者が推奨id、推奨classを決め、ユーザがそれに則ってcssファイルを書く。
ここまで考えただけでもめんどくさそう。
あとは<h2 class="title">hogehoge</h2>の記述のもと、

h2.title {
	/* 以下略 */
}

と書けば、タグの内側ではありますがid、class指定もできます。
普段からこのように内側まで細かくスタイル指定していればできそうな方法ですが、私のように外側のみのスタイル指定では無理そうです。
iPhoneのみでのプレビューだし、本文のみなのでそこまで複雑なスタイルにはならないでしょう。
タグの直接指定でなんとかなりそうです。
画像は最大幅を306pxあたりにしておくと縦向きで見るぶんにはちょうどいいです。横向きだと横が余るけど。

img {
	max-width: 306px;
	height: auto;
}

スタイルのほとんどは当ブログiPhone用モバイルテーマに準拠しました。要するにコピペです。
htmlタグ直打ちなど設定が特殊なので他のものと分け、「slpro.css」と専用の名前をつけてアップロードしておきました。
昔はPCやモバイルテーマのスタイルをそのまま指定して使っていたけど思えばあれが悪かったに違いない。
実際のプレビュー画面の一部を載せておきます。

Screenshot 2012 06 06 9 40 55
Screenshot 2012 06 06 9 41 55

おわりに

私がするぷろを購入したのはもう一年以上前なのですがここまで手こずるとは思いませんでした。
@isloopさんに聞けば5秒くらいで解決したのかなと思わなくもないですが、なんとか自己解決できてよかったです。
たかが見た目と言われればそれまでですが、それは書く楽しさにもつながっていきます。
「するぷろプレビューでのCSSの記述がうまくいかねぇなぁ」という方。
ご一読ください。

するぷろ for iPhone 1.300 App
カテゴリ: ソーシャルネットワーキング
価格: ¥350