はてなブログの既存テーマ(レスポンシブテーマ非対応のもの)をレスポンシブテーマに対応させたい


はてなブログを使用しているのですが、この度レスポンシブテーマにしようと思い、いろいろ試行錯誤しています。
テーマを変更するのも考えましたが、データ消去されるのも考えたので今使用しているデザインをレスポンシブテーマにしようと考えているのですが、うまくいきません。テーマはPink Pharmacyを使用しています。
具体的にCSSを追加すればよいのか、はたまた土台テーマからレスポンシブテーマに当たるHTMLを持ってくればよいのかわからないです。解説をお願いします。

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2018/03/10 01:15:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答2件)

id:psne No.1

回答回数605ベストアンサー獲得回数334

ポイント50pt

既存のテーマをレスポンシブデザインに変更するには、CSSを追加する方法を用います。(HTMLは基本的に変更しません。)
いくつかの画面サイズを想定して3~6パターンの設定を作っていく事で実現できますが、小さい表示のものから作る方が比較的簡単に仕上げる事ができるため、既存のものを変更する際には多少の頑張りが必要になります。

id:kaoato No.2

回答回数236ベストアンサー獲得回数86

ポイント50pt

>うまくいきません。

当然の結果だと思います。


Pink Pharmacy - テーマ ストア
http://blog.hatena.ne.jp/-/store/theme/12921228815712830659

既存のテーマーにCSS追加して、レスポンシブにするのは、かなり厳しいと思います。
レスポンシブ前提で作れらてないからですね。

邪魔なCSSを打ち消すようなCSSを追加していってみたいな感じになるし、そもそも構造的に無理とか言うのがありそうなので・・・。


ということで逆の路線の方がまだ簡単です。

レスポンシブ対応している、レイアウトが似ているものに、CSSを追加して
Pink Pharmacy風にしていますという方法です。こちらの方が難易度は低いです。


公式のレスポンシブデザインのテーマ

・Evergreen
・Journal-Pink
・B!KUMA
・Reach
・Terminal <=これ

レイアウトが一緒なのは最後当たりなのですが、
予想では厳しそう。



非公式のレスポンシブデザイン

Blank - テーマ ストア
http://blog.hatena.ne.jp/-/store/theme/8454420450091363061


たとえばカスタマイズ前提のスケルトン状態のテーマを使うとCSS追加でそれらしくなるかもと思います。

Pink Pharmacyらしさって、
タイトルの部分、記事タイトルなどの装飾だと思うので、その部分のCSSをコピペして
追加していくだけで、それっぽくなるのでは?

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません