簡単にご挨拶させて頂きます 文章を書くのが苦手なのでほとんど説明など省略して自分で使ってるソースをそのまま コピペで使えるものや問題が発生した時のことなどメモ程度で紹介しています。

※環境によって正常に使えない可能性も有りかも 自分なりにソースを変えたもので不安があるのはソースは公開していませんので。。。

と言うかお勉強中の鍵付きになっています。

公開出来る範囲内になれば順次公開していく予定です。

と言うか知識不足なのでこのブログを育てながら勉強していきたいと思っています。

アドバイスやコメント大歓迎ですが質問にはお答えできる知識はありませんので悪しからず。。。

以上

entry-title見出し1です

これは見出し1です

これは見出し2です

これは見出し3です

これは見出し4です

これはmenu_underh2見出し4です

これは見出し5です

これは見出し6です

これはひきようですよー

太くした文字ですよー 赤色で太くしたもじですよー

• liですよ

オレンジ グリーン 広告

黄色のマーカー

黄色のアンダーマーカー

<div class="point">こんな感じになります </div>
<div class="primary">プライマリー</div>
<div class="success">さくせす</div>
<div class="info">インフォ</div>
<div class="warning">ウォーニング</div>
<div class="danger">デンジャー</div>
<p><span class="sankouorange">オレンジ</span> <span class="sankougreen">グリーン</span> 
<span class="pr">広告</span></p>

<p><span class="marker">黄色のマーカー</span> </p>
<p><span class="marker-under">黄色のアンダーマーカー</span> </p>

ボタンテスト

ボタンテスト

ボタンテスト

ボタンテスト

ボタンテスト

ボタンテスト

赤アンダー

太い赤字

太字

バッジ

<p><a class="btn btn-light-blue" href="#">ボタンテスト</a></p>
<p><a class="btn btn-light-blue btn-m" href="#">ボタンテスト</a></p>
<p><a class="btn btn-light-blue btn-l" href="#">ボタンテスト</a></p>
<p><a class="btn btn-pink" href="#">ボタンテスト</a></p>
<p><a class="btn btn-pink btn-m" href="#">ボタンテスト</a></p>
<p><a class="btn btn-pink btn-l" href="#">ボタンテスト</a></p>

<p><span class="red-under">赤アンダー</span> </p>
<p><span class="bold-red">太い赤字</span> </p>
<p><span class="bold">太字</span></p>
<p><span class="badge">バッジ</span></p>

HTMLエスケープをしてからソースコードを挿入する

HTMLエスケープツール | Web制作小物ツール - dounokouno.com

webtools.dounokouno.com

<?php if(wp_is_mobile()): ?> ここにスマホに表示したいものを書く <?php else: ?> ここにPCに表示したいものを書く <?php endif; ?>

ソースコードをハイライト表示させる方法

...

wp-cocoon.com

<div class="information-box">補足情報</div>

<div class="question-box">補足情報</div>

<div class="alert-box">補足情報</div>

<div class="memo-box">メモアイコンボックス</div>
<div class="comment-box">コメントアイコンボックス</div>

非順序リスト（ネスト化）

• リストアイテム1
  • リストアイテム1
    • リストアイテム1
    • リストアイテム2
    • リストアイテム3
    • リストアイテム4
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4
• リストアイテム2
• リストアイテム3
• リストアイテム4

順序リスト

1. リストアイテム1
   1. リストアイテム1
      1. リストアイテム1
      2. リストアイテム2
      3. リストアイテム3
      4. リストアイテム4
   2. リストアイテム2
   3. リストアイテム3
   4. リストアイテム4
2. リストアイテム2
3. リストアイテム3
4. リストアイテム4

吹き出し

<div class="speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/man.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-2 sbs-stn sbp-r sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/woman.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-3 sbs-line sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/boy.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-4 sbs-line sbp-r sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/girl.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-5 sbs-flat sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/ojisan.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-6 sbs-flat sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/obasan.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-7 sbs-line sbp-l sbis-sb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/b-man.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-8 sbs-line sbp-r sbis-sb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/b-woman.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-9 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="" src="https://im-cocoon.net/wp-content/uploads/doya.png" /></figure> </div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-10 sbs-stn sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="くま" src="https://im-cocoon.net/wp-content/uploads/bear.png" /></figure>
<div class="speech-name">くま</div>
</div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-11 sbs-stn sbp-r sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="ねこ" src="https://im-cocoon.net/wp-content/uploads/cat.png" /></figure>
<div class="speech-name">ねこ</div>
</div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-12 sbs-flat sbp-l sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="いぬ" src="https://im-cocoon.net/wp-content/uploads/dog.png" /></figure>
<div class="speech-name">いぬ</div>
</div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>
<div class="speech-wrap sb-id-13 sbs-flat sbp-r sbis-cb cf">
<div class="speech-person"><figure class="speech-icon"><img class="speech-icon-image" alt="うさぎ" src="https://im-cocoon.net/wp-content/uploads/rabbit.png" /></figure>
<div class="speech-name">うさぎ</div>
</div>
<div class="speech-balloon">内容を入力してください。 </div>
</div>

カスタマや使い方

拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。

...

wp-cocoon.com

フッターデザインの変更方法

...

wp-cocoon.com

テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）

...

wp-cocoon.com

新着記事一覧を表示するショートコードの利用方法

...

wp-cocoon.com

2カラムにするソースコード

<div class="column-wrap column-2">
<div class="column-left">
左側

</div>
<div class="column-right">

右側

</div>
</div>

3カラムにするソースコード

<div class="column-wrap column-3">
<div class="column-left">

<h3>左側</h3>

</div>
<div class="column-center">

<h4>真ん中</h4>

</div>
<div class="column-right">

<h5>右側</h5>

</div>
</div>

ショートコードの書き方

[]は実際にはつける事

new_list
new_list count=5 cats=3,5
popular_list

新着記事一覧を表示するショートコードの利用方法

...

wp-cocoon.com

記事内を2カラム・3カラム・4カラムに分ける方法

...

wp-cocoon.com

3カラムをサイドバーなしで表示してみました

...

webcss.withrun.org

2018.05.03

人気記事のショートコード

popular_listでは、以下の引数を利用できます

days

rank

pv

count

cats

type

cats

popular_list days=30 rank=1 pv=1 count=3 cats=3,5, type=large_thumb_on

catsには、表示するカテゴリをカンマ区切りで指定します

入力例：cats=3,16,23

デフォルト値：all（全てのカテゴリを表示）

default：通常のリスト

popular_list

popular_list days=all rank=0 pv=0 count=3 type=default cats=all

large_thumb_on：大きなサムネイルにタイトルを重ねる

popular_list days=30 rank=1 pv=1 count=3 type=large_thumb_on

large_thumb：大きなサムネイル表示

popular_list days=30 rank=1 pv=1 count=3 type=large

人気記事一覧を表示するショートコードの利用方法

...

wp-cocoon.com

人気記事を横並びに表示した

...

wp-cocoon.com

付箋風ボックスの追加

<div class="blank-box sticky">
グレー
</div>
<div class="blank-box sticky st-yellow">
黄色
</div>

<div class="blank-box sticky st-red">
赤色
</div>

<div class="blank-box sticky st-blue">
青色
</div>

Cocoon 0.6.0公開。スキン3種追加。付箋風ボックス拡張クラスの追加

...

wp-cocoon.com