Cocoonカスタマイズ 《Cocoon》次のページのカスタマイズ｜ページネーションの編集＆サンプル集
ページネーションとは
ページネーションとはページ割りのことです。
１ページで管理する記事の数が多くなってしまうとアイキャッチ画像やスクリプトを複数読み込むことになるため、表示速度が重くなってしまいます。
複数のページで記...
Cocoonカスタマイズ 
Cocoonカスタマイズ 【Cocoon】ラベルのカスタマイズ｜サンプル付きで解説
ラベルとは
ラベルとは、記事のカテゴリーを表示したものです。
Cocoonのラベルは、アイキャッチ画像の左上に表示されます。
以下の画像の左上にあるのがラベルです。
ラベルはジャンル（カテゴリー）を指す重要...
HTML＆CSS 要素の前後に文字を追加する方法｜CSSで編集【before・after】
要素の前後に文字を追加したい
要素の前後に文字を追加する場合は疑似要素《before》と《after》を利用します。
例えば、以下のようなHTMLが存在したとします。
<div class="sample">...
HTML＆CSS リスト《ul・ol・li》のスタイルを編集・指定する方法｜６つの疑似クラス、疑似要素で解決
リスト《ul・ol・li》とは
リストを作成するために必要なセレクタは以下の通りです。
ulolli
基本的には上記のセレクタの組み合わせでリストを作成していきます。
中点「・」のリストを作りたい方は、
&l...
HTML＆CSS 疑似クラスの基本｜書き方、使用例とサンプル
疑似クラスとは
疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。
例えば、疑似クラス《hover》を【sample】クラスに付ける場合、
.sample:hover {
background-c...
Cocoonカスタマイズ 【Cocoon】記事タイトルのカスタマイズ方法｜ソースサンプル有
記事タイトルとは
Cocoonだけに限らず、記事にはタイトルがあります。
タイトルは検索エンジンにも表示されるだけにクリックを誘うインパクトのあるタイトルが理想です。
また、その記事内にもタイトルは大大と表示されます。
...
HTML＆CSS 疑似要素の基本｜書き方、使い方とサンプル
疑似要素とは
疑似要素は指定したセレクタの一部分にスタイルを適用する要素です。
疑似要素には以下のような物があります。
::after::before::first-letter::first-line::selecti...
HTML＆CSS セレクタの書き方｜子孫・複数・隣接・間接・直下
セレクタの種類
基本的なセレクタは以下の５つです。
要素型セレクタ（a）IDセレクタ（#sample）クラスセレクタ（.class）属性セレクタ（）全称セレクタ（*）
これらのセレクタは全体を指定する場合に利用されていま...
HTML＆CSS セレクタとは｜HTML＆CSSの基本用語
セレクタとは
簡単にセレクタを説明すると、
要素型セレクタ（a）IDセレクタ（#sample）クラスセレクタ（.class）属性セレクタ（）全称セレクタ（*）
これらの全てがセレクタです。
ただし、セレクタは上記だ...
Cocoonカスタマイズ 《Cocoon》目次のカスタマイズ方法｜参考サンプル有り
目次について
目次の役割をシンプルに説明すると、
記事内のページで何を解説しているのかを項目毎（リスト上）で表したもの
目次には種類がありますが、Cocoonの目次は知りたい内容の項目をクリックすることで、同一ページ内の...
Cocoonカスタマイズ 【Cocoon】サイドバーの目次カスタマイズ例｜デザインサンプル
サイドバーへ目次を追加する方法
Cocoonでは特別なソースコードを追加で記載しなくても、Word Pressの機能の一つ、ウィジェットにて「目次」をサイドバーへと追加することができます。
サイドバーへと目次を追加する方法は以...
Cocoonカスタマイズ 【Cocoon】記事の目次をサイドバースクロールで追従させる方法
Cocoonの機能に含まれる
Cocoonでは記事内の目次をサイドバーに設定することができます。
その機能はCocoonの機能に含まれており、設定さえすれば誰でも利用することができます。
また、目次をウィジェット「サイド...