いらすとやの面白画像を2色モノトーンにしてオシャレ雑誌風にHTMLに組み込んでみる

　使う画像


　完成イメージ

---

1.Photoshopで画像を2階調化、レベル補正。

2.画像を一旦どこかサーバーにアップロード。JS Bin等で画像を参照し、chromeの拡張機能の"ColorPicker"で画像の2色を取得。
　取得した2色をいい感じに使う。Divの中に画像を載せ、そのDivのCSSのbackground-colorとcolorに取得した2色を使う。
（こちらのイラストの透過部分が灰色かかっているのははてなブログのCSSのせいです。本来は灰色かかっていません）

hoge

<style>
.background{background-color: #ffff00;}
.fontColor {color: #be0000;}
</style>

<div class="background fontColor" >
  <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sirakabaararagi/20190819/20190819144554.png"/>
  <div>hoge</div>
</div>

3.画像を左に回るようにfloat: left;を使ったりなど他細々と適当に整えて完了。

<style>
.background{background-color: #ffff00;}
.fontColor {color: #be0000;}

.img{
  float: left;
}

.dropcap{
  width: 500px;
  font-family: Georgia, "Times New Roman", Times, serif;
  word-break: break-all;
}
.dropcap:first-letter {
  font-size: 3em;
  line-height: 1;
  float: left;
  margin: 0 .2em 0 0;
  padding: .1em 0;
}
</style>

<div class="background fontColor" >
  <img class="img" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sirakabaararagi/20190819/20190819144554.png"/>
  <div class="dropcap">Fujoshi in Japanese means "腐女子(rot girl)". Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words.<br> Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words Good words.</div>
</div>