AAAをお探しの方のための専門サイト

[広告] 楽天市場

  • DVD>AAA 10th Anniversary!ULTRA BEST LIVE (<DVD>) [ AAA ]
  • AAA ARENA TOUR 2014 GOLD SYMPHONY【Blu-ray】 [ AAA ]
  • AAA 5th Anniversary LIVE 20100912 at Yokohama Arena [ AAA ]
  • AAA TOUR 2013 Eighth Wonder【Blu-ray】 [ AAA ]
  • AAA/AAA 10th ANNIVERSARY BEST(DVD付)
  • 【送料無料】AAA ARENA TOUR 2014 -Gold Symphony-/AAA[DVD]【返品種別A】

AAAの一番の商品を楽天で探しましょう、お気に入りの品のひとつになる商品です

寝付けなくて、やっと眠りかけた頃の地震(というかエリアメール)で、眠れなくなってしまって…

ブログ書き始めました😅
先週末は、かなりのハードスケジュールで、遊びまくり…まだ、疲れが抜けきれてない…😁
12月1日…
AAAに…
チケット代、グッズ購入費が、多少なりとも、役にたてたらいいな…という思いと、豪華な出演者に、心ウキウキ…😊
翌日…
12月2日…
原宿(表参道?)にて…
PABLOにて、クリスマス限定メニュー…😍
その後…お茶のいろは…初体験❗
入場料がかかるから、ちょっと、様子見してたんですが…😅
お茶の飲み比べや、煎れ方…お茶菓子もついて、帰りはお土産で生茶❗貰って…
でも…500mlじゃなくて、ちょっと、不満…😤
そこから、帝国劇場😄
2万円のお弁当で話題の…朝陽の中で微笑んで💕
どちらかというと…ユーミンのコンサートで、バックダンサーならぬバックアクター…?って、感じ…
ストーリーは、簡潔で、わかりやすくて、観やすい舞台ではありましたが…
その後の予定が、詰まっている私としては…「この歌が無ければ…3時間15分もかからないのに…」😅
カーテンコールのさなか、劇場を飛び出し…
開演時間に、間に合わず…でしたが…
主役登場前には、なんとか席につけましたが…周りの方には、申し訳ないな…と、思いつつも、一安心…💦
髑髏城の七人 月 下弦…
声優の宮野真守さんの舞台って…どう?と、思いながら観ましたが…
悪くない…😍
今回…上弦、下弦の2チームでの公演…
どうしてもお互い比べられるから、ある意味、大変だろうな…
はたして…福士蒼汰くんは、どうなんだろう?
しかし…今回…本当にチケットがとれず…
やっととれた上弦の私の初日は…12月29日…まだ、だいぶ先…😔
髑髏城の七人…シリーズを重ねるごとに、上演時間延びてる気が…
月は…ほぼ4時間近く…(休憩込み)…夜公演は、かなり遅い時間になってしまいます…😨
とりあえず…この日は、機械の不具合なく上演されましたが…先日も、昼夜の公演が、中止になった日もあり…そういう日に、当たらない事を祈るばかり…
12月3日…
本当は…髑髏城の七人 月 上弦 を観たかったんですが…チケットとれず、断念…
そこで…六本木で行われた…
WOMAN EXPOへ…
神田うのさんの講演にも参加…
サンプル品も、沢山貰って、大満足で帰宅…😁
本当は、もう一講演、申込みしてたんですが…ちょっと、ハードスケジュールで、疲れてしまったので、早めに帰ってきてしまいました…😅
うのさんのあとは、池上彰さんの講演もあったりで、かなりの豪華な方々でした。申込みしてた講演も司会は高橋真麻さんだったんですがね…😒ちょっと、残念ではありましたが…😩
早いバスに変更したので…
双葉サービスエリアにて…
富士山🗻綺麗でした😍
PS.
東京タワーの夜景も良かったです…😁
豊洲市場が、予定通り移転してたら…この空き地…無かったのかな?と、思いつつ…

買い物のお悩み財布にやさしいAAA販売

こんにちは、パソコンワンポイントレッスン!パソコンインストラクターの川上です。

※追記
・iPhone(スマホ)から枠を作る方法はこちらをご覧くださいませ→『』
・出演情報のテンプレート枠はこちらをご覧くださいませ→『』

● アメブロ 記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い)

いつも私の記事をご覧になっていただいている(きっと…、多分…^^;)読者の方から、次のご質問をいただきました。

検索すれば分かる方法だとは思いますが、勇気をもって、リクエストしてもよろしいでしょうか?

強調したい記事を枠で囲む方法をお願いします!

機会があったらで結構です。
今度こそ!チャレンジしたいです。

★素直な自分を大切にするふわりまみ★さん

って・・・

↑↑↑このような枠のことですよね~^^!

囲い枠・囲み枠・枠囲いを使うと、記事内で目立たせることができますものね^^!

私も勇気をもって、お答えしたいと思います^^
ご質問ありがとうございます!

記事内に枠で囲む方法は

まず、この枠はどうやって作ったか、というと・・・

1.「ブログを書く」で「HTML表示」または「HTMLタグを表示」をクリックします。
(「タグ編集エディタ」の場合はそのまま)

※ご自分の利用しているエディタが何かがわからない場合は、こちらの記事『』をご参照くださいませ。)

■新エディタの場合

■標準エディタの場合
川上雄大のワンポイントレッスン
 
■タグ編集エディタの場合
川上雄大のワンポイントレッスン

■旧エディタの場合
川上雄大のワンポイントレッスン
(↑2017年5月8日をもって《旧エディタ》の利用は停止になります。→『』)

2.次のタグ(HTMLソース or HTMLタグ)をコピーします。

枠内の記事本文

<br>

3.「HTML表示」or「HTMLタグを表示」内で貼り付け(ペースト)します。
(「タグ編集エディタ」の場合はそのまま、貼り付けます)

4.「通常表示」or「タグの非表示」に切り替えて、「枠内の記事本文」を消して、本文を書きます。
(「タグ編集エディタ」の場合はそのまま、そこで編集します)

■新エディタの場合

■標準エディタの場合
川上雄大のワンポイントレッスン

■旧エディタの場合
川上雄大のワンポイントレッスン

すると、このようなピンク色の枠ができているはずです↓↓↓

枠内の記事本文

以上ですが、要は貼り付ける場所を間違えないことです!
([タグ編集エディタ]の場合は、そのままタグを貼り付けて編集します。)

その他の枠囲いのタグ

それから、枠囲いのタグをいくつか用意しておきますので、そのまま使いたいのがあれば、ご利用ください^^!

【むらさき(四角)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【むらさき(角丸)】

角を丸くするには、「border-radius: 10px;」を追加すればよいだけですので。
(ただし、角丸はIE8以前だと丸く見えませんのでご注意を!)
(角を丸くするのに、もっと万全を期したい方は下の補足1を)

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【ぴんく(四角)】

枠内の記事本文

枠内の
事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【ぴんく(角丸)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【みどり(四角)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【みどり(角丸)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【うすいグレー(四角)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>

【うすいグレー(四角)(影つき)

AAA;border: 2px dotted #CCCCCC;”>枠内の記事本文
AAA;border: 2px dotted #CCCCCC;”>枠内の記事本文

<br>


枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【うすいグレー(角丸)-1】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【うすいグレー(角丸)-2】

枠内の記事本文
枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


さらに、枠に影をつけたいのであれば、「box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓(ただし、IE8以前だと影は見えませんのでご注意を)

【ぴんく(角丸)(影つき)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>

※width:auto; と指定すれば、ブラウザ画面に合わせて横幅が変化するリキッドデザインにすることができます。


【うすいグレー(角丸)(影つき)】

AAA;”>枠内の記事本文

AAA;border: 2px dotted #CCCCCC;">枠内の記事本文&l
t;/div>

複数行ほしい方はこちら↓

AAA;border:2px dotted #CCCCCC;”>・1行目
・2行目
・3行目
・4行目
・5行目

<br>

※width:auto; と指定すれば、ブラウザ画面に合わせて横幅が変化するリキッドデザインにすることができます。


【うすいグレーに薄いピンクの線(四角)】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【うすいグレーに薄いピンクの線(角丸)】
(ただし、角丸はIE8以前だと丸く見えませんのでご注意を)

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【角丸の実線】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【角丸の二重線】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【角丸の点線】

枠内の記事本文

枠内の記事本文

<br>

複数行ほしい方はこちら↓

・1行目
・2行目
・3行目
・4行目
・5行目

<br>


【角丸の水色二重線(影つき)】

AAAAAA“>

タイトル

本文1
本文2
本文3

本文4
本文5

AAAAAA">

タイトル

本文1
本文2
本文3

本文4
本文5

<br>

One Point!
実線 → solid
点線 → dotted
破線 → dashed
二重線 → double
線なし → none


【ぴんく(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示↓)
川上雄大のワンポイントレッスン!
(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

AAA;">○○○
○○○
○○○
○○○
○○○

<br>


【ぴんく(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示↓)

川上雄大のワンポイントレッスン!
(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

AAA;">○○○
○○○
○○○
○○○○○○

<br>


【ぴんく(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示↓)

川上雄大のワンポイントレッスン!

(現在のブラウザ表示↓)

AAA;”>○○○
○○○
○○○
○○○
○○○

AAA;"> ○○○
○○○
○○○
○○○
○○○

<br>


【水色(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示・・・IE10以降)
川上雄大のワンポイントレッスン!

(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

AAA;">○○○
○○○
○○○
○○○
○○○

<br>

(背景をグラデーションにしたい場合は、こちらをご参照くださいませ。)


【枠の見出し付(フィールドセット枠)】

◆枠の見出し1)枠内の記事本文1
2)枠内の記事本文2
3)枠内の記事本文3

<fieldset><legend><strong>◆枠の見出し</strong></legend>1)枠内の記事本文1<br>2)枠内の記事本文2<br>3)枠内の記事本文3</fieldset><br>

枠線を変えるにはこちらをご覧ください↓

【注意!】
この<fieldset>タグには1つ注意点があります。
それはケータイやスマホ(モバイル版)では機能しないということです。(スマホもパソコン版なら大丈夫ですが…)

今この記事をケータイやスマホ(モバイル版)で見ているのであれば、上記の「◆枠の見出し」の部分は囲まれてませんよね。
記事内に<fieldset>タグを使って枠を表示すると、パソコンでは枠がきれいに表示されますが、ケータイやスマホ(モバイル版)から見ると枠なしになります。

ご自分のお好きな色を

あとは、ご自分のお好きな色で枠を作るといいですね^^

当ブログでも色関係の記事があります↓

この記事も参考にして!

(ちなみに、この↑↑↑見出しのタグは・・・

この記事も参考にして!

<br>

・・・になります。)

実はすでに、「この記事内に枠で囲む方法」を書いている方がいらっしゃいます。

ほんとに、たくさんたくさ~んいらっしゃると思います・・・

その中で、いつもご紹介していただいたり、コメントをしていただたり、とお世話になっている方の記事をご覧になってみてください。参考になりますので!

それは・・・

読まれるブログの育て方:西川先生の

になります。

<追記1>
この記事を
アメブロ × WordPressで成果を出す! | あめつくさんがご紹介していただいています。
↓ ↓ ↓

<補足1>
角を丸くするのに、「border-radius」を追加するだけでよい、と書きましたが、

-webkit-border-radius: 10px;  /* Safari,Google Chrome用に */
-moz-border-radius: 10px;      /* Firefox12まで */
border-radius: 10px;           /* Firefox13以降 */

と万全を期して、

【ぴんく(角丸)】

枠内の記事本文

枠内の記事本文

<br>

を使用してもOKですね!

<参考>
枠囲いの具体的な使い方はこちらの記事をご参照くださいませ。


また、このような↓見出し付きの囲い枠を作りたい方は

■タイトルはこちら■

本文はこちら!
改行後の本文はこちら(ここは削除してください。)

見出しその1
本文記事1
本文記事2
本文記事3

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)

 
(↑クリックすると記事に飛びます。)

 
(↑クリックすると記事に飛びます。)

 

■タイトル■

【見出し1】
本文1

【見出し2】
本文2

【見出し3】
本文3

<フェイスブックの青(Facebook Blue)の背景色(色コード #3b5998、RGB(59,89,152))>

こちらの記事をご覧ください↓


そうそう・・・

この囲み枠、囲い枠を使って、記事下に定型文を挿入したい、という方はこちらの記事をご参照くださいませ↓↓↓

<追記2>
需要あるかわかりませんが・・・
このようなレインボー囲み枠をやってみたい方はこちらになります^^
(IE10以降で有効)

(画像表示↓)

川上雄大のワンポイントレッスン!

(現在のブラウザ表示↓)

AAA;”>○○○
○○○
○○○
○○○
○○○

AAA;">○○○
○○○
○○○
○○○
○○○

<br>

『』

<追記3>
ちなみに、ソース(HTMLタグ)を囲っている枠は

ここにソースを入力

こちら↑になります。

<追記4(2014.11.26)>
この囲み枠の幅を狭くしたり、中央に配置したりするにはこちらの記事をご覧くださいませ↓↓↓

『』

<追記5(2015.10.24)>
あ、あとこんな枠もあんな枠もあります~~

『』

『』

<追記6(2016.12.20)>
『』

以上、アメブロ便利ワザでした。

LIDS札幌・ライフデザインスクール
川上 雄大

|||

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中