テーマをCocoonに変更しました!

ご挨拶

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

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

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

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

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

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

以上

entry-title見出し1です

これは見出し1です

これは見出し2です

これは見出し3です

これは見出し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
<?php if(wp_is_mobile()): ?> ここにスマホに表示したいものを書く <?php else: ?> ここにPCに表示したいものを書く <?php endif; ?>
ソースコードをハイライト表示させる方法
...
補足情報
補足情報
補足情報
メモアイコンボックス
コメントアイコンボックス
<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>
キーワード
検索
この記事を書いた人
アバター画像
優香をフォローする

カスタマや使い方

拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。
...
フッターデザインの変更方法
...
テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)
...
新着記事一覧を表示するショートコードの利用方法
...
左側に入力する内容
右側に入力する内容
左側に入力する内容
中央に入力する内容
右側に入力する内容

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
新着記事一覧を表示するショートコードの利用方法
...
記事内を2カラム・3カラム・4カラムに分ける方法
...
3カラムをサイドバーなしで表示してみました
...

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

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

days

rank

pv

count

cats

type

cats

20180520072420

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

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

入力例:cats=3,16,23

デフォルト値:all(全てのカテゴリを表示)

20180520072259

default:通常のリスト

popular_list
レスポンシブをサクッと解除する方法
Cocoonの縦型カード3列のサムネイルの大きさを変える
スマホとPCで表示する内容を変える(wordpress)
wordpressカテゴリ別にカラフル色をつける「Colorful Categories」
Shortcodes Ultimateをどこにでも表示出来るようにする
popular_list days=all rank=0 pv=0 count=3 type=default cats=all
レスポンシブをサクッと解除する方法
Cocoonの縦型カード3列のサムネイルの大きさを変える
スマホとPCで表示する内容を変える(wordpress)

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

popular_list days=30 rank=1 pv=1 count=3 type=large_thumb_on
レスポンシブをサクッと解除する方法
12 views
wordpressカテゴリ別にカラフル色をつける「Colorful Categories」
11 views
エックスサーバーでCocoonをインストールしようとしたら413エラーが出る!
11 views

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

popular_list days=30 rank=1 pv=1 count=3 type=large
レスポンシブをサクッと解除する方法
12 views
wordpressカテゴリ別にカラフル色をつける「Colorful Categories」
11 views
エックスサーバーでCocoonをインストールしようとしたら413エラーが出る!
11 views
人気記事一覧を表示するショートコードの利用方法
...
人気記事を横並びに表示した
...

付箋風ボックスの追加

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
<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種追加。付箋風ボックス拡張クラスの追加
...
タイトルとURLをコピーしました