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
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
カエレバ、デザイン変更CSSカスタマイズ！ほか簡単な登録方法
下記HTMLのピンクの文字部分を消してコードを入れてください。 <div class="center">この空間にコード</div> styleシートに下記コードを追記。 .center { text-align: center; } これでセンタリングできますよ。 カエレバ、デザインをカスタマイズ！ カエレバはあらかじめ決まったデザインがあります。 自分好みのデザインを！と考える場合は、ブログのCSSでスタイル変更ができる、amazlet風-2(cssカスタマイズ用)を使用し、CSSをコピペして使ってください。 カエレバのデザインCSS。PCビュー：画像とタイトル横並び /* * ヨメレバ・カエレバ * **********************/ /* 大枠 */ .booklink-box, .kaerebalink-box { border: 1px solid #cc9ef7;
CSSで番号なしulリストマークのカスタマイズ！※子要素がズレる・はみ出す原因text-indentは入れちゃダメ
番号なしリスト前マークをキレイにカスタマイズするCSS 書いたコンテンツのみのulリスト前マークをカスタマイズする方法なので、コンテンツを囲う親要素を紹介する下記CSSの、ulの前に指定してください。.entry-contentは、SimplicityやデフォルトのTwentyシリーズの親要素です。 Stingerシリーズは.postに変更してください。SNSボタンなどのリストまで装飾されるなら、その項目のみCSSの初期化が必要です。よくわからない場合は、コンテンツ部分のみ<div class=”entry-content”>で囲めば初心者さんも簡単にカスタマイズが可能です！ LINKWordPressでコンテンツのみの親要素を作る！カスタマイズした装飾を本文以外、反映させない方法 ulリストのカスタマイズ、CSSのコード 番号なしリストを見やすく、キレいなスタイルに変更する基本のスタイル
ol番号付きリストのカスタマイズ！デザインをきれいに変更する方法。リストの数字を任意の番号3から始めたい時のCSS
olのスタイルを見やすくキレイにカスタマイズ！※Gsuh4でも採用のもの olの番号付きリストのデザインをキレイに見せたいので、リストマークをカスタマイズします。序列ありリストolの項目（リスト）を装飾する前の下地と、その説明をご覧ください。 ol { counter-reset: li; /*olのリストの数字をリセット*/ } ol > li { list-style: none; /*元のスタイルを非表示にする*/ } ol > li:before { counter-increment: li; /*リストの数字を1つ進める。IE7以下、未対応*/ content: counter(li); /*リストを連番にする*/ margin-right: 1em; /*要素が重なるから右へ移動*/ line-height: 1.6; /*文字が重なるのを防止*/ } これが基本のolスタイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cocoon検索フォームのカスタマイズ！デザイン変更、入力フォーム文字変更
Cocoonタブボックスのタイトルをビジュアルエディタで変更したい！コピペカスタマイズ
WordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS
Cocoon！トップに戻るボタンを画像にし、サイズ・hover画像を変えるコピペCSSカスタマイズ
Cocoon、main上『通知メッセージ』をカテゴリ・ページ毎に変更するカスタマイズ！HTML編
ブログのレビュー記事で『店舗情報』を見やすくカスタマイズ！tableを使ったHTMLとCSS
スマホでサイトが横揺れしてはみ出る・見切れるときのスタイル：対処方法まとめ
カエレバでAmazon写真が超縦長で、画像大にすると はみ出すときの2つの対処法
【CSSで画像指定】背景・コンテンツ前後に画像を使う、基本スタイル集！ブログのカスタマイズ