CHIBICO.JP by May Fushimi

デザイナーふしみまいの好奇心を書き散らしております

WEB&DTP

【アメブロカスタマイズ】 引用枠の追加とアレンジの方法

投稿日:2015年2月3日 更新日:

Bookmark this on Google Bookmarks
Pocket
LINEで送る

ごきげんよう、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表示で書くのを忘れずに!

するとこんな風に表示されます↓(緑の枠のところ)

150203

 

ちなみに、こちらのブログ(WordPressで適当に拾ってきたテーマを編集して使ってます)で同じblockquoteを使うとこんな表示に↓

CHIBICOふしみまい、アメブロのカスタマイズ代行&その後の更新方法をざっくりわかりやすくお教えするサービスしております。
元大手企業でSEO担当などもしておりまして、アクセスを上げる裏技なんかも知るコトができたりして♪

背景や枠の色やスタイルを工夫すれば、いろいろできます。
線を横だけにつけたり、太くしたり実線にしたり背景に画像を貼ったり。
ここではやってませんが、枠の中だけ文字を少し変える、とかもできます。

みなさんが主に変えたいのは色でしょうか?6桁の数字で表現する色はわけわからないですよね?
ふしみはWEB屋だったので、セーフカラーなら数字見ただけでだいたいの色の見当がつきますが、そんな変態になる必要はありませんw
「WEBカラー」「WEBセーフカラー」で検索していただければ、親切な色見本サイトが山ほど出てきますのでぜひ。

その他線の変え方など詳しくは「CSS」「blockquote」「カスタマイズ」あたりでググればいろいろ出てきます。
やり始めると、けっこう楽しいですよ。本業の時間をつぶさない程度にどうぞ♪

ところで、<blockquote>は元々、「引用」のためのタグであって「告知」のための枠ではないのですよ。
そこは一応頭に入れておいてください。

イヤイヤイヤ、引用とか告知とかの前にそもそも「CSS編集」がどこにあるかもわかんないし。。。
HTML全然わかんないし。。。というあなた。

では、もうちょっと簡単な方法をご紹介するので、次の更新でお会いしましょう〜。

Bookmark this on Google Bookmarks
Pocket
LINEで送る

-WEB&DTP

執筆者:

関連記事

セクシーカプ様

個人のためのSEO対策、具体的な方法【内側から2】

あられもないお姿のカプ様 先日のカプ様写真がなぜか好評だったので、さらに過激なお姿のカプ様写真を無駄に載せてみました。 ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 写真と本文はびっく …

【ブログ診断】船橋の似顔絵屋さんSmileWorks[2]

ごきげんよう、CHIBICOふしみまいです。 前回、SmileWorksさんの始めたばかりのブログにアドバイスさせていただいたお話をしました。 その続きです。 現在のブログの様子はこちら↓ 一つ前の記 …

インターネットに自分の写真を載せるのは危険!?

ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 先日、久しぶりにセミナーというものに出席いたしました。 とっても意義ある内容で、早速ブログの内容など変更したり、いろいろと工夫をはじめてい …

2年前のカプ様シェクシー写真

iMacが逝ってしまいました。クラウドのありがたさを実感しております

前回の更新から気付けば1ヶ月以上も経ってるんですね! 何をやってるんだか。。。CHIBICOふしみまいです、ごきげんよう。 タイトルの通り、メインで使っていたiMacが逝ってしまいました。 突然うんと …

超初心者向けお客の集まるブログの作り方#2:ブログのタイトルを設定

さて、前回からすごーく時間が空いてしまいましたが。 ブログを始めたみなさん、すでにブログを続けているみなさん、 どんなブログタイトルにしていますか? 10〜15年ほど前、ブログが集客に役立つぞって言わ …

CHIBICO.JP

スポンサーリンク

instagram

2017年11月
« 10月    
 12345
6789101112
13141516171819
20212223242526
27282930