bingo!CMS v1.7 マニュアルサイト

1. bingo!CMS管理画面にログインし、画面上部のデザイン管理／テンプレート管理をクリックします。

2. テンプレート一覧から任意のテンプレートのテンプレート編集ボタンをクリックし、テンプレート編集画面に入ります。

3. テンプレート編集画面内のプルダウンをカバーに変更し、カバーで使用したい画像を設定します。

4. テンプレート編集画面内のプルダウンをベースに変更し、下記の記述例を参考にフリーエリア内にHTMLを記述して保存します。

<div class="extTypewriter">
<h2 class="tw_typearea tw_busy">
あのイーハトーヴォのすきとおった風、<br />
夏でも底に冷たさをもつ青いそら、<br />
うつくしい森で飾られたモリーオ市、<br />
郊外のぎらぎらひかる草の波。</h2>
</div>

• 改行と改行の間が一行としてタイピングされます。
  テキストは<br />で区切って記述してください。
• 例では仮にh2で記述していますが、適宜適切なものに変更してください。

1. bingo!CMS管理画面上部のデザイン管理／カスタムCSS編集をクリックします。

2. カスタムCSS編集画面のCSS編集欄に以下を参考に記述し、保存します。

 #freeArea .tw_typearea { 
    color: #fff; /*文字色*/
    font-size: 3em; /*フォントサイズ*/
    text-shadow: 0 1px 3px rgba(0,0,0,.5); /*文字影なくてもいい*/
    line-height: 1;
}
 #freeArea .tw_typearea .tw_cursor {
    width: 1em;
    background-color: rgba(255,255,255,.8);
    line-height: 1;
}

• #freeArea .tw_typeareaの{ }内の記述でテキストの文字色やフォントサイズ、影の装飾を行います。
• #freeArea .tw_typearea .tw_cursorの{ }内の記述でカーソルの幅や色の装飾を行います。

1. bingo!CMS管理画面上部のその他管理／サイト設定をクリックします。

2. サイト設定画面の自由入力タグ欄に以下を参考に記述し、保存します。

<script src="/usr-data/extunits/extTypewriter/extTypewriter.js" charset="utf-8" defer></script>
<script>
(function(){
var unit = document.querySelector('#freeArea');
var line={};
var tw=null;
if(unit==null) return;
if(unit.querySelector(".tw_typearea")==null) return;
window.addEventListener('load', function(e) {
    var nodes = unit.querySelector('.tw_typearea').childNodes;
    var text = unit.querySelector('.tw_typearea').innerText;
    var count = nodes.length;
    var row = 0;
    line = [];
 
    for(let i = 0; i < count; i++) {
        let node = nodes[i];
        if(!line[row]) {
            line[row] = [];
        }
        if(node.nodeName.toUpperCase() == "BR") {
            row++;
            continue;
        }
        if(node.length == 0) {
            continue;
        }
        line[row].push(node.cloneNode(true));
    }
 
    j$(unit).one("inview", function(e, view) {
        unit.querySelector('.tw_busy').classList.remove('tw_busy');
        tw.type(line);
    });
 
    document.body.click();
}, false);
window.addEventListener('extTypeWriterReady', function(){
    tw = new TypeWriter("#freeArea .tw_typearea", {
        //任意で変更
        random: 0,
        speed: null,
        pause: null,
        loop: null,
        effect: {
            type: 'fade', //fade or 空
            duration: 500
        }
    });
});
})();
</script>

記述内のタイピングに関する値は適宜変更できます。以下を参考に●の部分を変更してください。

公開用に設定していないテンプレートを使って設定した場合、タイピングエフェクトは以下の方法で確認できます。

1. テンプレート編集画面内の一覧へ戻るボタンと保存ボタンの間にある虫眼鏡のアイコンをクリックします。

2. テンプレートプレビュー表示画面が開き、タイピングの様子が確認できます。