どうも！こっそりアイキャッチの雰囲気を変えていってるフジグチです！
過去記事で定型文を利用した囲み枠のカスタマイズの記事を出したのですが、当ブログの中ではアクセスやブックマーク数が多い記事となっています。▼
はてな記法やMarkdown記法でも使えますが、やはり【見たまま編集】で記事を書いている方が多いのでしょうか？
メインブログでも利用していて、多くの方々にも使って頂いているようなので囲み枠だけじゃなく、定型文に登録するだけで見たまま編集で使える便利なあれこれを作ってみた（使っていた）のでご紹介したいと思います。もちろんコピペＯＫです！
この記事のメリット･デメリット
まずこのコードを使う上でのメリットとデメリットを挙げておきます。
- コピーして定型文に登録するだけですぐ使えるのでCSSやHTMLをいじる必要がない
- 見たまま編集上にデザインが表示されるのでプレビューを確認する手間が減る
- テーマを変更してもデザインが崩れない（未確認）
やはりコピーして登録するだけの２ステップで使えるのと、見たまま編集上に表示されてプレビューを確認する手間が減るのが最大のメリットだと思います。
またCSSやHTMLが苦手だと【CSSをいじる際はバックアップを取らなければいけない】【間違って余計な部分を消してしまいデザインが崩れないか？】という心配事がなくなるのではないかと思います。
あっ、【使う際は自己責任でお願いします】は無くなりませんのでよろしくお願いします。（笑）
- 編集中削除したい時に消しづらいことがある
- HTMLの表記が長くなり見づらい
- デザインを変更したくなった時は記事毎に一つずつ変えなくてはならない
編集中に削除したくなった時に、見たまま編集上で消そうとすると消しづらいことがあります。
backspaceキーやdeleteキーを押せば消えるのですが、見たまま編集上では消えたようでもHTML上には<div>タグ等が残っている場合があり、そのまま書き続けるのは記述上あまり良くありません。
間違えた時はctrl+Z（Macはcommand+Z）で戻るかHTML編集で消すというのが間違いないと思います。
なので出来るだけ途中で削除しないようにしましょう（笑）
登録時の注意点
以前の記事と重複しますが、このコードを使う上で守って頂きたいことがあります。
- <p></p>タグは消さない
- あらかじめ入力されているテキストは消さない
- テキストの変更はＯＫ！
１．<p></p>タグをつけずに使用すると、枠内から出られなくなり新しい段落を作れなくなります。見たまま編集だけでは直せなくなるので忘れずに<p></p>タグまでコピーして下さい。
２．今回のコードにはあらかじめ「会話」や「説明」など何らかのテキストが表示されるようになっています。これは見たまま編集で入力しやすくするためなので、使用する際に消して下さい。
３．消すのはダメですが文字数を少なくしたり、自分の分かりやすい言葉に直して登録するのは大丈夫です。
登録の仕方
サイドバーに定型文貼り付け機能を表示させる
サイドバーの「」を押し「定型文貼り付け」をONにする。
これでサイドバーに定型文貼り付け機能を表示させることが出来ます。
コードの登録
次にコードの登録の仕方です。
始めに枠内のコードをコピーしておきます。
次に「 」アイコンをクリックして「定型文を作成する」
覚えやすいタイトルを付けて枠内にコードを貼り付ける。
登録は以上になります。
定型文の使用の仕方
- デザインが崩れるので改行はshift+enter
- 枠外に出たい時はマウスか矢印キー
- デザインを変えたくなった時は記事毎に変更する
見たまま編集で使えるコード
画像を並べて表示する
<div style="display: flex; text-align: center; align-items: center; max-width: 100%; margin-top: 10px; margin-bottom: 10px;">
<div style="margin-right: 10px; flex: 1 1 0;">１枚目</div>
<div style="margin-right: 0; flex: 1 1 0;">２枚目</div>
</div>
<p></p>
記事内で画像を２枚並べて表示することが出来ます。縦横比が同じような画像を使うときれいに揃います。
「１枚目」のテキストを選択し、サイドバーの「 」アイコンをクリックして画像を挿入する。２枚目も手順は同じです。
画像の高さ方向の揃え位置を変えたい場合は１行目の<div>内にあるalign-items:「center」;の部分を以下のように変えます。
上揃え ⇒ flex-start
下揃え ⇒ flex-end
画像を２枚並べて説明文を付ける
<div style="display: flex; max-width: 100%; text-align: center; margin-top: 10px; margin-bottom: 10px;">
<div style="margin-right: 10px; margin-bottom: 0; flex: 1 1 0;">
<p>１枚目</p>
<div style="font-size: 80%; margin-top: -.8em;">説明文</div>
</div>
<div style="margin-right: 0; margin-bottom: 0; flex: 1 1 0;">
<p>２枚目</p>
<div style="font-size: 80%; margin-top: -.8em;">説明文</div>
</div>
</div>
<p></p>
説明文を一言だけでシンプルにまとめる場合は、テキストを中央寄せにするといいかもしれません。
１行目の<div>内にあるtext-align: 「left」;の部分をcenterに変えてください。
吹き出しを付ける
さっきからちょいちょい出てくるこの吹き出しも使えます。
この記事の流れ上「」でくくった会話形式ではテンポが悪く感じ吹き出しを付けることにしました。
普段は使うつもりはなかったのでデザインCSSには登録せず、この記事内のみで使えるようにと思い作ってみたのですが、、、
※連続して吹き出しを並べる場合は吹き出し同士の間に段落が一つ挿入されてしまうようなので、余白が気になる方は吹き出し間の余白にカーソルを合わせ、backspaceキーやdeleteキーで消してください。
吹き出しのコード
こちらのコードは登録する際にコピペ以外にも作業が必要です。
吹き出しに使う画像を用意し、画像のURLを取得する
あまり重くならないように200×200以下の正方形の画像を用意しましょう。
画像URLの取得の仕方は、「はてなフォトライフ」⇒「アップロード」⇒「アップロードした画像の上で右クリック」⇒「画像アドレスをコピー」で取得できます。
もしくは使いたい画像を見たまま編集で記事に貼り付け、HTML編集に切り替え<img src="～～～">の「""」に挟まれた中の部分がURLなので、そこから取得することも出来ます。
取得したらここに画像のURLを入れるの部分にコピーしたURLを貼り付けてください。必ず「””」で挟まれていることを確認してください。
アイコン下の名前を入力する
ここに名前を入れるの部分を書き換えてください。名前が不要の場合は<!--ここから-->～～～<!--ここまで-->の部分を消してください。
吹き出し背景色をデザインに合わせて変更する
<!--吹き出し内背景色-->というコメントアウトの手前にある、＃から始まる６桁の数字がカラーコードです。ご自身のブログのデザインに合わせてカラーコードを変更してください。こちらのサイトが参考になります。
現状コードは右側画像時の背景色になっています。
まずは左側に画像が表示される吹き出しです▽
<div style="width: 100%;
height: auto;
margin-bottom: 20px;
display: table;">
<div style=" text-align: center;
display: table-cell;
width: 80px;
vertical-align: middle;">
<span><img src="ここに画像のURLを入れる" style=" border-radius: 50%;
border: 1px solid #ccc;
margin-bottom: 5px;"></span>
<!--ここから--><div style=" color: #616161;
font-size: 70%;
line-height: 1.5;
max-width: 80px;">ここに名前を入れる</div><!--ここまで--></div>
<div style="display: table-cell;
margin: 0;
vertical-align: middle;
text-align: left;"><div style="font-size: 15px;
line-height: 26px; display: inline-block;
padding: 15px 20px;
margin-left: 20px;
border-radius: 7px;
position: relative;
background-color: #fffcc2;"><!--吹き出し内背景色-->会話<span style=" position: absolute;
top: 50%;
left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #fffcc2 transparent transparent;"><!--吹き出し内背景色--> </span></div></div>
</div>
</div>
<p></p>
続いて右側に画像が表示される吹き出しです▽
<div style="width: 100%;
height: auto;
margin-bottom: 20px;
display: table;">
<div style="display: table-cell;
margin: 0;
vertical-align: middle;
text-align: right;">
<div style="font-size: 15px;
line-height: 26px;
display: inline-block;
padding: 15px 20px;
margin-right: 20px;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-radius: 7px;
position: relative;
text-align: left;
background-color: #fffcc2;"><!--吹き出し内背景色-->
会話<span style=" position: absolute;
top: 50%;
right: -10px;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #fffcc2;"><!--吹き出し内背景色--> </span></div>
</div>
<div style=" text-align: center;
display: table-cell;
width: 80px;
vertical-align: middle;">
<span><img src="ここに画像のURLを入れる" style="border-radius: 50%;
border: 1px solid #ccc;
margin-bottom: 5px;"></span>
<!--ここから--><div style="color: #616161;
font-size: 70%;
max-width: 100%;
height: auto;
vertical-align: middle;
line-height: 1.5;
max-width: 80px;">ここに名前を入れる</div><!--ここまで--></div>
</div>
<p></p>
今回紹介するコードは以上です！
終わりに
見たまま編集を使っている方は、記事を書きながらデザインがある程度確認出来るので執筆がスムーズに進むと思います。
以前上げた記事の囲み枠のコードも使ってみて下さい。
応用するとこんなリンクも簡単に作れちゃいます。自分オリジナルのデザインを作ってみるのもいいですね。
ですがあまり乱用するとHTMLを見たときにビックリするかもしれないですね。
まっ、見ないからいいか！
最後までお読み頂きありがとうございました。
引用の範囲内でしたらコード転載OKです。ただしその場合は、引用元をリンク付きでご明記下さい。
