iPhone:「するぷろ」のプレビューにCSSを反映させる方法

するぷろ CSS 設定

「するぷろ」でCSSを反映させる方法が検索しても分からないので教えて欲しいというメールを頂きました

僕が「するぷろ」を使い出したのがかなり後発組で最近記事に取り上げたことでご連絡を頂いたのでしょうか。

一体何番煎じになるのか数えるのも大変な話ですが、折角ですので「するぷろ」のプレビューに自ブログのCSSを反映させる方法を初心者なりに記事にしたいと思います

一言で纏めると「するぷろ」用のCSSを作成すればOK

実は僕自身も始めは「するぷろ」のCSS反映に躓いてググって解決したのですが、この問題にいきなり気がつく人ホント凄いなと思います
「するぷろ」の設定画面には”CSS URL”と指定されているので自ブログのCSSのパスを入れればプレビューにスタイルが反映されるものと思い込んでしまいますもんね

その間違いを気付かせくれたのが「なしめやブログさん」の記事でした

参照:なしめやブログさん:するぷろでWordPressブログのCSSを反映する方法

僕のブログの場合だとh2やh3タグのスタイルシートは”id=main-contents”内に対して適応されるようになっています

言っていることがわからない場合はブログのスタイルシートをエディタで開いてみれば何となくお分かりになると思いますが、見出しタグの指定部分などが”#main-content h2{ “の様な記述になっていませんでしょうか(main-contentsとはまた違うかも知れませんが)。

参照元の「なしめやブログ」さんに記載されていますが、要は「するぷろ」用のCSSを自分で書いてサーバにアップ、「するぷろ」のCSSは作成したCSSファイルを指定してやると解決します。

と言ってもidなどの不要な記述を取り除くだけなので基本的には必要な部分をコピペ、idなどを取り除いてやるとOK。

下の画像は「するぷろ」用に作成したCSSの一部ですが、ただ単にh2を指定したりテキスト装飾のクラス指定をしているだけです

するぷろ CSS 反映

するぷろの設定にある”CSS URL”の部分に作成したCSSファイルを指定するとプレビューにスタイルが反映されます

まさかブログ記事に書くとは思っていなかったので変更前の画像などはありませんが、小見出しやクラス指定したテキスト装飾、リンクの色などが「するぷろ」のプレビューに反映されています

するぷろ CSS 反映できない

CSSのURLが分からない場合は

頂いたメール内に「CSS URLのパス記述が合っているのかも微妙で」とありましたが、自分のブログのスタイルシートのURLがよくわからない場合はブラウザでブログを表示、右クリックして”ページのソースを表示”を選択。

CSS URL 調べ方

自分のブログのCSSファイルを読み込むためのリンクが
<link rel=”stylesheet” href=”http://自ブログのURL/wp-content/themes/テンプレート/ホニャララ.css“>
の様な感じに記載されています。
CSSのURLは青色の部分です

でもそれじゃあダメなんですよ。「するぷろ」用に書いたCSSファイルを指定する必要があるので、作成したCSSを自ブログのCSSファイルがある階層と同じ場所にアップして、ホニャララの部分を作成したCSSファイル名に変えて「するぷろ」で指定すればOKです

僕の文章が下手すぎて理解してもらえるか微妙に感じます
本当に申し訳ありません。

僕は「するぷろ」用に作成したcssファイルの名前が「surupuro.css」なので「するぷろ」の設定画面に記載しているURLは
<link rel=”stylesheet” href=”http://自ブログのURL/wp-content/themes/テンプレート/surupuro.css“>となっています

よくわからない場合はまたご連絡下さい


するぷろ for iOS (WordPress & Movable Type & ライブドアブログ & FC2ブログエディタ)
価格: ¥500
カテゴリ: ソーシャルネットワーキング, 仕事効率化


関連記事

Pocketに保存 はてなブックマーク Google+でシェア Follow on Feedly
サブコンテンツ

このページの先頭へ