レスポンシブデザインテンプレート導入♪
当ブログにお立ち寄り頂き、毎度ありがとうございます。
GW働いた分、終盤から少しお休みを頂いてます。
今日もお休みでしたが、
平日で子どもは学校、奥さんはバイト。
そこで今日は、1日ブログをいじっておりました。
というのも、お気に入りに登録させて頂いてる
ediさんのブログでこんな記事を拝見したから。
ediさんが公開された
「レスポンシブデザインテンプレート」を導入させて頂き、
ブログのデザインを変更してみました♪
<before>

<after>

レスポンシブデザインテンプレートとは、
簡単にいえば、ひとつのテンプレートで
パソコンでもタブレットでもスマホでも
同じデザインでそれぞれの端末に最適化された画面で
ブログを見られるというもの、だそうです。
これまで自分のブログをiPhoneやiPadで見る時に
スマホやタブレット用の表示になるのを
煩わしく感じていたので、
「これだ!」とビビッと来た次第です。
<iPhoneで縦表示>

ちょっと分かりにくいですがiPhoneで縦表示した場合でも
同じデザインが踏襲されています。
iPadの横表示ならほぼPCと同じレイアウトで
見れる感じでしょうか。
ずーっとブログのカスタマイズをしたいなと
思っていたのですが、
スキルも根気もないわたし(^_^;)
でも、これを機にトップ画像の変更もトライしてみました。
いろいろやり始めると楽しいものですね(^^)
自分にもできたくらいなので、
ediさんの公開されたテンプレートは
導入しやすいと思いますが、
使用はあくまで自己責任でお願いしますね(^_^;)
ediさん、とっても使いやすいテンプレートの作成&公開、
ありがとうございますm(_ _)m
ということで、終わりです。
この記事へのコメント
こんばんわ。
テンプレートのご利用ありがとうございますっ!
おっと、すでにヘッダー画像変えられているじゃないですか。
結構簡単でしょ^^
ヘッダー画像はAMEをイメージされているんでしょうか。
あと、補足ですが1行ごとに改行を挟んでらっしゃいますがスタイルシートの
/*記事内容*/
.blogbody{
margin:0.8em 0 3em 0;
}
.main{
line-height:1.3em;
の
line-hight:1.3em;
を2emに変更すると、1回の改行で1行分のスペースが空きますよ。
ご参考までに!
テンプレートのご利用ありがとうございますっ!
おっと、すでにヘッダー画像変えられているじゃないですか。
結構簡単でしょ^^
ヘッダー画像はAMEをイメージされているんでしょうか。
あと、補足ですが1行ごとに改行を挟んでらっしゃいますがスタイルシートの
/*記事内容*/
.blogbody{
margin:0.8em 0 3em 0;
}
.main{
line-height:1.3em;
の
line-hight:1.3em;
を2emに変更すると、1回の改行で1行分のスペースが空きますよ。
ご参考までに!
連コメスイマセン。
よく見たらブログタイトルにテキストシャドウかけられてますね。
もしかして、Ameさんスタイルシートに詳しい方ですか?
よく見たらブログタイトルにテキストシャドウかけられてますね。
もしかして、Ameさんスタイルシートに詳しい方ですか?
☂ediさん
こんばんは!コメントありがとうございます。
おかげさまでまったく初めての自分でも
素敵なカスタマイズができました!
ありがとうございます(^^)
ヘッダー画像がAME…、
言われて気付きました(笑)。
改行の件もアドバイスありがとうございます!
今度やってみますね(^^)
テキストシャドウはいろいろネットで調べて
やってみました。
スタイルシートをいじったのは
まったくの初めてですので、怖々作業してました(^_^;)
こんばんは!コメントありがとうございます。
おかげさまでまったく初めての自分でも
素敵なカスタマイズができました!
ありがとうございます(^^)
ヘッダー画像がAME…、
言われて気付きました(笑)。
改行の件もアドバイスありがとうございます!
今度やってみますね(^^)
テキストシャドウはいろいろネットで調べて
やってみました。
スタイルシートをいじったのは
まったくの初めてですので、怖々作業してました(^_^;)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。