テキストを画像へ変換する方法 [更新考慮-変-]

目的 [主な3つ]

特に足したことはないメモ書き

1. テキストを画像へ変換したい。
2. デザイン変更やテキスト変更も考慮しておきたい。
3. 拡張性、汎用や応用性なども考慮に含め、実用が高いものにしたい。

サンプルコード (SP版)

style.css

/*==========HTML TAGs===============
<ul class="top_bloc_list">
<li class="list01">
<span class="no_01">01</span>
<span class="txt">TextTextText...</span>
</li>
</ul>
==========HTML TAGs===============*/

.top_bloc ul.top_bloc_list li {
    height:70px;
    margin-top:10px;
}

.top_bloc ul.top_bloc_list li span {
        display: inline-block;
}

/* li.list$$ */
.top_bloc ul li.list01 {
    background:url(../img/top_bg_01.png) no-repeat left center #fff; /* img-Size 100 x 100 */
    background-size:auto 50px;
    border:1px solid #FF5345;
}

/* span.no_$$ */
.top_bloc11 ul li.list01 span.no_01 {
    background:url(../img/top_no_01.png) no-repeat;  /* img-Size 54 x 38 */
    text-indent:-9999px;
    background-size:auto 100%;
    width: 27px;
    height: 19px;
    margin-top: 25px;
  margin-left: 10px;
    position: absolute;
}

/* span.txt */
.top_bloc ul li.list01 span.txt  {
    background:url(../img/top_txt_01.png) no-repeat left center; /* img-Size 366 x 70 */
    text-indent:-9999px;
    background-size:auto 100%;
    width: 240px;
    height: 35px;
    margin-left: 63px;
    margin-top: 17px;
}