Bloggerにはいくつかテンプレートがありますが、レスポンシブデザインに対応したものがなくて困りました。
まぁ自分でその辺は対応すればいいかと思ったんですが、検索してヒットするものはどれもごてごてしてしたテンプレートだったりとか、再編集を禁じたものとかばかりで…（当然といえば当然ですが)
デザインは自分でやりたい性なので、最低限レスポンシブデザインに対応しているテンプレートが欲しかったのですが、なかなか見つからなかったので自分で作りました。
配布もしているので、ネットに落ちてるテンプレートが気に食わない方やデザインを一からやってみたい方はどうぞご自由にお使いください。
配布もしているので、ネットに落ちてるテンプレートが気に食わない方やデザインを一からやってみたい方はどうぞご自由にお使いください。
作成するにあたり、以下のことを意識して作りました。
- レスポンシブデザインに対応すること。
- 余計な装飾はすべてなくし、あとから自分で調整できること。
- Bloggerの独自タグを極力使わないこと。
一つ目は今回の目的なのでいいとして、
二つ目は各要素のClassとかIDとか最小限にとどめて、デザインはあとから自分で調整したかったからです。
CSSやJavaScriptには触ったことがあるので、配布してあるテンプレートをビクビクしながらいじるよりは全部自分でやったほうが気楽だし、何よりもそのほうが楽しい勉強になるからです。
三つ目に関しては、最低限sectionやwidgetを記入しておけば、Bloggerにアップロードする際に補完してくれるからです。
コードは見やすいほうが断然いいですからね。
作った
できたコードがこれになります。
適応するとページはこんな感じになります。
デザインもクソもありませんが、ブラウザの幅を縮めるとこんな感じになります。
画面幅を縮めた状態と同じですね。画面幅が広いとオレンジで囲んだところが右側に来ます。
一つ目の画像では右にあったラベル等のウィジェットが下に移動しています。
レスポンシブですね。
ちなみにレイアウト画面はこうなります。
その後
レスポンシブデザインに対応したので、あとはCSSとか使って自由にデザインしてください。
ClassとかIDとかはデベロッパーツール使うなりなんなりで確認するといいと思います。
ちなみに、このファイルをアップロードしたあと、バックアップをエクスポートすると、Blogger独自のタグ等が追記された状態でエクスポートされるので、そのへんに詳しい人はそちらを編集したほうが捗ると思います。
また、デザイン以外のところ（各記事にソーシャルボタン配置など）に手を加える場合はHTMLを編集するか、一度エクスポートしたxmlを編集する必要があります。
テンプレートをダウンロード
また、デザイン以外のところ（各記事にソーシャルボタン配置など）に手を加える場合はHTMLを編集するか、一度エクスポートしたxmlを編集する必要があります。
テンプレートをダウンロード
0 件のコメント:
コメントを投稿