ワードプレスcocoonをスマホでも綺麗に見せるccs追加

とも美の画像テンプレcocoon

スマホも編集しなくては、タイトルやスタイルがはみ出てしまう!

これは覚えておかないと後でおかしなことになったときに消せなくなってしまうので、覚書!

ともみ
ともみ

忘れっぽいし、メモしても無くしちゃうし!

やっぱりブログに残しておくのが一番だ💛

①ダッシュボードの中のテーマエディタを選択

②画面が移行したら右上の編集するテーマを選択で『cocoon child』を選択。ここ大事!

③スタイルシートの「@charset “UTF-8”;」から始まる部分は残して最下部に移動に下記をコピペ

/************************************
**モバイル表示 ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #90C31F!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
margin-left:1em;
}
span.fas.fa-bars::before{
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

これで更新を押してスマホで見ると完璧に出来上がっていました!

これは、yuji.blogさんのサイトを参考にさせていただきました。

次のページではアドセンスの停止を食らった話です。。泣けるわぁ


以上、yuji blogさんのサイトは神サイトです!

スポンサーリンク
milkyをフォローする
テンプレcocoon
milkyをフォローする
imajiki.com

コメント

タイトルとURLをコピーしました