Cocoonでスライドインを使ってると『左下』にある『≡メニュー』ボタンをタップした、スマホ用ナビの『背景色』や『デザイン』を可愛くするCSSをご紹介❦ どのようにCSSを指定すれば『どこが反映』するか、はじめにザッと簡 […]
![CocoonスライドインのNaviメニュー!背景など可愛くカスタマイズするCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f0d7aeedd697d7ae65d003b4a6470aaba81f3e0/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fbibabosi-rizumu.com%2Fwp-content%2Fuploads%2F2018%2F11%2Fmenu-drawer-12.png%3Ffit%3D635%252C267%26ssl%3D1)
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ページ
画像のサイズを適切な大きさに調整済み・未調整によって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設定でデフォルト表示されている もし変更していた場合、管理画面Cocoon設定よりモバイルタブを選択、『モバイルボタンレイアウト』のチェックを『スライドインボタン』に入れて変更を保存! スライドインを表示したくないときの設定 スライドインは非表示にしたい 下に固定表示させたくない場合 上記画像のとおりCocoon設定『モバイル』タブ『モバイルボタンレイアウト』より、『ボタンを表示しない(ミドルメニューのみ)』にチェックを入れて保存すればモバイルなどでは表示されません。 トップボタンを選択すれば、上部にナビが表示されるようになります。 背景色を変えたい スライドインの指定は.mobile-menu-buttonsで背景色を変更できるので、お好みの色を指定し変更してくださいね。 /* --------------------------- * * スライドインの
番号なしリスト前マークをキレイにカスタマイズするCSS 書いたコンテンツのみのulリスト前マークをカスタマイズする方法なので、コンテンツを囲う親要素を紹介する下記CSSの、ulの前に指定してください。.entry-contentは、SimplicityやデフォルトのTwentyシリーズの親要素です。 Stingerシリーズは.postに変更してください。SNSボタンなどのリストまで装飾されるなら、その項目のみCSSの初期化が必要です。よくわからない場合は、コンテンツ部分のみ<div class=”entry-content”>で囲めば初心者さんも簡単にカスタマイズが可能です! LINKWordPressでコンテンツのみの親要素を作る!カスタマイズした装飾を本文以外、反映させない方法 ulリストのカスタマイズ、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スタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く