HTML挿入で追加するコード一覧(ユーザー辞書に登録しておく)

記事内

 

種類

入力/ 読み – 略称(略す前の名称)

 

 

CVボタン

bg(button green)

 

bb(button blue)

 

bo(button orange)

 

テーブル

t1(table 1)

title title
title text text
title text text
title text text
title text text
title text text
title text text
title text text

 

t2(table 2)

title text
title text
title text
title text
title text
title text
title text

 

t3(table3)

title
text
title
text
title
text
title
text
title
text

 

まとめBOX

タイトル
テキスト

 

 

 

2. 追加した機能

ツイッター埋め込み – 中央よせ

記事内にツイートをそのまま埋め込むと、微妙に左に寄ってしまいバランスが悪い。センタリング用のコードを追加。

before

after

.twitter-tweet.twitter-tweet-rendered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

 

 

CVボタン

bg(button green)

 

bb(button blue)

 

bo(button orange)

 

 

↑目次に戻る ボタン

スタイルシート(style.css)に追加

/* 目次に戻るリンクを機能させる */
.toc-checkbox {
height: 0;
overflow: hidden;
display: block;
visibility: hidden;
}
.back-toc {
text-align: right;
margin-left: 7px;
}

/* モバイル用 */
@media screen and (max-width: 480px){
.back-toc {
margin: 0 12px -18px 0;
}
.back-toc a {
text-decoration: none;
}
}

 

テーマのための関数(functions.php)に追加

//自動で目次に戻るリンクを挿入
add_filter('the_content', function( $content ){
    if ( is_singular() && strpos( $content, ' id="toc-checkbox-' ) !== false ){
        //挿入するHTML
        $back_toc = '<div class="back-toc"><a href="#toc-checkbox-1"><i class="fa fa-arrow-up" aria-hidden="true"></i> 目次に戻る</a></div>';
        //AMPページではチェックボックスのidが変わるので置換
        if( is_amp() ) {
            $id_check = preg_match('/ id="(toc-checkbox-\d+)"/', $content, $id_match);
            $back_toc = str_replace('#toc-checkbox-1', '#'.$id_match[1], $back_toc);
        }
        $count = 0;
        $content = preg_replace_callback('/<h2 *[^>]*>/i', function( $m ) use (&$count, $back_toc) {
            $count++;
            if( $count == 1 ) {
                return $m[0]; //一番最初のh2には挿入しない
            } else {
                return $back_toc.PHP_EOL.$m[0];
            }
        }, $content, -1).$back_toc.PHP_EOL;
    }
    return $content;
}, 99999);

 

参考URL

Cocoonで目次に戻るリンクを自動で設置する
Cocoonにはページ内の目次を自動で生成してくれる機能があります。この目次の位置にスクロール先から戻るリンクを設置するにはひと工夫必要になります。今回はその目次に戻るリンクのおすすめの設置方法のご紹介です。目次に戻るが有用であるという話を