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