対談記事にイカした吹き出しのデザインcss導入

この記事が気に入ったらいいね!をクリック

元記事はこちらをチェックしてね

対談記事が結構あるけど読みづらい問題

Dappyでは渋谷のチャラ男や、鬼ビッチA子大先生をお招きしてのインタビュー記事をいくつか書いているんですが、以前から編集部内でも”なんか対談記事読みづらい”という声がございました。

そんな折、『ブログでインタビュー記事を書くときに便利な吹き出しのデザインを作ってみた』という記事を拝見、これは早速導入してみねば!

まずcssを丸々コピペでぶち込んでみる

せっかくなので対談式で書いてみます

とりあえずcss丸っとぶち込んでみるわ
また勝手なことしたらエンジニアに怒られるよ。
この前サイト全部緑にしたんだし
とりあえずそういう企画だから。やってみよう。善は急げだ。

ということでとりあえずこちらのcssを

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-12-06-36

まるっとcssに追加します。

 

ちなみにDappyは背景が白なので、吹き出しの色をグレーに変更しています。
改変後のcssはこちらです↓

.entry-talk-box {
border-collapse: separate;
border-spacing: 15px 2px;
display: table;
margin: 30px 0;
table-layout: fixed;
width: 100%;
}

.entry-talk-img {
display: table-cell;
vertical-align: top;
width: 100px;
}

.entry-talk-img img {
border-radius: 50%;
width: 100px;
}

.entry-talk-txt {
background-color: #f6f6f6;
border-bottom: 1px solid #ddd;
border-radius: 8px;
display: table-cell;
padding: 10px;
position: relative;
}

.entry-talk-txt-left:after {
content: ”;
position: absolute;
border-right: 12px solid #f6f6f6;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
left: -12px;
top: 40px;
}

.entry-talk-txt-right:after {
content: ”;
position: absolute;
border-left: 12px solid #f6f6f6;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
right: -12px;
top: 40px;
}

.entry-talk-txt p {
line-height: 1.4;
margin: 0;
}

お、すごい。できてる。
やっぱ編集も多少はソースいじれないとあきまへんな

あとは記事を下記のコードで書きます。(こっちは元のまま)

<div class=”entry-talk-box”>
<div class=”entry-talk-img”>
<img src=”ここに画像のURL”>
</div>
<div class=”entry-talk-txt-left entry-talk-txt”>
<p>ここに文章</p>
</div>
</div>

<div class=”entry-talk-box”>
<div class=”entry-talk-txt-right entry-talk-txt”>
<p>ここに文章(右の人)</p>
</div>
<div class=”entry-talk-img”>
<img src=”ここに画像のURL(右の人)”>
</div>
</div>

なお、cssの全文など元記事はこちらを参考にしてください。

これで対談記事が読みやすくなるな。ちゃんと過去記事もこれで直しとけよ
・・・
この記事を書いた人 kulo
関連記事
モテるための3文字「オ・ハ・シ」ならぬ「ハ・カ・ク」って?
モテるための3文字「オ・ハ・シ」ならぬ「ハ・カ・ク」って?
男にモテる「さしすせそ」って知ってる? 男を虜にすると噂のリアクション「さしす...
存在しない漢字「畝意」が検索されている理由
存在しない漢字「畝意」が検索されている理由
存在しないのに検索される漢字の謎に迫る。 こんにちわ、好奇心レベル7万のライタ...
ガジェットガジェットって、ガジェットってどういう意味?
ガジェットガジェットって、ガジェットってどういう意味?
母親の「ガジェットって何?」にちゃんと答えられなかった事案 ガジェットって聞い...
超高価「カセットテープ」で初めてやったゲーム
超高価「カセットテープ」で初めてやったゲーム
「カセットテープ」からデータを保存できる便利さ 小学2年生で、人差し指ゲームプ...
GoogleAnalyticsにトランプに投票しろとの謎のアクセスがある件
GoogleAnalyticsにトランプに投票しろとの謎のアクセスがある件
ふとgoogle analyticsを見ていると何やら謎のリファラーからアクセス...
気をつけろ罠だぞ!女性のこの言葉は信じるな
気をつけろ罠だぞ!女性のこの言葉は信じるな
前回のLINE浮気チェックに続き、今回も恋愛マスター鬼ビッチA子さんをお招きして...
Twitterの複数同時アカウント管理にTweetDeckが超絶便利
Twitterの複数同時アカウント管理にTweetDeckが超絶便利
DappyのTwitterアカウントの管理が面倒くさい DappyのTwitt...
このデート脈あり?脈なし?見極めるポイントは2つだけ!
このデート脈あり?脈なし?見極めるポイントは2つだけ!
デートしてもよくわからない。「脈あり」「脈なし」のサインって? デートはあ...
たったこれだけ!男の浮気がわかるたった1つのテスト
たったこれだけ!男の浮気がわかるたった1つのテスト
男性読者のために女性へのインタビュー企画を実施したい。 そんなことを思って...