特典機能について

サイドバーの複数ブロック表示方法について | 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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

スポンサーリンク
サイドバーの複数ブロック表示方法につい...
 
共有:
通知
すべてクリア

[解決済] サイドバーの複数ブロック表示方法について


shibuyaryouhei
(@shibuyaryouhei)
Active Member
結合: 11か月前
投稿: 17
Topic starter  

お世話になっております。

サイドバーの件でお伺いしたいことがありご連絡させていただきました。

下記ご覧くださいませ

 

対象のページのURL: http://kangoshi-note.net/

相談内容:サイドバーしかり・固定ページもなのですが、2つ以上のブロックを表示させることは可能でしょうか?ご教示の程何卒よろしくお願いいたします。

解決のために試したこと:プラグインが使えるか・function.phpの編集なども試みましたが、うまくいかずでして、、、、

 

参考までに理想のサイトのURLとキャプチャお送りいたします。

理想: https://lounge.nurse-senka.jp/

 

環境情報:----------------------------------------------
サイト名:【看護師です。ノート】
サイトURL: http://kangoshi-note.net
ホームURL: http://kangoshi-note.net
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-pink/style.css
WordPressバージョン:5.7.2
PHPバージョン:7.4.16
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.2.1
カテゴリ数:9
タグ数:7
ユーザー数:7
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1056バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2021/07/看護師です。ノート-1.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddToAny Share Buttons 1.7.44
BackWPup 3.9.0
Classic Editor 1.6
Display Posts 3.0.2
Jetpack 9.9
List category posts 0.84.2
MaxButtons 8.6
Newpost Catch 1.3.9
Responsive Tabs 4.0.4
Search & Filter 1.2.14
Shortcodes Ultimate 5.10.1
Ultimate Member 2.1.21
User Submitted Posts 20210212
----------------------------------------------

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

前略、shibuyaryouhei さん

Cocoonに同梱されているスキンの中では、tecurioシリーズがブロックっぽいデザインかもしれません。

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

shibuyaryouhei さん

あとは、ご自身でカスタマイズするか、有償でプロに依頼するか、といったところでしょうか。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

shibuyaryouhei さん

以下のリンクにカスタマイズを請けておられる(有償です)方が掲載されています。

 

Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】

https://wp-cocoon.com/cocoon-custom/


投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 2年前
投稿: 136
 
投稿者:: @shibuyaryouhei

相談内容:サイドバーしかり・固定ページもなのですが、2つ以上のブロックを表示させることは可能でしょうか?

可能だと思います。でも、私はスキンなしです。

Cocoon設定>ウィジェットエリア>
表示させたいエリアがたくさん出てきます。

実際はどうやって表示させるか?
次の返信の画像を...


投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 2年前
投稿: 136
 

その

投稿者:: @tohyo2020

次の返信の画像を...

です。

ダッシュボード>外観>ウィジェット

の画面です。

たくさんのウィジェットを追加できます。
実際に運用しています。

ご参考にどうぞ。


わいひら 件のいいね!
shibuyaryouhei
(@shibuyaryouhei)
Active Member
結合: 11か月前
投稿: 17
Topic starter  

@leafytree 

やはりスキンを変えるというところになるんですかね、、、、、

有償でやるつもりはないのでなんとか試行錯誤してみます🙇‍♂️

 

 


shibuyaryouhei
(@shibuyaryouhei)
Active Member
結合: 11か月前
投稿: 17
Topic starter  

@tohyo2020 

なるほど!!

こちらは一つのブロックにトピックが並ぶような形にはならないのでしょうか?

 


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3281
 

shibuyaryouheiさん

「ブロック」という言葉が曖昧で、難しいです。

ブロックエディタと言われるように、HTMLのブロック要素を連想してしまいます。

サイドバーについては、投票2020さんの仰るように、ウィジェットをいくらでも設置できます。

サイドバーの背景色と、ウィジェットの背景色を変更すれば、そういう風に見えるのではないでしょうか。

それは、投稿ページ・固定ページ・トップページであろうと同様です。

ウィジェットは追加することができます。
(位置は限られますが。)

また、ウィジェットでなくても、ブロック要素で囲って、その背景色を変えることで、そういう風に見せることはできるのではないでしょうか。
(逆に言えば、別々な要素でも、背景色を同じにしてくっつけてしまえば、同じもののように見えます。)

 
やり方次第、工夫次第だと思います。
 
ただ、曖昧な問いには、曖昧な回答しか返ってない。。。気はします。

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

@shibuyaryouhei さん

「ブロック」とか「トピック」といった言葉が何を指しているのかよくわかりませんが、投票2020さんがご案内くださっているいるのは、WordPressやCocoonの基本的な使い方のことだと思います。

Cocoonの「ウィジェット」を使うと、「新着記事」や「人気記事」、また、「カテゴリー」や「タグ」などをサイドバーに配置することができます。

 

デザインをどのようにしたい、という事もあるかとは思いますが、先ずは、WordPressやCocoonの使い方から、いろいろ試してみると良いような気がします。

 

htmlやCSSでのカスタマイズ方法が良くわからない場合は、Cocoonに同梱されているスキンを、いろいろ適用してみるのも有りかと思います。

 

また、「Local」のようなサービスを利用して、ローカルのテストサイトでいろいろと試してみるのも良いと思います。ローカルのテストサイトであれば、いろいろ弄りすぎて、訳がわからなくなってしまっても、また、やり直せば良いだけですので。

 

以下は Local のサイトです。

https://localwp.com/

 

以下は、わいひらさんのブログの記事です。

 

WordPressローカル環境ツール「Local by Flywheel」のインストール方法と使い方

https://nelog.jp/local-by-flywheel-install

 

This post was modified 11か月前 by リフィトリー

わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3281
 

shibuyaryouheiさん

例えばです。

以下は私のテスト環境のサイドバーです。

 
Cocoonの標準の状態です。
 
これに、スキンを当てると、以下のように見え方が変わります。
 
 
中身はまったく同じものなのですが、デザインが変わっただけです。
(フォント・背景色などなど。)
 
そういうことなのかなぁ。。。という気はします。
 
 
 
デザインの変更は、別にスキンである必要はありません。
CSSというものを記載します。
 
ただ、馴染みのない方には、それが難しいのだと思います。
それを知識がなくても手軽にできるのが、スキンです。
 
 
 
【追記】
最初の画像のものも、更に同じ色にしてしまえば、更に同化して見えるでしょうし。
(デザインを変えただけです。中身は何も変わっていません。)

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

@shibuyaryouhei さん

デザインを変更するには、htmlやCSSの知識が不可欠です。

 

以下のトピックには有用な情報が満載です。

 

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

https://wp-cocoon.com/community/postid/31048/


わいひらshibuyaryouhei 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

@shibuyaryouhei さん

Cocoonの使い方はテーマ利用マニュアルを参照すると良いでしょう。

 

テーマ利用マニュアル

https://wp-cocoon.com/manual/#toc15

 


わいひらshibuyaryouhei 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 2年前
投稿: 136
 
投稿者:: @shibuyaryouhei

ブロック

投稿者:: @shibuyaryouhei

トピック

何がどれを指しているのか、というのがわかりませんが、、、

例えば、

「テキスト」をクリックしたまま、

「投稿タイトル上」に入れようかな
「投稿タイトル下」に入れようかな
「投稿本文上」に入れようかな

という画面です。


わいひらshibuyaryouhei 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 2年前
投稿: 136
 

ウィジェットの追加の仕方は他にもあります。

例、「テキスト」の

右側「▲ or ▼」をクリックすると「ウィジェットを追加」というボタンが出てきます。

その画面です。


わいひらshibuyaryouhei 件のいいね!
shibuyaryouhei
(@shibuyaryouhei)
Active Member
結合: 11か月前
投稿: 17
Topic starter  

@mk2_mk2 

失礼いたしました🙇‍♂️

言い訳ですが私自身wordpress初心者なこともあり、サーチ不足でした。

サイドバーの背景色をさっそくcssで編集したところそのような思い通りの表記となりました!

夜分にアドバイス頂戴し誠にありがとうございました!!!


わいひら 件のいいね!
shibuyaryouhei
(@shibuyaryouhei)
Active Member
結合: 11か月前
投稿: 17
Topic starter  

@leafytree 

ありがとうございます!

参考にいたします


リフィトリーわいひら 件のいいね!
shibuyaryouhei
(@shibuyaryouhei)
Active Member
結合: 11か月前
投稿: 17
Topic starter  

@mk2_mk2 

ご丁寧にありがとうございます🙇‍♂️

勉強させていただきます。

 

もしよろしければ、もう一つ困っていることがあり、お手隙でアドバイス頂戴できますと幸いです🙇‍♂️


わいひら 件のいいね!
共有:
スポンサーリンク
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をコピーしました