ブログのデザインを整えるために追加したCSS一覧

目次（タップできる）

記事内
2. 追加した機能

記事内

種類

入力/ 読み – 略称（略す前の名称）

CVボタン

テーブル

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);