記事内
種類
入力/ 読み – 略称(略す前の名称)
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にはページ内の目次を自動で生成してくれる機能があります。この目次の位置にスクロール先から戻るリンクを設置するにはひと工夫必要になります。今回はその目次に戻るリンクのおすすめの設置方法のご紹介です。目次に戻るが有用であるという話を