ごきげんよう、CHIBICOふしみまいです。
先ほどアメブロで更新しましたが、長過ぎるので2回にわけます。
その代わりこちらでは詳しく。
先日、アメブロをカスタマイズしてグローバルナビを追加する方法をお伝えしました。
そんなに難しくないはずなので、がんばればできちゃうハズ！
なんだか好評いただいているので、きちんとしたわかりやすいメニューにして、
低価格でカスタマイズするサービスにしよかと思います。
とはいえ、自分でできる方はどんどんチャレンジを♪
わたくしは、どうしてもできない方、ブログのカスタマイズに時間を割くくらいなら本業に邁進したい方向けにサービスを発信しております。
アメブロカスタマイズをリクエストいただいたあるサロネーゼの方よりこんな質問
「私のブログへのアクセスの4割はスマホから。
ヘッダー画像やグローバルメニューをどれだけ工夫して凝っても表示されないのであまり意味がないのです。
だから、スマホでも表示される、本文中の文章に枠をつける方法が知りたい。」
すっばらしぃー！
これを聞いた時、ちょっと震えました。
彼女の何がすばらしいって、
- ちゃんと自分のブログのアクセスを解析していること
- WEB屋でもないのに、アメブロのブログデザインがユーザー的にレスポンシブルでないことを肌で理解していること
- 何よりもお客様目線
レスポンシブルデザインというのは、パソコンでもスマホでもタブレットでも、見るデバイスに合わせて勝手に最適化してくれるデザインのことです。多くの無料ブログサービスで提供されていますが、何故かアメブロ様にはユーザの立場からするとありませんねw（ほんとはあるのかな？）
今ご覧いただいている、こちらがレスポンシブルデザインの例です。
試しに、パソコン、タブレット、スマホなど見る媒体を変えて見てみてください。
デザインに統一感があるはずです。
※手前ミソで申し訳ないです。あと、別に自分でデザインしたわけじゃないです。WordPressならこの手のおしゃれデザインはごろごろ転がってます。
とにかく、アメブロには良さもあるけれど弱さもあって、自分でそこに気がつくってすばらしいことだと思います。
そんな風に考えられる人のところでサービスを受けたいなぁって自然と思いました。
というわけで、
CSSをいじって引用枠をつくる方法（少し上級編）
CSSって一体何？という方もいらっしゃると思いますが、わからなくても枠はつくれますのであまり気にせず。
デザインをいじれる呪文みたいなものです。
CSS編集で、以下をまんまコピー＆ペーストして貼っちゃってください。
※「CSS編集用デザイン」を使っている前提です。
（デザインの変更→適用中のデザイン：CSS編集用デザイン→CSSの編集）
blockquote{
margin:7px; /* ←記事のと枠の余白 */
padding:10px; /* ←枠と枠の中に書く文章の余白 */
background:#f6fde8; /* ←背景色 */
border:2px dotted #66CC00; /* ←枠線の太さ、種類、色 */
}
そして、記事を書く時に枠の中に入れたい文章を<blockquote></blockquote>ではさみます。
HTML表示で書くのを忘れずに！
するとこんな風に表示されます↓（緑の枠のところ）
ちなみに、こちらのブログ（WordPressで適当に拾ってきたテーマを編集して使ってます）で同じblockquoteを使うとこんな表示に↓
CHIBICOふしみまい、アメブロのカスタマイズ代行＆その後の更新方法をざっくりわかりやすくお教えするサービスしております。
元大手企業でSEO担当などもしておりまして、アクセスを上げる裏技なんかも知るコトができたりして♪
背景や枠の色やスタイルを工夫すれば、いろいろできます。
線を横だけにつけたり、太くしたり実線にしたり背景に画像を貼ったり。
ここではやってませんが、枠の中だけ文字を少し変える、とかもできます。
みなさんが主に変えたいのは色でしょうか？6桁の数字で表現する色はわけわからないですよね？
ふしみはWEB屋だったので、セーフカラーなら数字見ただけでだいたいの色の見当がつきますが、そんな変態になる必要はありませんw
「WEBカラー」「WEBセーフカラー」で検索していただければ、親切な色見本サイトが山ほど出てきますのでぜひ。
その他線の変え方など詳しくは「CSS」「blockquote」「カスタマイズ」あたりでググればいろいろ出てきます。
やり始めると、けっこう楽しいですよ。本業の時間をつぶさない程度にどうぞ♪
ところで、<blockquote>は元々、「引用」のためのタグであって「告知」のための枠ではないのですよ。
そこは一応頭に入れておいてください。
イヤイヤイヤ、引用とか告知とかの前にそもそも「CSS編集」がどこにあるかもわかんないし。。。
HTML全然わかんないし。。。というあなた。
では、もうちょっと簡単な方法をご紹介するので、次の更新でお会いしましょう〜。
