今回の個別記事はモバイル表示のカスタマイズ記事になります
カスタマイズというよりは、調整っていう感じですけどね
特に難しいことはしてないので、コピペで使えると思います
Cocoonの設定
Cocoonの設定はこんな感じです、スライドインメニューにしてるだけですね
style.css
サイドメニューや広告表示が崩れるのを防ぐために
ブレークポイントを変更？追加？して少し細分化してあります
コンテンツ上部ウィジェット
モバイル表示だとサイドバーやカテゴリメニューはあまり見られてないかなーと思ったので
コンテンツ上部に検索バーを設置して、モバイル時のみ表示するようにコードを追記しています
/***** コンテンツトップ *****/
@media screen and (min-width: 1025px) {
.content-top {
display: none;
}
}表示自体はチェック・入力したページで表示、投稿ページのみにしています
フッターメニュー
最新バージョンである1.7.8ではフッターメニュー内にあるメニューボタンを押した時に表示される
カテゴリーメニューが親カテゴリのみ表示に変更されているみたいなので
この部分を変更して以前と同様に子カテゴリも表示するように変更しましたもしかしたら今後のバージョンで以前の状態に戻るかもしれません
.mobile-menu-buttons .sub-menu {
display: none; //これを
display: block; //このように変える
}ver1.7.8.2～この部分のコードは無くなっていますが以前と同じ表示方法に戻っています
この部分は公式フォーラムで質問をした所教えていただきました
ウィジェット部分のスタイル
/* フッターメニュー */
@media screen and (min-width: 951px) and (max-width: 1280px){
.footer-widgets {
display: flex;
}
}モバイル(スマホ)ではプロフィール画面だけを表示させている部分を
特定のサイズ以上の時にPC同様な表示にさせるためのコード
1025～1280px
@media screen and (min-width: 1024px) and (max-width: 1280px){
/***** cocoon 目次スタイル *****/
span[id^="toc"] {
padding-top: 1.7em;
}
/* ad link 2 */
.my_ad_banner2 {
text-align: center;
font-family: "Raleway", sans-serif;
}
}961～1024px
ソースコードを開く
@media screen and (min-width: 961px) and (max-width: 1024px){
/*サイドバー */
.no-mobile-sidebar #sidebar {
display: block;
}
main.main {
width: 68%;
}
.sidebar {
padding: 10px 0;
width: 30%;
}
/***** モバイルメニュー *****/
.mobile-menu-buttons {
display: flex;
opacity: .9;
width: 100%;
font-family: "Raleway", sans-serif;
}
.mobile-menu-buttons .menu-caption {
font-family: "Raleway", sans-serif;
}
/***** cocoon 目次スタイル *****/
span[id^="toc"] {
padding-top: 1.7em;
}
/* 関連記事スニペット */
.rect-mini-card .related-entry-card-title {
font: 700 1.1em/1.4 "M PLUS Rounded 1c";
}
}601~960px
ソースコードを開く
@media screen and (min-width: 601px) and (max-width: 960px){
.no-mobile-sidebar #sidebar {
display: none;
}
main.main {
width: auto;
}
/* カルーセル */
.carousel-entry-card-title {
font-size: 1em;
}
.header div.header-in {
min-height: 150px;
}
.mobile-menu-buttons {
opacity: 0.9;
width: 100%;
font-family: "Raleway", sans-serif;
}
.mobile-menu-buttons .menu-caption {
font-family: "Raleway", sans-serif;
}
.sidebar .sns-follow-buttons a {
width: 45px;
}
div.gsc-control-searchbox-only,
.gsc-control-searchbox-only-ja {
margin: 50px 0 0;
}
/***** cocoon 目次スタイル *****/
span[id^="toc"] {
padding-top: 1.7em;
}
/* 関連記事スニペット */
.rect-mini-card .related-entry-card-title {
font: 700 1.1em/1.4 "M PLUS Rounded 1c";
}
}481～600px
ソースコードを開く
@media screen and (min-width: 481px) and (max-width: 600px){
.header div.header-in {
min-height: 100px;
}
.tagline {
margin: -5px 0;
}
/* カルーセル */
.carousel-entry-card-title {
font-size: 1em;
}
.mobile-menu-buttons {
opacity: 0.9;
width: 100%;
font-family: "Raleway", sans-serif;
}
.blogcard-snipet {
font-size: 12px;
}
.mobile-menu-buttons .menu-caption {
font-family: "Raleway", sans-serif;
}
.sidebar .sns-follow-buttons a {
width: 45px;
}
div.gsc-control-searchbox-only,
.gsc-control-searchbox-only-ja {
margin: 50px 0 0;
}
/* ビデオコンテナ */
.video-container {
width: 100%;
}
.video-container .video {
margin: 30px 0 0 0;
}
/***** cocoon 目次スタイル *****/
.toc {
margin: 0 auto 15px;
}
span[id^="toc"] {
padding-top: 1.7em;
}
/***** ブログカード *****/
.ib-right .blogcard-content,
.eb-right .blogcard-content {
margin-top: 5px;
}
/* アプリーチ */
.appreach {
margin: 25px 0 0 0;
}
.appreach__detail {
width: auto;
}
/* 関連記事スニペット */
.rect-mini-card .related-entry-card-title {
font: 700 1.1em/1.3 "M PLUS Rounded 1c";
}
}480px以下
ソースコードを開く
@media screen and (max-width: 480px){
.header div.header-in {
min-height: 100px;
}
.tagline {
margin: -8px 0;
}
/* カルーセル */
.carousel-entry-card-title {
font-size: 1em;
}
.mobile-menu-buttons {
opacity: 0.9;
width: 100%;
font-family: "Raleway", sans-serif;
}
/* リードタイム */
.read-time {
font: 400 0.9em/2em "M PLUS Rounded 1c";
}
.blogcard-snipet {
font-size: 12px;
}
.mobile-menu-buttons .menu-caption {
font-family: "Raleway", sans-serif;
}
.sidebar .sns-follow-buttons a {
width: 45px;
}
div.gsc-control-searchbox-only,
.gsc-control-searchbox-only-ja {
margin: 50px 0 0;
}
/* インデックスカード */
.e-card-title {
font: 700 15px/1.1 "M PLUS Rounded 1c";
}
/* 入力欄パディング */
input#author, input#email,
input#siteguard_captcha {
height: 30px;
padding: 5px;
}
textarea#comment {
width: 100%;
min-height: 200px;
padding: 5px;
}
#respond.comment-respond {
width: 100%;
}
/* ビデオコンテナ */
.video-container {
width: 100%;
}
.video-container .video {
margin: 30px 0 0 0;
}
/* cocoon amazon affi */
.item-price {
font-size: 14px;
}
.product-item-content {
text-align: left!important;
}
.product-item-snippet {
padding-left: 25%;
text-align: left;
}
/* profile */
h2, h3 {
font: 1.2rem "Raleway", sans-serif;
}
/***** cocoon 目次スタイル *****/
.toc {
margin: 0 auto 15px;
}
span[id^="toc"] {
padding-top: 1.7em;
}
/***** ブログカード *****/
.ib-right .blogcard-content,
.eb-right .blogcard-content {
margin-top: 5px;
}
/* アプリーチ */
.appreach {
margin: 25px 0 0 0;
}
.appreach__detail {
width: auto;
}
/* 関連記事スニペット */
.rect-mini-card .related-entry-card-title {
font: 700 1.1em/1.3 "M PLUS Rounded 1c";
}
}スタイルはこんな感じです
どんな風に表示されるかはモバイルまたはデベロッパーツールで確認してみてくださいね
メニュー表示をトップへ移動させる
今はデフォルトの表示で問題ないですが、以前はフリーサーバを使っていて
ボトムに広告が入っていた為メニューをトップへ表示させていました
.mobile-menu-buttons {
top: 0;
opacity: 0.9;
}bottom: 0;を上記のように変更することでトップへ表示させる事が出来ます
opacity: ◯◯;は透過処理です
その他
ここからは当サイトではやっていませんが、背景色などを変更するためのコードです
メニューの背景色の変更
.mobile-menu-buttons {
background-color: お好みで;
}メニュー表示の幅変更
#navi-menu-content {
max-width: お好みで;
}サイドバー表示幅の変更
#sidebar-menu-content {
max-width: お好みで;
}phpファイル
ボタンの並び変更
mobile-default-buttoms.phpの並び順を変更
表記を英語へ変更
上記ファイル内にある読み込みファイルの表記を変更してあります
例：tmp/movile-navi-button.php
- $_MENU_CAPTION : __( 'メニュー', THEME_NAME ); ?>
+ $_MENU_CAPTION : __( 'menu', THEME_NAME ); ?>子テーマ内にtmpディレクトリを作成しそこへアップロード
おわり
調整っていう感じでカスタマイズと言えるような事はほぼしてませんねw
大した変更はしていませんが、どなたかの参考になれば幸いです
[share]
