2019.12.12スポンサーリンク誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ!」、前回の「おまけ編」で終わりと思ったのですが、「ヘッダに電話番号表示したい...!」と思ったのでまた追加することにしました。4回目「よくある質問編」、5回目「まとめ編」、「おまけ:新着情報編」とサンプルサイトはこちら。Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。トップページカスタマイズ編です。www.nullllog.com2019.10.15Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。プルダウンメニューの親ページにはリンクさせないようにします。www.nullllog.com2019.10.16Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。カラム分けとテーブルのレスポンシブ化について書いています。www.nullllog.com2019.10.18Cocoonをコーポレートサイトっぽくカスタマイズ!4よくある質問編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。ある質問ページ編です。トグルボックスの使い方を分かりやすく解説したいと思います。www.nullllog.com2019.10.23Cocoonをコーポレートサイトっぽくカスタマイズ!5まとめ編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。カスタマイズのまとめとサンプルサイトの公開です。www.nullllog.com2019.10.24Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。トップページにカテゴリ別の新着情報一覧を表示させる方法です。www.nullllog.com2019.11.26サンプルサイトです。まとめCocoonのヘッダに電話番号を表示させるheader.phpを編集するのが一般的なやり方なんでしょうけど、今回はメニュー(グローバルナビゲーション)を使用して表示させます。「とりあえず表示だけしたい!」といった場合にはいいのかなと。PCで見た場合にはリンクは動かず、スマホで見た場合は電話番号部分がタップできます。「外観」「メニュー」でカスタムリンクを作成します。URLは後で変更するので「http://a」にしておき、リンク文字列には電話のアイコンと電話番号を入れました。営業時間などを入れておきたいので、WordPress画面上部の「表示オプション▼」で「説明」にチェックを入れます。「URL」に「tel:0399999999」と入れて、こんなかんじにしておきます。functions.phpで「PCの場合はリンクなし」「スマホの場合は電話がかかる」ようにするfunctions.phpに「PCの場合はリンクなし」「スマホの場合は電話がかかる」設定をします。こちらのサイトの「PHPを使う方法(端末の種類で切り替え)」を参考にしました。作成するホームページに電話番号リンクを設置することもあります。普通に設置したHTMLのリンクはPCでもクリックできてしまいます。PCではクリックされる必要はないので、電話番号リンク...www.nishi2002.comCSSで見た目を整えるこのままだと見た目がナビゲーションと同じなので、スタイルシートでちょっと変えます。Chromeのデベロッパーツールなどで電話番号の部分のIDを調べます。このサイトの場合は電話番号部分は「menu-item-166」というIDを持っています。背景を濃いグレーに、余白を小さくするため、下のように書いておきました。}こんなふうになりましたでしょうか。まとめこれでPCだと電話番号表示のみ、スマホだとタップが出来るメニューが出来たかと思います。ヘッダ(ナビだけど)に電話番号を表示するだけなら、これが簡単な方法かと思います。コピーnullllをフォローするnullllnullllog関連記事WORDPRESSCocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。トップページにカテゴリ別の新着情報一覧を表示させる方法です。WORDPRESSWordPress無料テーマCocoonのショートコードの使い方WordPress無料テーマCocoonのショートコードの使い方や設定できる項目、オプションについてまとめておきます。今回はXFREEで複数のWordPressをインストールする方法をわかりやすく説明します。この方法で5つのWordPressがインストールできます。超初心者がSVGをWordPressで扱う方法をまとめておきます。デフォルトではWordPressでSVGファイルをアップロードできないため注意が必要です。WORDPRESSCocoonの「吹き出し」機能のデフォルト一覧とカスタマイズ方法Cocoonの「吹き出し」機能のデフォルト一覧とカスタマイズ方法を詳しく解説します。WORDPRESSCocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。プルダウンメニューの親ページにはリンクさせないようにします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月おすすめサーバこのサイトでも使用しています。まとめAUTHOR書いた人nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。nullll14人気記事Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編2019.10.152020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編2019.11.262020.01.14Cocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編2019.12.122020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編2019.10.162020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編2019.10.182020.01.09nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。Reserved.検索メニューWEBWORDPRESSWORKSいろいろプロフィールタイトルとURLをコピーしました。