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

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

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

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

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

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

以上

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

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

テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

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>

カスタマや使い方

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

Cocoonにデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。

wp-cocoon.com

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

フッターにある「ロゴ」と「フッターメニュー」と「クレジット表記」の配置を変更する設定方法です。

wp-cocoon.com

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

Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

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カラムに分ける方法

投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。

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種追加。付箋風ボックス拡張クラスの追加

Cocoon 0.6.0のアップデート情報。

wp-cocoon.com