Cocoon のカスタマイズをメモ
このブログは、WordPressのテーマ「Cocoon（コクーン）」を使って書いてます。
Cocoon は、SEOや高速化、モバイルサイトに最適化されたシンプルなテーマとアドセンスやアフェリエイトの細かいチューニングもできる高機能さを併せ持ち Word Press が初めての人からゴリゴリに使っているひとまで幅広いニーズに対応してくれて扱いやすいオススメのテーマです。
デフォルトで様々な設定ができるように設計されているけど、自分好みにカスタマイズすることもできる。やりたいことを探してカスタマイズしたところを忘れないようにメモするブログ記事。
カスタマイズしたとこが増えるたびに更新します。
画像を右クリックで保存できなくするメモ
写真素材サイトに投稿している写真もあるのでオリジナル画像の保存を軽くガード。スクショしたり、ソースを見ればダウンロードできるけど無いよりまし。
外観 ＞ テーマスタイル ＞ スタイルシート Cocoon Child: スタイルシート (style.css)
img {
pointer-events: none;
}
img {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
touch-callout:none;
user-select:none;
}
YouTube の iframe をセンタリングするメモ
動画（YouTube）のアドレスを貼り付けると640 x 360 サイズの動画が左寄せになるのでビデオはファイルは中揃えにする呪文。
外観 ＞ テーマスタイル ＞ スタイルシート Cocoon Child: スタイルシート (style.css)
.video-container {
margin: 0px auto;
}
見出しタグ(H2)をリセットしてカスタマイズするメモ
Cocoon デフォルトの見出しを好みの装飾にする方法はまずリセットしてから定義する。
外観 ＞ テーマスタイル ＞ スタイルシート Cocoon Child: スタイルシート (style.css)
.article h2 {
padding: 0;
background: none;
}
.article h2 {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
margin-top: 50px;
margin-bottom: -50px;
}
記事をコピーさせないメモ
歌詞サイトでよくあるテキストをコピーでないようにする簡易的な方法。CSSを無効化するとコピーできちゃう。
カスタムCSSに貼り付ければその記事だけコピーガードできる。
body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}
カスタムJavascript で外部 JS ファイルを読み込むメモ
投稿のエディターのカスタムJavascript に以下のとうに書き込む。
太字を外部ファイルのURLにする。
</script><script src="https://wporepom/js/sample.js"></script><script>
ビジュアルエディターとプレビューの幅をなるべく合わせる
editor-style.css にマージンとレタースペースを指定。
調整とプレビューを繰り返していい感じにする。
body{
/* 新ゴのエディターフォント */
margin-left:250px;
letter-spacing:-0.08em;
}
Cocoonの目次の 開く/閉じる を投稿記事ごとに指定するハウツー
いつもは、記事の目次が閉じた状態で表示しているけど、投稿記事によっては目次を開いて表示させたいときは、Cocoon Child のfunctions.php に以下を追加する。
外観 ＞ テーマエディター ＞ テーマファイル ＞ テーマのための関数（functions.php）
はじめは目次は「閉」で 開きたい記事を指定 するとき
function is_toc_content_visible(){
//投稿IDをカンマ区切りで指定する。
return is_single(array(投稿ID, 投稿ID));
}
はじめは目次「開」で 閉じたい記事を指定するとき
function is_toc_content_visible(){
//投稿IDをカンマ区切りで指定する
return !is_single(array(投稿ID, 投稿ID));
}
投稿 IDは、投稿一覧にあるここの数字。
