相互RSS最新記事



【ブログカスタマイズ】ライブドアブログで、アイコン付吹き出し会話形式記事を実現したよ♪【追記訂正版】

カスタマイズ, ブログ

こちらの記事は、以前にはてなブログからライブドアブログに移転した際に書いたものです。
WordPressへの移転に伴って、敢えて投稿時の原文のままにしています。
ただし、一部の実際の使用例部分を画像に差し替えている箇所や、CSS等のコード部分の表示に手を加えています。

廿六さ~ん、はてなブログからの移転作業お疲れさまです♪

うん、いろいろとはてなの運営には文句言いたいけど、もうどうでもいいから^^;

…(笑)、ですねですね♪

さて、記事の冒頭でいきなり会話形式で始めちゃったけど、実はライブドアブログだと制約があって、CSSに単純に手を加えて実現は出来ないんだよね~><

でも、わたしたち今、会話出来ていますけど…??

うん、だから今回は実装させるまでの方法を解説してみたいと思ったんだよ。

ほうほう、なるほどです♪

……他に何か言う事無いの?

???

まあ、あじゅぽんだし良いか(苦笑)

ん?

 

そんな訳で、簡単ではありますがライブドアブログで「アイコン付吹き出し会話形式記事」を実装する方法を解説します。

目次:

 

参考記事とCSS等の引用元

まずは、実装にあたっての「アイコン付吹き出し会話」のためのベースとなるCSSを紹介されているのが、はてなブログ時代に様々なカスタマイズでお世話になった、シロマティさんの下記の記事です。

記事内で紹介されているCSSに修正を加えたものを今回のカスタマイズでは使用しています。
この場を借りて感謝を申し上げます。
そして、ライブドアブログでの実装させる方法の参考にさせていただいたのが、赤ペソ先生の下記の記事です。

こちらの記事とその関連記事の実装方法を参考に、シロマティさんベースのCSSを利用して「アイコン付吹き出し会話形式記事」を実現しました。

 

CSSの準備

上記のシロマティさんの記事中に紹介されているCSSを、一旦メモ帳か何かにコピーして、自分の使用環境に合わせた書き換えを行ってから使用します。

 

具体的には…
【以下元CSS】
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: “”;
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: “”;
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
まずは、上記のCSSの「.entry-content」の部分を、全て「.article-body」に書き換えてください。
このクラス名の変更は、「.article-body」がライブドアブログ標準の記事本文内を示すクラス名のようです。これをしないと正常に表示されません。(自分もこれで苦戦しました^^;)
次にシロマティさんの記事中の記載の通り…
書き換えるのは一番下の「クラス名」の部分と「画像のURL」の部分です。
クラス名」には分かりやすく覚えやすい名前を付けて下さい。
クラス名で使用できる文字は、半角の英数字、ハイフン( – )、アンダーバー( _ )です。アルファベットで始めなければなりません。(数字や記号で始めてはならない)
固有名詞をアルファベットで書くのがおすすめかな。他とかぶらないから。
CSSの最後の部分の、アイコン画像指定部分をライブドアブログの「画像/ファイル」アップロード機能で、アイコン用に用意した画像をアップロードして、その画像のURLに書き換えます。
ここで指定する「クラス名」は登場させるキャラクター毎に覚えやすいものにすればOKです。
ちなみに、クラス名が重複しなければいくつでも増やすことが可能です。

 

当ブログで実際に修正して作成したCSSは下記のようになります。

【以下当ブログでのCSS】

/* 吹き出しのCSS */
.article-body .l-fuki,
.article-body .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.article-body .l-fuki {
margin: 20px 20% 40px 0;
}
.article-body .r-fuki {
margin: 20px 0 40px 19%;
}
.article-body .l-fuki::before,
.article-body .r-fuki::before {
position: absolute;
content: “”;
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.article-body .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.article-body .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.article-body .l-fuki::after,
.article-body .r-fuki::after {
position: absolute;
content: “”;
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.article-body .l-fuki::after {
right: -110px;
}
.article-body .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.article-body .l-fuki,
.article-body .r-fuki {
width: 70%
}
.article-body .l-fuki {
margin-right: 30%;
}
.article-body .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.article-body .l-fuki::after,
.article-body .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.article-body .l-fuki::after {
right: -84px;
}
.article-body .r-fuki::after {
left: -84px;
}
}
.ajyupon01::after {background-image:url(http://livedoor.blogimg.jp/uzuki9071/imgs/f/a/fa66596f.jpg);}
.uzuki01::after {background-image:url(http://livedoor.blogimg.jp/uzuki9071/imgs/2/e/2ecb48e2.jpg);}
.doku01::after {background-image:url(http://livedoor.blogimg.jp/uzuki9071/imgs/5/b/5baf28fa.jpg);}
修正して完成したCSSは、任意の「xxxx.css」などのファイル名で保存して下さい。

【追記訂正】ライブドアブログでの使用法

この説明項目について、当初の記事で説明した方法に自分の理解不足が有ったために余計な工程と、余計な記述があることに参考にさせて頂いた赤ペソ先生が、この記事を参考にされて新たに書かれた記事を読んで気づきました^^;
よって、ここからの説明を2017年3月25日付で全面的に訂正し書き直しました。

これ以降、訂正版の説明です。

上記までの説明で完成したCSSを使って、記事内で会話形式を利用する実際の説明です。

 

作成したCSSファイルを…
ブログの設定 > 画像/ファイル > ファイル管理 に、新たに「style」や「CSS」等の任意のフォルダを作成して、そこにアップロードします。
そのアップロード先のURLを控えておいて下さい。

 

次に…

実際の記事編集時にHTMLタグ編集画面で冒頭部分に下記を記述します。

<link href=”http://xxxx/xxxx/xxxx.css” type=”text/css” rel=”stylesheet” /> 

赤字の部分は先程控えたアップロード先URLに書き換えて記述して下さい。

これでアップロードしたCSSファイルを記事毎に読み込む設定の完了です。

実際に「アイコン付吹き出し会話形式」を使う方法

この記事の冒頭のような会話形式を実際に表示させるための編集時の記述方法を説明します。
HTMLタグ編集画面で下記の例文で説明します。
【例文】
(あじゅぽん)会話形式のテストです
はいはい(卯月廿六)
(あじゅぽん)どうですか、出来ていますか?
OKOKできてるよ!(卯月廿六)
(あじゅぽん)よかった~
これを、下記の例に従って書き換えます。
【吹き出し指定記述基本】
右吹き出し左アイコン
<p class=”r-fuki クラス名”>テキスト</p>
左吹き出し右アイコン
<p class=”l-fuki クラス名”>テキスト</p>

 

【例文用の記述例】
右吹き出し左アイコン「あじゅぽん」
<p class=”r-fuki ajyupon01″>例文テキスト</p>
左吹き出し右アイコン「卯月廿六」
<p class=”l-fuki uzuki01″>例文テキスト</p>
【例文での実際の記述】
<p class=”r-fuki ajyupon01″>会話形式のテストです</p>
<p class=”l-fuki uzuki01″>はいはい</p>
<p class=”r-fuki ajyupon01″>どうですか、出来ていますか?</p>
<p class=”l-fuki uzuki01″>OKOKできてるよ!</p>
<p class=”r-fuki ajyupon01″>よかった~</p>


これを実際に表示させると…
【例文での実際の表示】

このようになります。
HTMLタグ編集モードでの編集は、不慣れだと戸惑いますが会話形式の実現には必須ですのでがんばってくださいね^^;

 

以上が、今回、ライブドアブログで実装に成功したアイコン付吹き出し会話形式の実装の解説でした。
一部、説明が下手で解りにくい部分も有ると思いますが、自分の解る範囲での補足説明もしますのでその際は遠慮なくコメント下さい。

 

それでは皆さんも、良き会話形式記事ライフを!?