テーマを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; ?>
ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。
補足情報
補足情報
補足情報
メモアイコンボックス
コメントアイコンボックス
<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にデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。
フッターデザインの変更方法
フッターにある「ロゴ」と「フッターメニュー」と「クレジット表記」の配置を変更する設定方法です。
テーマが利用しているサムネイルを再生成して最適化する方法
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。
新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。
左側に入力する内容
右側に入力する内容
左側に入力する内容
中央に入力する内容
右側に入力する内容

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カラムに分ける方法
投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。
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列のサムネイルの大きさを変える
wordpress無料テーマ Poseidonの紹介
スマホとPCで表示する内容を変える(wordpress)
wordpressでメディア(画像)が表示されない
popular_list days=all rank=0 pv=0 count=3 type=default cats=all
レスポンシブをサクッと解除する方法
Cocoonの縦型カード3列のサムネイルの大きさを変える
wordpress無料テーマ Poseidonの紹介

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

popular_list days=30 rank=1 pv=1 count=3 type=large_thumb_on
レスポンシブをサクッと解除する方法46 views
Cocoonの縦型カード3列のサムネイルの大きさを変える37 views
wordpress無料テーマ Poseidonの紹介31 views

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

popular_list days=30 rank=1 pv=1 count=3 type=large
レスポンシブをサクッと解除する方法46 views
Cocoonの縦型カード3列のサムネイルの大きさを変える37 views
wordpress無料テーマ Poseidonの紹介31 views
人気記事一覧を表示するショートコードの利用方法
人気記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。
人気記事を横並びに表示した
わいひら様 お世話になっております。 トップページにウィジェットを使用して人気記事を表示させています。 現状縦並びになっているものを横並びに表示させたいのですが、どのようにすればよろしいのでしょうか? ご回答いただけますと幸いです。 よろしくお願いいたします。 URL/p>

付箋風ボックスの追加

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
<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のアップデート情報。