LinkedIn2023.04.02スポンサーリンクこんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの4回目です。前回はこちら、初回はこちら。ハンバーガーメニューのデザイン変更の続きを行っていきます。したハンバーガーメニューの三本線をタップしたものがこちらです。この通り、元々は青緑色の背景に黒色の文字だったんですよね。見づらいことこの上ないです。いうわけで文字色を白色に変えていきましょう。子テーマのstyle.cssに以下のコードを入力して保存します。「#ffffff」というのは、白色を表すカラーコードです。*/}更新するとこうなります。無事に文字色が白色になりました。ナビゲーションラベルこれだけだとどこか味気ないので、カテゴリ名の最初に絵文字を追加してみましょう。メニュー」と進み、既に作成してあるヘッダー用メニューを選択します。各カテゴリを開くと、ナビゲーションラベルという項目があるので、そこを編集していきます。Awesomeという、Webサイト上で絵文字を表示できるサービスを利用すると簡単です。画面上部にある「Free」のボタンを押すことで、無料で利用できる絵文字を絞り込むことができます(支払いをせずに有料の絵文字を引っ張ってきても、うまく表示されません)。こちらを使用するには事前準備が必要です(当サイトではCocoonというテーマを使用しているので、もしかすると他テーマでは設定が異なるかもしれませんが、ご容赦頂けますと幸いです)。5」に設定します(デフォルトでは4が選択されているかと思います)。Awesomeのページに戻ってください。ここからは、例として「Free」ボタンを押した上で「Home」と検索して出てきたこちらの絵文字を表示させてみましょう。検索結果一覧から使用したい絵文字を選ぶとこのような画面が出てくるので、紺色の枠からHTMLを選択して、コードをコピーします。このコードを、先程のナビゲーションラベルの項目に貼り付けて保存します。この場合は、絵文字の後に半角スペースを入れ、「Home」という文字を表示させる例になります。すると、ハンバーガーメニューに絵文字が追加されました!こうすることで、見た目が華やかになるだけでなく、パッと見でカテゴリーの内容が分かりやすくなります。LinkedInスポンサーリンクsho好きに生きる。あかつきちゃんのイラスト2枚目こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの5回目です。前回はこちら、初回はこちら。トップページのレイアウト変更こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの9回目です。前回はこちら、初回はこちら。モバイル用ハンバーガーメニューの作成こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの3回目です。前回はこちら、初回はこちら。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」の2回目です。WordPressの便利なプラグインの紹介です。子テーマのインストールこんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの7回目です。前回はこちら、初回はこちら。アピールエリアの設定(2)こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの10回目です。前回はこちら、初回はこちら。アピールエリアの設定(1)こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの9回目です。前回はこちら、初回はこちら。「まずはこちら!」の追加こんにちは。サイト開発担当のshoです。今回は「これまでのサイト開発まとめ」シリーズの6回目です。前回はこちら、初回はこちら。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自分の生き方プロフィール春眠shoサイト開発担当。絵はある程度、Webデザインは初心者。結局何のブログ?注意書きお問い合わせSearch。