サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年5月13日 01:03
Cocoonという素晴らしいテーマを公開していただきありがとうございます。
おかげでブログを楽しく運営させてもらってます。
今、Cocoonを使ったブログを開設して、CSSやTopへ戻るボタンを自分好みに変更しているところです。
ひとまず区切りがついたことろで、Skinという形での公開を考えていますが、自作の戻るボタンもSkinに含めることが可能でしょうか。
Skinを変更するだけで戻るボタンも変更されるとうれしいです。
もし出来るのであれば、PHPファイルの修正とかになりますか？
無理であれば、戻るボタンはあきらめます。
以上、ご回答よろしくお願いします
2018年5月13日 19:42
申し訳ないですが、ちょっと「Topへ戻るボタンをスキンに含める」という表現の意味が理解できていないです。
というのも、スキンは基本的にスタイルを変更するものであって、テンプレート変更する利用はできないからです。
なので、「こういうことなのかな？」と思う答えをいくつか書いておきます。
- トップへ戻るボタンのスタイルをスキンで変更することは可能です。
- トップへ戻るボタンに使用する画像をスキンに含めるというのであれば、可能です。
- トップへ戻るボタンのHTMLをスキンで変更することは不可能です（※JavaScriptを利用すればHTML変更は可能）。
- トップへ戻るボタンのテンプレートをスキンに含めても利用できません。
どれかが答えになっていればと思います。
トピックスターター 2018年5月13日 21:38
> トップへ戻るボタンに使用する画像をスキンに含めるというのであれば、可能です。
まさに、聞きたかったのはこれです。
戻るボタンの画像を作ったんですけど、言葉足らずでした、すみません。
> トップへ戻るボタンのHTMLをスキンで変更することは不可能です（※JavaScriptを利用すればHTML変更は可能）。
スキンを変えただけで、戻るボタンも切り替えるというのはできないということですね。
考えてみたら、スキンの変更で戻るボタンの画像のパスがかわるはずないので、当たり前のことでしたね。
すみません、いろいろ勘違いしていました。
ご回答ありがとうございました。
2018年5月13日 23:55
こんばんは
考えてみたら、スキンの変更で戻るボタンの画像のパスがかわるはずないので、当たり前のことでしたね。
画像を非表示にしてしまえば可能だと思いますよ。
トップへ戻るボタンに使用する画像をスキンに含めるというのであれば、可能です。
って事なので、画像のパスさえ入れられたら。
適当な画像が見当たらなかったので、アイコンを使わせていただき検証画面で試したんですが。
.go-to-top-button {
background: url( https://i2.wp.com/wp-cocoon.com/wp-content/uploads/2018/01/yhira-2.png ) no-repeat bottom left;
background-size: contain;
width: 72px;
height: 72px;
display: block;
margin-right: 10px;
}
.go-to-top-button span {
color: #fff0;
}
.go-to-top-button img {
display: none;
}
強引かも知れないですが、こんな感じでいけそうかもしれません。
https://gyazo.com/2cbc2a68a12b29d1e1ea3ddda4439153
色々試してやってみてくださいね＾＾
わいひら reacted
トピックスターター 2018年5月14日 23:23
かうたっくさん
アドバイスありがとうございます。
なるほど、そういう方法もありですか。
いろんなアイデアあるもんですね、勉強になります。
あれからいろいろ考えましたが、戻るボタンはセンスに自信がないのでスキンにいれないことにします（笑
ありがとうございました！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。