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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

トップへ戻るボタンの応用方法
 
共有:
通知
すべてクリア

[解決済] トップへ戻るボタンの応用方法

9 投稿
2 ユーザー
3 Reactions
1,129 表示
(@takaaa)
Eminent Member Registered
結合: 3年前
投稿: 20
Topic starter  

トップへ戻るボタン(以降、トップボタン)のようなボタンでコメント欄に移動するボタンを作ろうと思っています。

位置はトップボタンの上で。

調べてもトップボタン自体のカスタマイズ方法(トップへ戻るボタンをカスタマイズする!【コピペでOK】‐WordPress・Cocoon編‐ | kikiblog (blogkiki.com))やhtmlやcssで作るやり方(【CSS】トップに戻るボタンの作り方【コピペでOK】 (csshtml.work))もありましたが上手く行きませんでした。

htmlやcssで作るやり方では、カスタムHTML と編集画面下のカスタムCSSに書きましたが上手く行きませんでした。

 

いい方法はありますか?

アドバイスをよろしくお願いいたします。

 


   
引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

子テーマの tmp-user / footer-insert.php に下記コードを追加します。

https://notepad.pw/share/z1e5rz7qh

次に、子テーマの style.css に下記 CSS を追加します。

.go-to-comment {
  bottom: 64px;
}

これで完成です。

ただ、「トップへ戻るボタン」と同様に、ページの上部では非表示になります。ページ上部で表示する場合は、ほんの少しの変更が必要です。

また、Safari ではスムーススクロールにはなりません(スクロールがアニメーションにならない)。


   
わいひら reacted
返信引用
(@takaaa)
Eminent Member Registered
結合: 3年前
投稿: 20
Topic starter  

@akira Akiraさんアドバイスをありがとうございます。

機能的には上手く行きました。

でもそのままだと「コメント」の場所に飛ぶので「コメントをどうぞ」の場所に飛ぶように

 const comment = document.getElementById('comment-area');

 const comment = document.getElementById('respond');

に変更しました。

またそのままだとこの様に表示されるので影?の消し方、ボタンの形、色、アイコンの色、アイコン自体の変更をする際のアドバイスをいただけますか?

【コピペOK!】ページトップボタンを簡単に実装する方法 (universe-web.jp)のCSSを参考に

class go-to-top-buttonのままだとトップボタンにも影響が出そうなのでgo-to-comment-buttonを作りstyle.cssに

.go-to-comment-button {
    width: 50px;
    height: 50px;
    text-align: center;
    background: #7db4e6;
    border-radius: 50%;
    line-height: 50px;
}

を足してみましたが新しくアイコンができるだけで上手く行きませんでした。

良ければアドバイスを下さい。

 


   
返信引用
(@takaaa)
Eminent Member Registered
結合: 3年前
投稿: 20
Topic starter  

表示されるアイコンはこれです。


   
返信引用
(@takaaa)
Eminent Member Registered
結合: 3年前
投稿: 20
Topic starter  

ボタンの形と色はできました。やはり

 <button class="go-to-top-button" type="button" aria-label="コメントへ移動する">

 <button class="go-to-comment-button" type="button" aria-label="コメントへ移動する">

に変えて

開発ツールでトップボタンのCSSを参考に

.go-to-comment-button {
  
    background-color: #ea5506;
    color: #333;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    border-radius: 50px;
    font-size: 22px;
	
}

を足したらできました。

自分でも試行錯誤していますが、影なのか縁?の消し方、アイコンの色、アイコン自体の変更をする際のアドバイスを良ければお願いします。

 


   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

まずは、takaaa さんがお書きになった CSS の削除をお願いします。また、HTML も元に戻してください。

アイコンの変更

私は SVG でアイコンを表示しましたが、どうやってアイコンを表示されたいですか?もし、Font Awesome を CSS で表示されたい場合は、HTML を下記のように変更します。

※ Cocoon 設定 > 全体タブにある「サイトアイコンフォント」で Font Awesome 5 を選択しているとします。

<div id="go-to-comment" class="go-to-top go-to-comment">
  <button class="go-to-top-button" type="button" aria-label="コメントへ移動する">
    <span class="far fa-comments"></span>
  </button>
</div>

span の class の変更で、使いたいアイコンに変更できます。アイコンは下記リンクから探せます。

https://fontawesome.com/v5/search

SVG をお使いになる場合は、<svg> タグを書き換えます。

縁とか色とか

Font Awesome を CSS で表示される場合は、下記の CSS を追加します。

.go-to-comment .go-to-top-button {
  background-color: #ea5506;
  border: none;
  border-radius: 50%;
  color: #333;
}

SVG で表示される場合は、上記の CSS に加え下記の CSS も追加します。

.go-to-comment svg {
  fill: currentColor;
}

Safari でのスムーススクロール

もし、Safari でもスムーススクロールにする場合は、以下の polyfill(非対応のブラウザでも動くようになるやつ)も読み込みます。

https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js

もし、やり方がお分かりにならない場合は、ご遠慮なくご質問ください。

This post was modified 3年前 2回 by Akira

   
わいひら reacted
返信引用
(@takaaa)
Eminent Member Registered
結合: 3年前
投稿: 20
Topic starter  

@akira SVGがよくわからないのでCSSでやります。

おかげで理想通りにできました。

Safari でのスムーススクロールにも挑戦してみようと思うので教えてください。

 


   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

Safari への対応

 ① まず、下記リンクを開き、ctrl + A などでコードを全選択し、ペーストします。

https://raw.githubusercontent.com/iamdustan/smoothscroll/master/src/smoothscroll.js

② 次に、下記リンクを開き、① のペーストしたコードを貼り付けます。貼り付けた後に「Minify」ボタンをクリックしコードを縮小します。

https://www.toptal.com/developers/javascript-minifier/

③ 最後に、子テーマの tmp-user / footer-insert.php に追加したコードに、② の縮小したコードを貼り付けます。場所は、下記の「// この下に縮小したコードを貼り付ける」の下です。

https://notepad.pw/share/2ff3hzdt1

ちょっとした変更

子テーマの tmp-user / footer-insert.php に追加したコードの最初に、以下の部分があります。

<?php if ( is_single() ) : ?>

これをこのようにご変更ください。

<?php if ( is_single() && is_comment_open() ) : ?>

変更後は、投稿ページの編集などにあるディスカッション設定が反映されます。「コメントを許可」のチェックを外している時はコメントフォームが出力されないため、ボタンも出力しないようにする変更です。

This post was modified 3年前 by Akira

   
わいひら reacted
返信引用
(@takaaa)
Eminent Member Registered
結合: 3年前
投稿: 20
Topic starter  

@akira わかりやすい説明のおかげで上手くできました。(と言ってもMAC製品を持っていないので確認ができないですが。調べても製品を使うしかなさそうなので家電屋でも行って確認します。)

投稿者:: @akira

ちょっとした変更

も聞こうかなと思っていた事なので助かりました。

akiraさんアドバイスをありがとうございました。

 


   
返信引用
共有:

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

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

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

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

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

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

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

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