slabTextを使ってレスポンシブかつ迫力ある見出しを作ろう！

kintone カスタマイズ
1

slabTextは、行ごとにちょうど幅いっぱいの表示となる文字サイズに調整してくれるjQueryプラグインです。 レスポンシブなページの見出しを作る際に便利です。 slabText及びjQueryはCybozu CDNにてサポートされているので、ご利用ください。

サンプル

複数行に分けたブログのタイトルを、それぞれ要素幅いっぱいに表示します。

コード

HTML

<div id="blogs"></div>
<script type="text/html" id="lodash_template">
  <div class="blog">
    <div class="blog_title"><%=title%></div>
    <div class="blog_text"><%=text%></div>
  </div>
</script>

CSS

.blog{
  width:50vw;
  margin:auto;
  padding:20px;
}

JavaScript

(function () {
  "use strict";
  kintone.events.on(["app.record.index.show"], function (event) {
    if (event.viewName !== "ブログ") return event;
    $("#blogs").html(
      event.records.reduce(function (html, record) {
        return (
          html +
          _.template($("#lodashtemplate").html())({
            title: record.タイトル.value
              .split("")
              .reduce(function (title, row) {
                return title + '<div class="blogtitlerow">' + row + "</div>";
              }, ""),
            text: record.本文.value,
          })
        );
      }, "")
    );
    $(".blogtitlerow").slabText();
    return event;
  });
})();

※サンプルコードでは、lodashを利用しております。 Cybozu CDNからご利用ください。