a{height:48px;width:48px}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}#search-menu-input:checked~#search-menu-content{-webkit-transform:translateY(20%);transform:translateY(20%)}.search-menu-content{padding-top:40px}WordPress初心者がブログ運営する上で必要なバックアップ方法。CSS・HTMLの基礎がわかるステップを丁寧に説明。『Cocoon』設定を開き『ボタン』タブをクリック。『トップへ戻るボタンを表示する』にチェックが入っている事を確認したら、下へスクロール。『ボタン画像』にトップに戻るボタンに使いたい画像を入れてください。※URLを入れるか、選択してメディアからアップロード。20px;}トップに戻るボタンの画像を大きくするCSS上述とおり戻るボタンの大きさは、元のトップに戻るボタンの大きさと同じです。画像を大きくしたい場合は以下CSSを追記してください。80px;}画像の最大値の変更をするCSS背景画像の最大値は120pxまでと親テーマに指定があります。それ以上の大きさにしたいときは以下のように指定してください。*/}マウスを置いたとき画像を変更hover前・hoverトップに戻るボタンの画像にマウスを置く:hoverしたとき、画像が2重にならないように元の戻るボタンをCSSで非表示にしカスタマイズしてます。hover画像も自由度が高くしたいので、画像サイズを調整して作成せず(元の戻るボタンと同じサイズでなくても良い)好きな画像を表示できるようCSSの微調整するようにしています。微調整の様子は以下記事を参考にどうぞ。見出し2章の1:『hover画像が大きくて見切れてしまう場合の対処』LINKCSSでTOPに戻るボタン、hover画像のみPCで表示させる超かわいい、カスタマイズ【Simplicity2】hover画像サイズ指定CSShover時の画像のURLはurl()カッコ内にいれてくださいね。上記CSSのpaddingの数値を4つ入れているのは、画像が見切れたときは画像に合わせて調整できるように入れてます。paddingの値を大きく指定すれば、以下画像のように左上にhover画像を入れる事も可能です。お好みにあわせてにカスタマイズを楽しんでくださいね。*/}}hover時の画像のURLはurl()カッコ内にいれてくださいね。画像のパス確認方法は、以下:目次1章:1.2あたりをどうぞ。LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像のURLはどこさいごにトップに戻るボタン画像を、好み通りに自由にカスタマイズしていただけたら!と思います。LINKCocoonカスタマイズの記事一覧へあぁ~~、、、可愛すぎるよぉ・・・。※動きの変更は気まぐれで時々やったりします。それでは、かうたっくでした❦スポンサーリンクスポンサーリンクこの記事が気に入ったらいいね!しよう最新情報をお届けします。コピーフォローするスポンサーリンクスポンサーリンクかうたっくビバ★りずむCheck!PostsCocoonカスタマイズCocoon見出しのカスタマイズ:hタグ装飾が反映しないとき試す(セレクタ)指定方法WordPressテーマCocoonを使い参考にしたページの通り見出しの変更をしたけど、うまく反映しないのはなぜ??と装飾し始めた頃は思うかもしれません。大半の原因は以下の通り。...2018.05.03CocoonカスタマイズCocoon!headerロゴ・ヘッダー背景画像をCSSだけでページ毎にスタイル変更するカスタマイズCocoonのCocoon設定からヘッダーにロゴ:画像をいれているけど、ページ毎にロゴ(header画像)を変更したい。背景画像をガラリと変えたい。Awesome5のTwitterアイコンのクラス属性(指定方法)が『fa』から『fab』に仕様変更され、AMPで表示されなくなりました。はみ出し見えない対処:コピペCSSCocoonのメニューに階層を付け、下層に子カテゴリなどをいれるとonマウスしたとき左へスライドして表示されます。置いてるメニューの位置などで、幅の狭い画面で見ると下層(孫カテゴリ)の...2018.05.21CocoonカスタマイズCocoon!目次クリック直後、見出しに余白を入れスッキリ見やすく!コピペCSSカスタマイズ目次をクリックして見出しに飛ぶと、特にh2タグは見出しデザインが見切れて見えますよね。...2018.05.03CocoonカスタマイズCoccon管理画面スタイル変更に!CSSを子テーマに導入コピペで簡単、実装方法CocoonもSimplicityも、親テーマに管理画面上のスタイルを変更できるadmin.cssが付いてて、かなり簡単に管理画面のスタイルを変更できます。オススメしたい人はWordPre...2018.04.29CocoonカスタマイズCocoon親テーマのバージョンアップでWordPress公開ページでエラー!原因の調べ方Cocoonを親テーマのバージョンアップした際、トップページと投稿公開ページで真っ白エラーが出ました。エラーの原因を特定する例として解決までの方法をご紹介。真っ白エラーだけでなくても、...2018.08.29CocoonカスタマイズCocoon、main上『通知メッセージ』をカテゴリ・ページ毎に変更するカスタマイズ!HTML編WordPressテーマCocoonではメインエリアの上に、ページに訪れた人への通知メッセージが設定で置けます。記事で設定したカテゴリ毎、または記事毎によって『お知らせしたいコメント』...2018.05.17CocoonカスタマイズCocoon検索フォームのカスタマイズ!デザイン変更、入力フォーム文字変更WordPressテーマCocoonのデフォルト『検索窓・検索フォーム・検索ボックス』言いかたはさて置き『サイト内検索』のカスタマイズをご紹介します。検...2018.07.18CocoonカスタマイズCocoon一覧タイトル:h1タグを装飾・h1タグタイトル前に画像を入れる時のCSSCocoon一覧ページのh1タグとは、カテゴリ一覧・タグ一覧・月ごとのアーカイブ一覧・書いた人author一覧などのタイトルです。アーカイブページのh1タグ:タイトルをデォルトからホンノリ装飾...2018.05.25CocoonカスタマイズCocoonスライドイン(モバイル下固定メニューボタン)をCSSだけでカスタマイズ!Cocoonのスライドイン(footer下にあるモバイル専用固定メニューボタン)はスマホ・タブレットでは画面下にずっと固定された部分です。自分のサイトカラーやイメージに合わせてスライド...2018.05.05CocoonカスタマイズCocoon!ヘッダーナビに画像を入れる、コピペCSSのカスタマイズグローバルナビに自作画像を入れると、サイトの差別化ができると共に、文字情報ではなく視覚・感覚的に内容がわかりやすい、さらに目に留まりやすい...などのメリットがあります。使わないボタンは管理画面上から消...2018.04.29CocoonカスタマイズCocoonタブボックスのタイトルをビジュアルエディタで変更したい!コピペカスタマイズCocoon拡張機能、スタイル欄にあるボックス(タブ)。管理画面ビジュアルエディタ上で『CHECK・ポイント・メモ』などのタイトルを『○○ポイント!』など自由に変更出来たら便利ですよね。...2018.07.11CocoonカスタマイズCocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。個人情報の取り扱いについてはリンク先をご確認ください。PostsCocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。/CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。PostsCocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。/CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。レンタルサーバー『エックスサーバー』エンジニア特化型Q&Aサイト【teratail(テラテイル)】無料会員登録カンタン&お得に可愛くなれる♪Rcawaii─登録30秒、カワイイ洋服借り放題!プロのおしゃれテクも学べて月額9,980円タイトルとURLをコピーしました。