サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-01-09 15:13
はじめまして。
サイトを作ろうと思って一昨日からcocoonを利用させていただいています。
サイト名、またはロゴ画像からトップページ（ホーム）に戻ることが出来ますが
ヘッダーだけにして、ヘッダーをクリックするとトップページに戻るという形にすることは出来ますか？
2019-01-09 21:12
PHPファイルとCSSの編集でイケるかと思われますので、Cocoonのテンプレートを見てみました。
Cocoon: header-container.php (tmp/header-container.php)を編集する感じになると思います。
そのファイルをtmpフォルダにいれて子テーマに導入する感じです。
wp-content/themes/cocoon-child-masterフォルダ内
あとはリンク先はトップページにして、CSSで高さやheaderの全領域でクリックできるようにスタイルを付けるとイケるかと思われます。
※状況が全く不明ですので、テンプレートファイルだけ紹介させていただきました。
This post was modified 5年前 by かうたっく
わいひら reacted
Topic starter
2019-01-10 10:44
かうたっくさん、お返事ありがとうございます。
色々調べながら試してみたのですがあいにく初心者なもので全く理解できておりません。
header-container.phpの場所は確認できました。
2019-01-10 11:33
aタグ（インライン要素：段落などの要素の中に改行なしで反映されるタグの1つ）は段落のような範囲全部を装飾するものではありません。
段落や引用などのように全範囲をクリックしないといけません。
これではクリックする範囲はCocoonトップと言う青い字の部分しか反映されないので、上記引用のブロックの範囲をすべてクリックできるようにします。
<blockquote><a href="http://Cocoonトップ">Cocoonトップ</a></blockquote>
これは引用タグblockquoteタグと/blockquoteタグにかこまれた場所にリンクaタグを置いている感じです。
それをheadタグと/headタグに囲まれた間にaタグを書き込み、CSSで指定します。
CSSの指定方法は aタグ 領域 などで調べると出てくると思います。Cocoonの装飾に合うかは試さないとわかりません。
申し訳ないですが試してませんし、よっぽどやること順位をどんでん返ししない限り試さないかもしれません。
わいひら reacted
Topic starter
2019-01-10 12:01
かうたっくさん、お返事ありがとうございます。それは固定ページにあるロゴからHOMEに飛ぶ方法でしょうか？
ヘッダー部分のロゴ画像とサイト名を非表示にしたので、代わりに各ページにあるヘッダー画像からHOMEに飛べるようにしたいのですが同じ方法で出来ますか？
2019-01-10 15:26
固定ページにあるロゴからHOMEに飛ぶ方法でしょうか？
再確認してませんが、そのファイルは固定ページとかではなく、ampページかそうでない通常ページ全部だという認識です。
ちなみにCSSで非表示にしても何も変わらないんですね。
該当PHPファイルの div id=headerの間か、iheader-inに囲まれている場所に、Htmlをかく感じになるかと思います。
個人的にやりやすい良い時間に、一度やってみますね。※忘れなければ
お時間いただいてる間、テスト環境の準備でもしてると今後、個人的にカスタマイズを行いたい時、便利です。
あまりにもできない感じであれば、…有料で誰かに頼むのも良いかもです。
わいひら reacted
2019-01-11 04:22
寝ぼけまなこで思いついたんですが、ヘッダー画像を全画面に表示すればOKだと思います。
サイト名を消さなくても画像にalt（代替テキスト）をつければ問題ないですし。
って事で工程は以下
- ヘッダー画像をロゴに
- ヘッダー背景は削除
- .site-name-textのCSS：非表示にしたものを全部消す
- 画像の領域を全画面にする
- 必要であれば、PCビューなど（メディアクエリ @media screen and (min-width: 1243px) {} など）を使って高さを決める
わいひら reacted
2019-01-11 04:36
上記リスト1.2.3の状態で、以下のようなイメージ。
https://gyazo.com/20b294d8fb7d0a93d9cce84ceada1157
リスト4ではPCビューのみに以下を適応させる
#header-in {
width: 100%;
}
このCSSでPCビュー大画面でも全表示。以下イメージ画像
https://gyazo.com/a2c6e7623a15157bd55bf393b1b67a8b
リスト5で、ヘッダーが高すぎると思うのであれば、現状510px高さの指定があるようなので、CSSで指定。
.logo.logo-header.logo-image {
height: 510px;
overflow: hidden;
}
上記CSSで以下のようなイメージ
https://gyazo.com/5c73196d3d27d3d39ec857384520c2ce
これならCSSだけで簡単に済むし、サイト名を消さずリンクも踏めると思います。
ブレークポイントは1236pxとしてますが、任意の数値に変更してください。
@media screen and (min-width: 1236px) {
#header-in {
width: 100%;
}
.logo.logo-header.logo-image {
height: 510px;
overflow: hidden;
}
}
こんなイメージで変更してご確認いただけますか。
・・追記・・
ヘッダー.pngと言う名前にしてるのでheader.pngなどに変えてアップロードした方が安心だと思います。文字化けしたらリンク切れを起こしかねないので、念のため。
This post was modified 5年前 2回 by かうたっく
わいひら reacted
Topic starter
2019-01-11 14:07
かうたっくさん、お返事ありがとうございます。
３番までやってみたのですがPC版では画像が大きく表示されすぎているのと上下に余白が出来ていて、
モバイル版ではサイズは良いのですが上下に余白が出来てしまいイメージ画像の用にはなりませんでした。
CSSはスタイルシートに足す形で良いんですよね？
やってみましたが画像が大きく表示されたままで変わらず、モバイル版では画像が伸びてしまいました。
難しそうなので各ページ下部のリンクから戻ってもらうことにしようかと思います...
お手数おかけしました。
2019-01-11 15:20
こんにちは。
サイト拝見しました。
現在の状態のままで、以下のコードを追加すればヘッダー全体をクリック出来るようになるかと思います。
#header {
position:relative;
}
.site-name-text-link {
position:absolute;
top:0; right:0; bottom:0; left:0;
}
よければ一度お試しください。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。