アメブロでインラインCSSを使って記事の本文を点線で囲む

8年前に投稿した「記事の本文を点線で囲む」について

最新版エディタで検証。

(1) 「HTML表示」に切り替え

(2) CSS記述を入れたHTMLタグを使って文字や文章を囲む

例）

<div style="border: dashed 3px #ff0000;">
記事本文
</div>

※例は 記事本文 の文字を3ピクセルの太さの赤い点線で囲む記述

↓↓↓実際の表示↓↓↓

記事本文

他の例。

<span style="background-color:#ffff00;">蛍光ペンのように黄色い背景色を入れる</span>

↓↓↓実際の表示↓↓↓

蛍光ペンのように黄色い背景色を入れる

<div style="width:50%; padding:10px; background-color:#ccffff; border-left:solid 5px #000099;">

記事幅の半分くらいの横幅で
付箋紙のような枠をつける
（左に濃い青の線を入れて枠内は水色）

</div>

↓↓↓実際の表示↓↓↓

記事幅の半分くらいの横幅で
付箋紙のような枠をつける
（左に濃い青の線を入れて枠内は水色）

NINJA TOOLSのプラグインを使う

アメブロにアクセス解析とアクセスカウンタを設置したい。

しかし、アメブロ独特の仕様？でどんな形でもOKというわけではない様子。



こういうときは、カスタマイズ検証ブログにあるまじき行為だけど楽して済まそう。



サイドバーの設定 ＞ プラグインの追加 で「プラグインリスト」の中から

忍者ツールズ アクセスカウンター または アクセスログ解析（ninja tools） を選択。

テキストボックス内に指定されたタグをコピー＆ペーストするだけで設定完了。

当然ながら、NINJA TOOLSのサービスを利用するので事前に忍者アクセス解析と忍者アクセスカウンターの利用設定を済ませておいて、解析タグをコピーできるようにしておく。

アメブロの方では、サイドバーの設置でブログに表示させることを忘れずに。

記事の本文を点線で囲む

アメブロで記事の本文を点線で囲むということにチャレンジ。

まず、ブログ表示ページ（どこでもOK）のHTMLソースを確認。
ソースの記事本文には、

＜div class="contents"＞
＜div class="subContents"＞

とスタイル設定されているようなので、
デザインの変更 ＞ スキンCSSの編集 でCSSの編集。
ソース全体をコピペしてテキストエディタなどで保存しておくのは必須。
むしろテキストエディタで保存するほうが編集しやすい。

早速テキストエディタに貼り付けたCSSから subContents を検索。
しかし、ヒットせず。 div タグで操作するしかないか。

<div style="border: dashed 3px #ff0000;">
記事本文
</div>

と、非常に単純なやり方で。
記事編集は、先に本文をすべて入力してから「HTMLタグを表示」に切り替えて上記のように入力。

結果はこんな感じ。

記事本文