忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金とDTMの話が多め

近未来的音楽素材屋3104式
↑音楽素材はこっち↑

とちにすいはら式+

忍者ブログにはレスポンシブ対応のテンプレって無いの?

1.はじめに

忍者ブログを簡単にレスポンシブ対応にするお話をご紹介。 忍者ブログでスマホ向けに独自デザインを表示する方法とご一緒にご覧ください。

なお、弊サイトでは、忍者ブログのスマホ向けデザインは広告が多く表示が重いことから、レスポンシブへのカスタマイズを推奨しています。 忍者ブログを利用した筆者ブログは全てレスポンシブで運用中です。

2.忍者ブログでレスポンシブ対応のテンプレって無いの?

レスポンシブにしろ、と言われても、あなたがHTMLやCSSになじみが無ければ難しい話ですよね。 それに対応した天ぷら・・・ではなくテンプレは配布されてないの?とお考えかもしれません。

もちろんありました

例えば、忍者ブログ公式さんが配布するまとめブログ用テンプレはレスポンシブ対応です。 また、はるのはな(桜)はるのはな(チューリップ)といった、一般ユーザーが投稿したデザインもレスポンシブに対応しています。

これらのテンプレは、ブログデザインのデザイン→テンプレートの検索から探すことが出来ます。

3.テンプレートがレスポンシブに対応しているかチェックする方法

テンプレートがレスポンシブに対応しているかチェックする方法は簡単です。 IEやクロームなどのブラウザでそのテンプレを表示させて、ウインドウの横幅を縮めたり広げたりするだけです。

レスポンシブ対応テンプレは、ある程度ウインドウの横幅を縮めると、ウインドウのサイズに応じてデザインが切り替わります

同じテンプレですが、幅を狭めることでデザインが変化します。

このとおり。

一方、未対応のテンプレは、横幅が縮まないために横スクロールバーが表示されるようになります。

上図の赤い枠の部分が横スクロールバーです。こういったものはレスポンシブではありません。

その他の方法として、該当テンプレのHTMLソース確認する方法もあります。ヘッダ部分に<meta name="viewport" content="initial-scale=1.0">といったviewport設定があればレスポンシブ対応、 無ければレスポンシブ未対応です。

4.あとはスマホの表示を切り替えるだけ

テンプレを選択し、自身の忍者ブログに反映させたら、あとはスマホ利用時の表示を変えるだけです。 このあたりは、忍者ブログでスマホ向けに独自デザインを表示する方法に書いています。

5.おわり

あとは、ちょっとデザインを変えたいなーと思ってHTMLやCSSなどをいじってると、だいたい仕組みがわかってくると思います。

関連記事

最終更新:2015/11/28

 

拍手[1回]

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント

トラックバック

スポンサーリンク

PR

ブログ内検索

記事書いてる人

運営者:
さいれほ@planet_f108
3104式の中の人。
音楽以外にはお金の話が好き。資産運用もやってるよ。


ついったー

お問い合わせフォーム

筆者の知識や経験であなたの力になれますか?

必要事項をご記入の上、送信ボタンをクリックすると、運営者宛にメールが送信されます。

ブログ内リンク

レビュー・改造系記事まとめリンク レビュー・改造系記事まとめリンク
PC・トイカメラなどのレビュー記事リストです。

DTM機材レビュー記事まとめリンク DTM機材レビュー記事まとめリンク
DTM機材に関するレビュー記事リストです。

クラブ関連記事まとめリンク集 クラブ関連記事まとめリンク集
音楽を流すクラブにいってきた話まとめ。

トラブル・お悩み解決系記事まとめリンク トラブル・お悩み解決系記事まとめリンク
ソフトのインストールなどで躓いた記事リストです。

サイト作り系まとめリンク サイト作り系まとめリンク
サイトのアクセス増、ユーザビリティに関する記事リストです。

忍者ブログカスタマイズまとめリンク 忍者ブログ運用術から収益化まで
忍者ブログ運用術から収益化までをまとめた記事リストです。

雅楽の舞改めポーチュラカリア成長記事まとめリンク 雅楽の舞改めポーチュラカリア成長記事まとめリンク
2011年から育てている雅楽の舞に関する記事リストです。

とちにすいはら式+アクセスアップ経過記録まとめリンク とちにすいはら式+アクセスアップ経過記録まとめリンク
本ブログのアクセス推移を記録した記事リストです。

お金持ち本まとめリンク お金持ち本まとめリンク
筆者が読んだお金持ち本あれこれまとめリンク。

無職関連の記事まとめリンク 無職関連の記事まとめリンク
無職関連の記事リストです。

スマホでUSENの記事まとめリンク スマホでUSENの記事まとめリンク
スマホで使える有線放送まとめ。データ量も測ってみました。

最新コメント

[11/14 管理人]
[11/11 鈴木隆夫]
[01/20 かんりにん]
[01/20 シモハチ]
[04/03 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

ブログ記事の著作権はとちにすいはら式+にあります。 引用される際には、必ず引用元として弊ブログのURLも記載していただくようお願いいたします。 記事の一部もしくは全ての無断転載はご遠慮ください。

記事を参考にされる際には、自己責任にてお願いいたします。