先日、アメブロをカスタマイズしてグローバルナビを追加する方法をお伝えしました。
そんなに難しくないはずなので、がんばればできちゃうハズ！
そして、アメブロカスタマイズをリクエストいただいたあるサロネーゼの方より、こんな質問も。
「私のブログへのアクセスの4割はスマホから。
ヘッダー画像やグローバルメニューをどれだけ工夫して凝ってもあまり意味がないのです。
だから、スマホでも表示される、本文中の文章に枠をつける方法が知りたい。」
すっばらしぃー！
彼女の何がすばらしいって、
レスポンシブルデザインというのは、パソコンでもスマホでもタブレットでも、見るデバイスに合わせて勝手に最適化されるデザインのことです。多くの無料ブログサービスで提供されていますが、何故かアメブロ様にはありませんねw（ほんとはあるのかな？）
レスポンシブルデザインなブログの例（※手前ミソで申し訳ないです。あと、別に自分でデザインしたわけじゃないです）
http://chibico.jp/
とにかく、自分でそこに気がつくってすばらしいことだと思います。
ご自分のブログと、それを読む読者の方の便利さを考えての発言だなぁ、と感動しました。
というわけで、
CSSをいじって引用枠をつくる方法（少し上級編）
CSSって一体何？という方もいらっしゃると思いますが、わからなくても枠はつくれますのであまり気にせず。デザインをいじれる呪文みたいなものです。CSS編集で、以下をまんまコピー＆ペーストして貼っちゃってください。
blockquote{
margin:7px; /* ←記事のと枠の余白 */
padding:10px; /* ←枠と枠の中に書く文章の余白 */
background:#f6fde8; /* ←背景色 */
border:2px dotted #66CC00; /* ←枠線の太さ、種類、色 */
}
そして、記事を書く時に枠の中に入れたい文章を<blockquote></blockquote>ではさみます。HTML表示で書くのを忘れずに！
するとこんな風に表示されます↓
CHIBICOふしみまい、アメブロのカスタマイズ代行＆その後の更新方法をざっくりわかりやすくお教えするサービスしております。
元大手企業でSEO担当などもしておりまして、アクセスを上げる裏技なんかも知るコトができたりして♪
背景や枠を工夫すれば、いろいろできます。線を横だけにつけたり、太くしたり実線にしたり背景に画像を貼ったり。ここではやってませんが、枠の中だけ文字を少し変える、とかもできます。
詳しくは「CSS」「blockquote」「カスタマイズ」あたりでググればいろいろ出てきます。
やり始めると、けっこう楽しいですよ。本業の時間をつぶさない程度にどうぞ♪
イヤ、そもそも「CSS編集」がどこにあるかもわかんないし。。。
というあなた。では、もうちょっと簡単な方法を。
Pタグで引用枠をつくる方法（慣れれば簡単編）
今のブログデザイン使い続けたいんです、とかCSSを下手にいじってレイアウト崩れたらどうしよう～とか
だからってお金出してふしみにカスタマイズお願いするほどでもありません、
という正直なアナタにはこちら。
<p>タグに直接要素を書き込んでしまう方法です。
<p>というのは段落を表すタグのことで、ひと段落まるごと飾ってしまえっというわけです。
方法は、記事を書く時に枠の中に入れたい文章を<p></p>で囲むだけ。
その<p>タグをあれこれ装飾して枠を飾ります。
下の例を参考に、タグ部分をまるまるコピーして貼ってみてください。
こちらももちろん、HTML表示で作業してください。
とりあえず線。背景に色のあるスタイルをお使いなら、枠内が白く塗られます。↓
<p style="background-color:#FFFFFF;border:1px solid #999999;padding:10px;">ここに書きたいこと書く。</p>
CHIBICOふしみまい、アメブロのカスタマイズ代行＆その後の更新方法をざっくりわかりやすくお教えするサービスしております。
元大手企業でSEO担当などもしておりまして、アクセスを上げる裏技なんかも知るコトができたりして♪
CHIBICOカラー。背景を薄いグリーン、線を濃いグリーンの破線に↓
<p style="background-color:#FFffcc;border:3px dotted #FF9900;padding:20px;">ここに書きたいこと書く。</p>
CHIBICOふしみまい、アメブロのカスタマイズ代行＆その後の更新方法をざっくりわかりやすくお教えするサービスしております。
元大手企業でSEO担当などもしておりまして、アクセスを上げる裏技なんかも知るコトができたりして♪
黄色系。線を太く、余白を広くしました。↓
<p style="background-color:#FFffcc;border:3px dotted #FF9900;padding:20px;">ここに書きたいこと書く。</p>
CHIBICOふしみまい、アメブロのカスタマイズ代行＆その後の更新方法をざっくりわかりやすくお教えするサービスしております。
元大手企業でSEO担当などもしておりまして、アクセスを上げる裏技なんかも知るコトができたりして♪
この方法のメリット
- ひとつの記事内でいろんな枠を使うことが簡単にできる
- 大本のCSSスタイルをいじらなくていいのでとっつきやすい
- 毎回タグを書かなくてはならず面倒
- コピペしていればよいが、毎回新しく書いたりすると統一感がなくなるおそれアリ
うーん、いろいろ聞いたけれどもそれでもむずかしそう。。。という方、もしよかったらふしみに頼んでみる、という手も考えてみてください。
人に任せてラクをする、というのもそれはそれで近道かもしれませんw