Wordpress無料テーマ『Cocoon』内機能「フッターモバイルボタン(モバイルスライドイン)」で表示が崩れる不具合?検証と、アイコン色・文字色・背景色変更のカスタマイズまとめ。 まいどおおきに!おおもと(@so88qa)です いきなりですが、ワードプレス無料テーマCocoon(コクーン)はシンプルで使いやすいですよね! でもちょっと、シンプルすぎて自分色に染めたいと思う人は多いはず おおもとよく言えば、シンプル ママわるく言えば、つまらない 今回の記事は … 2019-06-24: Cocoon1.8.5からヘッダーモバイルボタンが実装されたので、カスタマイズ不要になりました!*こちらの記事は記録として残しておきます。詳細 ヘッダーモバイルボタンの設定方 … WordpressテーマCocoonでモバイル(スマホ)ヘッダーメニューをプログラムなして変更する方法を紹介。ボタンを好きなアイコンに変更する方法やスクロールしたときにメニューを固定表示させる方法も解説。 Cocoon設定「モバイル」タブの「モバイルメニュー」でヘッダーメニューがあるものを選択すれば利用できます, こういったヘッダーメニュー機能は、以前から要望があって、メニューボタンと検索ボタン機能は追加しようとは思っていました。, 「ユーザーがカスタマイズ出来るヘッダーモバイルボタンの方が利便性が高そう」ということで、アイディアを参考にさせていただきました。, これは、以前のように固定表示にしたままに出来るようにCocoon設定「モバイル」タブの「モバイルボタンの固定表示」機能を追加しました。, 画像のLazy Loadを有効にした状態で、なるべく目次のジャンプ先をずらさない処理を追加しておきました。, 機能追加でも書きましたが、以下の理由で、ヘッダー・フッターモバイルボタンはスクロールすると隠れるように変更しました。, 以前のようにモバイルメニューボタンを固定表示したい場合のためにCocoon設定「モバイル」タブに設定機能があります。, AMPページでも、やろうと思えば同様の動作にはできるとは思います。けれど、AMPページでそこまでする必要があるのか?といった感じ(現在も今後どうするかは検討中)。, 自動アップデート機能は、しばらく後に有効になります。Cocoonテーマの自動アップデート機能について, 個々のアップデートの詳細については以下の履歴を参照してください。 GitHub Cocoonのコミット履歴, 無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。, 性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。 それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。, ◎安く始められる ◎LiteSpeedを用いた高速サーバー(完全SSD) ◎http/3(高速化プロトコル)に対応 ◎東京・大阪でリージョン選択が可能 ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎ディスク容量が多い ◎転送量が多い ◎毎日無料バックアップ(14日分) ◎DBは14日以内なら無料自動復旧可能 ◎ファイルも14日以内なら無料自動復旧可能 ◎アダルト・出会い系サイト可 ◎ドメインとサーバー代のチャージ払いが可能 ○サーバ引っ越し依頼が可能(有料), 1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。, とにかく速い。サイトに表示スピードを求めるならココ。 管理画面がシンプルで使いやすい。, ◎nginxを用いた高速サーバー(完全SSD) ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎ディスク容量が多い ◎転送量が多い ○http/2(高速化プロトコル)に対応 ◎毎日無料バックアップ(14日分) ◎DBは14日以内なら無料自動復旧可能 ◎ファイルも14日以内なら無料自動復旧可能 ◎サーバ引っ越しツールあり(無料) ○サーバ引っ越し依頼が可能(有料) ◎ドメインとサーバー代のチャージ払いが可能, 安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。, ◎nginxを用いた高速サーバー(完全SSD) ◎老舗サーバーなので安定感抜群 ◎ディスク容量が多い ◎転送量が多い ◎同サービス内でドメイン管理が可能 ○http/2(高速化プロトコル)に対応 ○毎日無料バックアップ(14日分) ○DBは7日以内なら無料自動復旧可能 ×ファイルは有料かつ手動での復旧 ×プラン変更でCPUのスペックアップができない ×プラン変更しても即時反映されない ×アダルト・出会い系サイト不可, 常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。 LiteSpeedやHTTP/2を日本で初めて導入したサーバー。, ◎LiteSpeedを用いた高速サーバー(完全SSD) ◎http/3(高速化プロトコル)に対応 ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎転送量が多い ◎ディスク容量が多い ◎毎日無料バックアップ(14日分) ◎DBは14日以内なら無料自動復旧可能 ○ファイルは14日以内なら無料復旧可能(※手動) ◎アダルト・出会い系サイト可 ◎ドメインとサーバー代のチャージ払いが可能 ○サーバ引っ越し依頼が可能(有料), 格安な値段で始められる高機能サーバーです。 性能も備えつつ最安ならここ。 ただし少し機能は弱い。, ◎LiteSpeedを用いた高速サーバー(完全SSD) ◎激安プランが用意してある ◎値段あたりのスペックが高い(コスパ良し) ◎サーバ引っ越し依頼が可能(無料) ◎アダルト・出会い系サイト可 ○http/2(高速化プロトコル)に対応 △プランのアップは可能だがダウンは不可 △毎日自動バックアップ(1日分) △前日のバックアップからのみ復元できる(無料), いえいえ、完全に草村さんのカスタマイズ記事のおかげです^^;https://web.monogusa-note.com/cocoon-mobile-header-menu, ▼デザインスキンを選択Cocoonデフォルトみるらいとシンプルブルーシンプルグリーンシンプルネイビーシンプルピンクシンプルレッドカラフルラインダークエンジダークルリダークカモノハ Veilnui Simplog (amber)Veilnui Simplog (blue)Veilnui Simplog (brown)Veilnui Simplog (cyan)Veilnui Simplog (deep orange)Veilnui Simplog (deep purple)Veilnui Simplog (green)Veilnui Simplog (indigo)Veilnui Simplog (light blue) Veilnui Simplog (light green) Veilnui Simplog (lime)Veilnui Simplog (orange)Veilnui Simplog (pink)Veilnui Simplog (purple)Veilnui Simplog (red)Veilnui Simplog (teal)Veilnui Simplog (yellow)Momoon(アクア)Momoon(グリーン)Momoon(オレンジ)Momoon(ピンク)Momoon(パープル)tecurio earthtecurio grapetecurio limetecurio mangotecurio moontecurio peachtecurio skytecurio soiltecurio sunsetBizarre-food(ブラックバーガー)Bizarre-food(ブルーカレー)Bizarre-food(グリーンソバ)Bizarre-food(ピンクワイン)Bizarre-food(ホワイトラーメン)Season(Spring)Season(Summer)Season(Autumn)Season(Winter)COLORS(レッド)COLORS(ブルー)COLORS(イエロー)COLORS(グリーン)COLORS(ピンク)COLORS(ブラック)Like SimplicityモダンブラックFuwari -海老茶(えびちゃ)-Fuwari -褐色(かちいろ)-Fuwari -海松茶(みるちゃ)-Fuwari -御召茶(おめしちゃ)-旅カメラいつもの深海いつものローズいつものコーヒーおでかけピンクおでかけブルーおでかけレモンサムライブルー(無印)サムライブルー(勝ち色)HygieneMetal Styles(1カラム)ミックスグリーンミックスブルーミックスレッドドット・ワインレッドドット・レイニーブルーm-soram-tomatoほんわかライトニングCocoon設定の「スキン」タブで変更できます。, スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。, Cocoonのモバイルフッターメニューをヘッダー固定にカスタマイズ【実装されました】, 2019-06-24: Cocoon1.8.5からヘッダーモバイルボタンが実装されたので、カスタマイズ不要になりました!*こちらの記事は記録として残しておきます。詳細 ヘッダーモバイルボタンの設定方法Cocoon1.7.8からモバイルフッタ. ヘッダーモバイルボタンを表示するには、Cocoon設定「モバイル」タブから以下のいずれかを選択してください。 ヘッダーモバイルボタン; ヘッダー・フッターモバイルボタン こんにちは、ikuzo(いくぞう)です。少し前からCocoonのヘッダーモバイルボタンを使ってます。自分でやった設定をもとに記事にもしました。ヘッダーモバイルボタンのロゴは、PCと同じヘッダーロゴが表示されます。でもですね、スマホだと同じロ Cocoonモバイルメニュー設定の3つ目は、「ヘッダーモバイルボタン」のみを表示させます。 ヘッダーモバイルボタンはメニューの表示と、ブログ内記事がヘッダーで簡単に出来るようになります。 ヘッダーの色を変える方法としては、Cocoon設定から変える方法とスタイルシートに修正の命令を書く方法と2つあります。 管理画面から設定する. WordpressとCocoonを利用して、トップページのヘッダーメニューを追加する方法をご紹介します。更に、無料のアイコンアプリ(Font Awesome)を使ってヘッダーメニューをドレスアップ。Web知識なしでもできる簡単な設定でイメージをランクアップしませんか? Cocoonのヘッダー下に表示できる「アピールエリア」をカスタマイズしてみます。背景の色を変える簡単なカスタマイズから、ボタンの位置などデザインを変えるものなど、あれこれと。アピールエリアの設定は、Cocoon設定→アピールエリア簡単カスタ Cocoonを使用中で、スマホの画面下に表示されるメニュー「フッターモバイルボタン」に色をつけ、半透明にする方法です。半透明にするのはRGBA形式に変換する必要があります。でもweb知識がない私でも設定ができました。 この記事では、Cocoonのフッターモバイルボタンをカスタマイズする方法をご紹介いたします。ブログが育ってくると、デフォルトのフッターモバイルボタンじゃ物足りなくなってきますよね。TwitterやYouTubeのボタン、自分のブログならではのオリジナルページに飛ばしたい! Cocoonヘッダー画像が幅によって表示が変わる様子. こんばんわ。 1.8.2.x (1.8.1.x..? ダッシュボードの[Cocoon設定]→[Cocoon設定]を開きます。 [ヘッダー]のタブを選びます。 Cocoonカスタマイズ!ヘッダーとメニューをオシャレにカスタマイズします。オシャレなだけでなく利便性も上げるためにヘッダーを固定し追尾するようにしました。コピペで簡単にできるようになってますのでぜひチャレンジしてみてください! 連続でカスタマイズ記事ですが、今回はCocoonにおけるグローバルメニューのカスタマイズです。グローバルメニューを使っていない人には意味がないですが、使っている人にっては、サイトの印象に大きく影響を与えるのがこのグローバルメニューの見た目で Cocoonのデフォルトだとボタンがフラットすぎて、ボタンであることがわかりづらくなっています。 そこで、ボタンに影を付けるCSSもあわせて置いておきます。 お好みでどうぞ。.btn{ box-shadow: 0 7px 10px -5px rgba(0,0,0,0.5); } WordPress/Cocoonを使ったブログでの『ヘッダーロゴ』をカスタマイズします。コピペでOKなので「初心者だけどブログをおしゃれにデザインしたい」という方にもおすすめです。モバイル表示にも対応しています。 大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。 こちらから、「トピックを追加」ボタンを押してコピペで同様の... お世話になっております。 ランキングに関して質問がございます。 普段通りランキングを作成していたところ、20つ目の商品で「ランキングを更新できませんでした。」とランキング作成ページ上部に表示さ... こんにちは、cocoonのテンプレートを使用している者です。 質問を書かせていただきます。 内部リンクでのブログカード表示の件です。 記事からURL(https//…)をコピーし、投稿画面に... Cocoonカスタマイズをプロに依頼する場合はこちら。, タイトルとURLをコピーしました, ヘッダーモバイルボタンの表示方法, ヘッダーモバイルボタンの作成, 作成したメニューを「ヘッダーモバイルボタン」にセットする, クーポンコード入力でさらに10%割引, メールアドレスが公開されることはありません。, Cocoon設定の「スキン」タブで変更できます。, サイトアイコンを設定する方法(ファビコン、アップルタッチアイコン等の設定), グローバルナビのメニューを設定する方法, ヘッダーモバイルボタンの設定方法, 自作の吹き出しを作成して利用する方法, ヘッダーのロゴを画像に変更する方法, グローバルメニューをスライドインで表示, フロントページへのリンクボタン, 現在表示中の投稿ページの前のページを表示, 現在表示中の投稿ページの次のページを表示, 横幅広めのサイトロゴが表示されるボタンを表示, ヘッダー・フッターモバイルボタン. WordPressの無料テーマであるcocoonにはモバイルでトップボタンを表示させることができますが、デフォルトではトップボタンがヘッダーの上に表示されるためCSSだけでトップボタンをヘッダー内に表示させる方法を紹介します。 トップボタ WordPressの無料テーマ「Cocoon(コクーン)」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。 この記事ではWordPressテーマCocoonのフッターモバイルメニューの背景色をカスタマイズする方法をご紹介いたします。自分のサイトをカスタマイズし始めると、次第にスキンで制御されているフッターモバイルメニューも自分好みにしたくなってくきますよね。 ヘッダーモバイルボタンの表示方法. 「Cocoon」では、モバイル環境で表示するメニューが指定できます。「Cocoon設定」→「モバイル」タブから設定できます。 ボタンを表示しない(ミドルメニューのみ) トップボタン スライドインボタンこのブログでは、「スライドインボタン」を ョンで装飾する方法, Cocoon 2.2.1公開。段落・複数ブロックをまとめて装飾する機能を追加。, 投稿のメインカテゴリーを選択する方法。意図したカテゴリーをラベルに表示する設定。, Cocoon 2.2.0公開。投稿のメインカテゴリ設定機能追加。, フィード(RSS等)に特定の投稿を表示させない方法, 申し訳ございません。承知いたしました。 ありがとうございます!. 大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。 こちらから、「トピックを追加」ボタンを押してコピペで同様の... お世話になっております。 ランキングに関して質問がございます。 普段通りランキングを作成していたところ、20つ目の商品で「ランキングを更新できませんでした。」とランキング作成ページ上部に表示さ... こんにちは、cocoonのテンプレートを使用している者です。 質問を書かせていただきます。 内部リンクでのブログカード表示の件です。 記事からURL(https//…)をコピーし、投稿画面に... https://web.monogusa-note.com/cocoon-mobile-header-menu.