特典機能について

モバイルロゴ(アイコン)調整 | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
共有:
通知
すべてクリア

[解決済] モバイルロゴ(アイコン)調整


bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

お世話になっております。 先日「ヘッダー左側にソーシャルアイコンを表示」にてお世話になったのですが、PCで表示するときれいにヘッダーアイコンが表示されます。 モバイル環境ですと添付ファイルのようになってしまいます。 この二つのアイコンを下記のように調整したいのですが、style.cssにはどのような記述になるのでしょうか?

1.アイコンを右側又は、左側に寄せる。

2.アイコンを少し下に移動。

3.アイコンの間隔を詰める。

尚、モバイルデバイスは、iPhoneX Max及び、iPad Pro (11inch)です。

iPadに関しては、横表示ですと問題ありません。

CSSをみますと、@media screen and (max-width: 1023px)とあるのですが、こちらにそれぞれ記載するのでしょうか?

 

フッターメニューについても、幅を小さくしたいのと、もう少し下に移動できるのでしょうか?

 

色々と申し訳ありません。 よろしくお願いいたします。


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

メディアクエリ、理解の為、以下を一読する事をお勧めします。

https://www.seojuku.com/blog/responsive-mediaquery.html#CSS_media_Web


わいひら 件のいいね!
bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

chu-ya様

ご連絡ありがとうございます。 また、メディアクエリの件ありがとうございました。

勉強になります。 下記のような感じでCSSに追加したのですが、モバイル上では何も変化は起こりません。そもそも、sns-follow-buttonsではないのでしょうか?

 

/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
.sns-follow-buttons a.follow-button {
border-radius: 50%; /*丸くする*/
width: 1px;
height: 15px;
font-size: 10px; /*アイコンのサイズ*/
margin-left: 19px; /*左側の余白*/
background-color:#000;
}
}

 

以上、よろしくお願いいたします。

 


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

@bravo0916 さん

メディアクエリをよく理解して下さい。
画面サイズが1023px以下なら、書かれているCSSが適用になります。
結果、iPhoneX Maxは1023pxより画面が小さいので、適用されません。


bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

頂いたURLですと、iPhoneX Maxの縦幅が下記のように414pxですので、

480px以下のところに記載すればよいですよね? しかしながら、SNSアイコンの変化はありません。 もしよろしければ、どなたか下記のパラメーターであっているのかご教示いただけますでしょうか。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.sns-follow-buttons a.follow-button {
border-radius: 50%; /*丸くする*/
width: 1px;
height: 15px;
font-size: 22px; /*アイコンのサイズ*/
margin-left: 0px; /*左側の余白*/
background-color:#000;
}
}

iPhone XS Max/XR/11/11 Pro Max896px414px

Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@bravo0916 さん

このようなものでどうでしょうか。既存の CSS が分からないため、その SNS アイコンに関する全てを書いています。

.header-container {
  padding: 0 16px;
}

.header-in {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.header-in .sns-follow {
  display: flex;
  margin: 0;
}

.header-in .sns-follow-message {
  display: none;
}

.header-in .sns-buttons {
  gap: 8px;
}

.header-in .follow-button[class] {
  background-color: transparent;
  font-size: 24px;
  margin: 0;
  width: 45px;
}

※ もし、この CSS で変化しない場合は、子テーマの style.css に問題があるかもしれません。

添付動画は完成図です。


わいひら 件のいいね!
chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

@bravo0916 さん

書いた通り反映されています。
以下のCSSですが幅の指定がないので、円にはなりません。
またclassですがbc-brand-color.sns-follow .twitter-buttonが優先されるので、背景黒とはなりません。
デベロッパーツールで確認願います。

@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  .sns-follow-buttons a.follow-button {
    border-radius: 50%;
    /*丸くする*/
    width: 1px;←幅がない!!!!!!!
    height: 15px;
    font-size: 22px;
    /*アイコンのサイズ*/
    margin-left: 0px;
    /*左側の余白*/
    background-color: #000;
  }

わいひら 件のいいね!
bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

Akira様

フィードバックありがとうございます。 ご教示頂いたCSSと、こちらで少し追加した結果、無事にうまくいきました。 本当にありがとうございました。 最後に一つ質問で恐縮ですが、モバイル設定にて、トップメニューを表示にしております。 添付ファイルをご覧いただきたいのですが、このMENUを、下のヘッダー部分に入れ、「MENU」という英文を削除して横三本線のみを表示というのは可能なのでしょうか? 以前、ご指摘されていた、function.phpに記載となるのでしょうか? 何度も申し訳ございません。 もし何かおわかりでしたらご教示頂けると幸いです。

chu-ya様

ご指摘ありがとうございます。 初心者な為、とんちんかんな質問をしてしまい申し訳ありません。 いろいろと教えていただき感謝しております。


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

以下の通りです。

.slicknav_menu .slicknav_menutxt {
  display:none;
}
.slicknav_menu .slicknav_icon {
  margin:0;
}

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13492
わいひら - Facebookわいひら - Twitter
 
投稿者:: @bravo0916

添付ファイルをご覧いただきたいのですが、このMENUを、下のヘッダー部分に入れ、「MENU」という英文を削除して横三本線のみを表示というのは可能なのでしょうか? 以前、ご指摘されていた、function.phpに記載となるのでしょうか?

カスタマイズすれば可能です。CSSでもできますが、今回のケースで言えばfunctions.phpを用いたPHPカスタマイズの方がスマートな方法かもしれません。

やり方は、以下のPHPコードをfunctions.phpに追記する形でコピペすればできるかと思います。

//「トップメニュー」の「MENU」を削除する
add_filter('wp_enqueue_slicknav_label', function(){
  return '';
});

わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13492
わいひら - Facebookわいひら - Twitter
 

あ…、chu-yaさんがCSSでの実装方法を先に書いておられました。
CSSでも、PHPでも見た目は同じになるので、どっちでも良いとは思います。


bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

わいひら様 chu-ya様

ご指摘いただきましたパラメータをfuncitons.php又は、CSSに記載して表示できました。 ありがとうございます! 尚、このMENUをソーシャルアイコンが表示しているヘッダーに移動したのですが、この場合は、下記のようなパラメータ値をfunctions.phpに追加でしょうか? こちらで試したのですが、うまくいきません。 恐らく、get_template_xxxxxみたいなものを記載して、MENUアイコンのある場所を指定するのでしょうか?

add_action('wp_slicknav_menu', function(){
return'';
});


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@bravo0916 さん

添付した動画は、ご希望に沿いますか?

もし、ご希望に沿う場合は、最初からやり直すのがいいと思います。

尚、「MENU」という英文を削除しただけではアクセシビリティの面で問題です。aria-label の追加が必要です。


わいひら 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

申し訳ありません。修正します。

サイトタイトルを考えたら、CSS を追加するだけの方が楽かもしれません。

子テーマの style.css の上部に以下の部分があります。

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

ここに CSS を追加し、このようにすれば先程の添付動画と同じになります。

※ 背景色の変更は別途指定が必要です。

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .header-in .sns-follow {
    left: 0;
    position: absolute;
    top: 0;
  }
}

また、「MENU」という英文を削除すると、スクリーンリーダーを利用している方は、そこが何なのか全く分からなくなります。そこで、スクリーンリーダーに対し、「MENU」に代わる説明を追加するのがいいと思います。子テーマの javascript.js に以下リンク先のコードを追加します。

https://notepad.pw/share/ekkubd9p1

尚、サイトタイトルを非表示にするのもアクセシビリティの面で問題が発生します。


わいひら 件のいいね!
bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

Akira様

詳細なご回答ありがとうございます! こちらで試してみましたが、SNSアイコンが上に移動して、MENUと同じ位置にきました。 しかしながら、下記のヘッダー部分(添付ファイルの赤線)が残っています。 これを削除又は、MENUのみを下のヘッダー部分に移動してSNSアイコンと同じ位置にするのは可能でしょうか? スクリーンリーダの件、フォロー頂きありがとうございます! 感謝いたします。


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@bravo0916 さん

可能ですが、現在の状態を拝見しないと解決方法が分かりません。

サイトタイトルに関係していると思いますが、サイトタイトルはどのようにされていますか?

尚、前回のトピックにも書きましたが、サイトタイトルを非表示にするのは問題です。アクセシビリティで間違いなく問題が生じます。また、いわゆる SEO にも悪影響が出るかもしれません。


わいひら 件のいいね!
bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

@Akira様

ご連絡ありがとうございます。 現状ですが、サイトタイトルのところは空白となっています。 何か良いタイトルか、ロゴを考えたのですが、デザインを考慮すると何も入れない方が良いかなと考え空白にしています。 まずは、デザイン優先で、その後のSEO等については検討していけたらと思います。 如何でしょうか。


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@bravo0916 さん

Cocoon 設定 > ヘッダーの「高さ(モバイル)」に数値を入力されていますか?

もし、入力されている場合は、その数値の削除でご希望に沿うと思います。

数値を入力されていない場合は、実物を拝見しないと分かりません。


わいひら 件のいいね!
bravo0916
(@bravo0916)
Active Member
結合: 2か月前
投稿: 13
Topic starter  

Akira様

こちらで設定してみましたが、無事に表示されるようになっています。 貴重なお時間を頂き、本当にありがとうございました。 

 

chu-ya様、 わいひら様

色々とサポート頂き感謝しております。 有難うございました。

 


わいひら 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

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