アメブロの新しく追加されたデザイン（見出し）を左寄せにする方法

『やさしいブログの作り方』の松田です。

先月、アメブロのパソコン版に登場した「デザイン（見出し）」という項目。

画像フォルダの上に出てくるのですが、これまで囲み枠や見出しはHTMLタグをコピペするなどしないと記事に反映する事ができませんでした。

これがボタン一つで記事に反映させる事ができますので非常に便利になりました＾＾

私のHTMLタグをたくさん掲載した過去記事もようやく引退です（笑）

ただ、このデザインはスマホから見た時に最適化しているようで、文字も枠も基本的に中央寄せするようになっています。

なので、そのままつかうとパソコンで見た時に左右に妙な隙間ができます。

これを左寄せにする方法をご紹介します。

まずは記事に表示させたい枠を表示させて記事編集スペースの下にある「HTML表示」タブをクリックします。

するとこのようなHTMLタグが出てきます。

<div class="wa06_block" data-entrydesign-count-input="part" data-entrydesign-part="wa06_block" data-entrydesign-tag="div" data-entrydesign-type="block" data-entrydesign-ver="1.49.3" style="position:relative;width:343px;max-width:100%;margin:32px auto;color:#333;text-align:center"><span class="amp-nodisplay" contenteditable="false" role="presentation" style="position:absolute;box-sizing:border-box;top:-24px;display:block;width:100%;font-size:0;height:24px;border-bottom:24px solid #f7f7f7;border-left:24px solid transparent">&nbsp;</span><span class="amp-nodisplay" contenteditable="false" role="presentation" style="position:absolute;top:0;left:0;display:block;width:2px;height:46px;background-color:#CACACA;transform:rotate(45deg) translate(-17px, -32px)">&nbsp;</span><span class="amp-nodisplay" contenteditable="false" role="presentation" style="position:absolute;box-sizing:border-box;bottom:-24px;display:block;width:100%;font-size:0;height:24px;border-top:24px solid #f7f7f7;border-right:24px solid transparent">&nbsp;</span><span class="amp-nodisplay" contenteditable="false" role="presentation" style="position:absolute;bottom:0;right:0;display:block;width:2px;height:46px;background-color:#CACACA;transform:rotate(45deg) translate(17px, 32px)">&nbsp;</span>
<div data-entrydesign-content="" style="padding:4px 8px;background-color:#f7f7f7;font-size:16px;line-height:1.4;min-height:22px;line-break:anywhere">
<p style="background-color:transparent">テキストを入力</p></div></div>

上記のタグの中にある赤太文字の部分のautoを削除したのち、通常表示タブをクリックして元の編集画面に戻します。

そうすると、

このように囲み枠を左寄せできます。

なお、枠内のテキスト部分は、テキスト部分を範囲指定したのち、編集画面上部にある左揃えボタンをクリックすれば左寄せになります。

最後までお読みいただきありがとうございました。