Cocoon！headerロゴ・ヘッダー背景画像をCSSだけでページ毎にスタイル変更するカスタマイズ
FTPソフトで子テーマフォルダ内にimagesフォルダを準備、画像名をローマ字にして入れるだけ。 imagesと言う名前のフォルダを作る その中に画像をいれる 子テーマフォルダ内にimagesフォルダをアップロード 以降：FTPで子テーマimagesフォルダ内に画像を入れる 画像の名前は正確に。hoge.png・hoge.gif・hoge.jpg /your-domain.com（/public_html）/wp-content/themes/cocoon-child-masterフォルダ内 これで画像のパスが、素敵なほど短くなりCSS容量が節約できるからオススメです＾＾ url("images/hoge.png") url(https://bibabosi-rizumu.com/public_html/wp-content/uploads/2018/07/hoge.png) AMPページ
Cocoon一覧タイトル：h1タグを装飾・h1タグタイトル前に画像を入れる時のCSS
画像のサイズを適切な大きさに調整済み・未調整によってCSSの書きかたが変わります。 WebFontより画像のほうが重たいし、画像の大きさ調整をしたほうがCSSも短くなるし、読み込む速度的にも良いのでオススメかな。 色んな状況もあるかと思うので、適当な大きさの画像・調整済み画像のとき、2種類のCSSを書いておきますね。 url(ここ画像URL指定)とある場合、画像のパスを入れてください。以下は例。 url(https://domain.com/wp-content/…/hoge.png); 適当な大きさの画像をいれる場合のCSS .archive-title span:before { content:""; background: url(ここ画像URL指定) no-repeat; /* 背景 */ background-size: contain; /* 背景を領域におさめる */ di
Cocoonスライドイン（モバイル下固定メニューボタン）をCSSだけでカスタマイズ！
スライドインボタンはCocoon設定でデフォルト表示されている もし変更していた場合、管理画面Cocoon設定よりモバイルタブを選択、『モバイルボタンレイアウト』のチェックを『スライドインボタン』に入れて変更を保存！ スライドインを表示したくないときの設定 スライドインは非表示にしたい 下に固定表示させたくない場合 上記画像のとおりCocoon設定『モバイル』タブ『モバイルボタンレイアウト』より、『ボタンを表示しない（ミドルメニューのみ）』にチェックを入れて保存すればモバイルなどでは表示されません。 トップボタンを選択すれば、上部にナビが表示されるようになります。 背景色を変えたい スライドインの指定は.mobile-menu-buttonsで背景色を変更できるので、お好みの色を指定し変更してくださいね。 /* --------------------------- * * スライドインの
Cocoon見出しのカスタマイズ：hタグ装飾が反映しないとき試す（セレクタ）指定方法
CSSの優先順位を簡単に説明 コピペしたCSSをそのまま貼り付けたらスタイルが反映しない。。どうして？？と思いますが、CSSの指定方法が弱いのが原因の1つです。 強い順に指定方法を書くと以下の通り。 HTMLに<h2 style="color: #fff;">などスタイル属性が書いてある CSSの指定方法が#main .article h2 {} CSSの指定方法が#main h2 {} CSSの指定方法が.article h2 {} CSSの指定方法がh2 {} こんな順番でCSSの強さがドンドン弱くなります。詳細は以下をどうぞ。 LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは CSSコピペでウマく見出しを反映させる良い方法 ザックリと後述してますが、親テーマで指定しているスタイルをそのまま指定すれば反映されます。 LINKリンク置く場所 例えば上記のリンクバッジの
CSS position: absolute;の指定でボタン画クリックできない！z-indexが効かない原因と解決方法
SNSボタンをその領域::afterの前に出してあげると反映します。 反映しないボタンを::afterの前・上に置くCSSを追加する z-indexというCSSは、重なった要素を前に出したり、逆に後ろに出したりできます。 z-index: 1;これで何の指定もないと前に出ます。 SNSシェアボタンのスタイルは簡単に以下の通り。 .article ul.snsp { background: #fffcfdde url(画像のURL) no-repeat bottom; width: 320px; max-width: 100%; margin: 1.2em auto 0; padding: 1.2em 0 2em; transform: rotate(-1deg); } これにz-index: 1;を追加しても反映しません。 z-indexを指定しても反映しない原因 z-indexはposi
Simplicityスマホで、画像img・iframe・表tableが見切れて横揺れ・はみ出す時、CSSで対処
Simplicity2で横揺れ対策！追記すると良いスタイル すべてのdiv・画像、iframe・テーブルの幅を100%に指定すればOK！詳細な説明は後述。 div, img { max-width: 100%; height: auto; } iframe { max-width: 100%; } table { width: 100%; } ブログカードを引用などの領域で囲むときは以下も追加。 .blog-card { min-width: 100%; } これで はみ出すことはありません。 まだ画像が横揺れするとき ボーダーと内側の余白paddingの計算が合っていないので、はみ出すので下記をどうぞ。 LINK何で画像の枠がはみ出すの！？max-width:100%だけではダメ！そんなときの解決法 文字がはみ出すとき 文字が領域からはみ出して横揺れする場合は、改行ポイントの指定を変更す
番号なしulリストを記号・マーク・画像で装飾！CSS初心者が応用できるカスタマイズ説明あり
ul liを入れ子にしたとき、階層ごとにスタイルを変えたほうが項目の見栄えが良いので、見ていて分かりやすいです。 CSSでスタイルを触りだした頃、この指定方法が分からかったので、ulリストの基本的なセレクタの指定方法から書きますね。 ul li:before ul li ul li:before ul li ul li ul li:before 上記は、孫の孫まで反映させ、下記は直下の子だけ反映させる子セレクタ>を使った感じ。 ul > li:before ul > li > ul > li:before ul > li > ul > li > ul > li:before これに#mainなど、テーマに合わせた親要素を前に書いて半角スペースをあけると、優先順位で反映しない…ということがありません。 例えばstinger系では.post ul > li:beforeや.entry-cont
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cocoonタブボックスのタイトルをビジュアルエディタで変更したい！コピペカスタマイズ
WordPress！ページ・カテゴリ毎に背景画像を変更CSSほぼコピペ
WordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS
Cocoonナビメニューに階層を付けたとき、孫メニューが はみ出し見えない対処：コピペCSS
Cocoon！ヘッダーナビに画像を入れる、コピペCSSのカスタマイズ
Cocoon、main上『通知メッセージ』をカテゴリ・ページ毎に変更するカスタマイズ！HTML編
WordPress管理画面のカスタマイズ！CSSコピペで投稿ミスを防止しよう：Cocoon仕様
ブログのレビュー記事で『店舗情報』を見やすくカスタマイズ！tableを使ったHTMLとCSS
Cocoon！目次クリック直後、見出しに余白を入れスッキリ見やすく！コピペCSSカスタマイズ
WordPress管理画面ビジュアルエディタ上ボタンをスッキリさせるCSS：テーマCocoonで説明
WordPress投稿のテキスト画面が、超見やすいCSSカスタマイズ！スマホ・タブレットでミスタップを防ぐコード
リンク前、ボタンバッジ！行頭を揃えた、おしゃれなカスタマイズ
【CSSで画像指定】背景・コンテンツ前後に画像を使う、基本スタイル集！ブログのカスタマイズ