WordPressWordPressのテーマの1つである「simplicity」は内部SEO対策が簡単でレスポンシブに対応しているので多くのブログやサイトで使用されている人気のあるテーマです。設定から簡単にテーマの外観を変更することができ、カスタマイズ性もあります。ヘッダーを固定しようとした場合、そのような設定はsimplicityのカスタマイズ画面にはないので独自にスタイルを追加する必要があります。そこでここではsimplicityで上部に表示されるヘッダーを固定し、スクロールしても常に表示され続けるようにする方法について解説します。目次simplicityにおけるヘッダーとはsimplicityでヘッダー固定する手順まとめsimplicityにおけるヘッダーとはヘッダーとは名前通りサイトの上部(ヘッダー)部分に表示されるコンテンツのことです。simplicityの場合、デフォルトで次のような見た目になってます。ヘッダー部分には次の内容が表示されます。サイト名サイトデスクリプション(概要)SNSなどのフォローボタンヘッダー背景ページを開いたときに一番最初に表示されるサイトの顔になる部分です。ヘッダーのすぐ下に表示されるナビメニューはヘッダーには含まれていません。以下の記事で解説した方法などを使ってください。simplicityでヘッダータイトルの横にナビメニューを表示する方法ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。15:44このヘッダーをカスタマイズするには、メニューから「外観」ー>「ヘッダー」と進み、カスタマイズ画面を開きます。「ヘッダー」を開くと次のようにヘッダーのカスタマイズ画面がでてきます。この画面でPCやスマホでのヘッダー画像やヘッダー高さ、タイトルテキストの代わりになるロゴ画像などを設定することができます。ヘッダーを固定する設定項目はないので、次に紹介する方法で独自にスタイルを追加する必要があります。simplicityでヘッダー固定する手順ヘッダーを固定する手順は次の通りまずメニューから「外観」ー>「カスタマイズ」を開きます。CSS」という項目を開いてください。CSS」を開くと下の方に独自CSSコードを入力するテキストエリアが表示されます。}}以上の内容を保存すればヘッダーが固定されて表示されます。これだけですが、このCSS内で何をしているのか次で少し説明します。このCSSではまず「#header」内の次のコードで、ヘッダーを固定しているんです。fixed」と指定することで画面内での位置が固定になります。translateX(-50%)」で要素の大きさの半分だけ位置を移動させることで画面横中央にヘッダーを表示させています。あるので、その場合はヘッダーを固定しないように最初に@supportsを使って条件分岐させています。translateX(-50%)){このCSSコードを「公開」ボタンを押して公開するとスクロールされても追従し、画面上部に固定されたヘッダーの完成です。完成ヘッダーはサイトを表示したときは普通のヘッダーと見た目は全く変わりません。下にスクロールしてみると次のようにヘッダーが上部で固定され、常に同じ位置に表示されるようになります。いう感じまとめヘッダーの固定されたサイトというのはあまり多くないのでsimplicityでは固定ヘッダーの設定がないですが、このように独自スタイルを追加すれば簡単に固定ヘッダーは作成できます。以上simplicityでヘッダーを上部に固定表示する方法について解説しました。昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします。最近WordPressプラグインを開発・公開しました。自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします「WordPressは難しい」、「ブログ初心者には向いてない」・・・こういう固定観念を捨てればWordPressほど効率よく記事編集できて安全にブログ運営できるツールはありません。ワードプレス!最近WordPressプラグインを開発・公開しました。Press当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合Cookieの使用に同意したことになります。「WordPressって特別な知識がないと難しそう・・・」こういう風に思い込んでいないですか?でも実は・・・WordPressブログは1日もあれば即日で作ることができるんです。「面倒なことせずブログを今すぐパパッと始めたい」そういう方必見です。Pressブロガーが使うべき超お得なASPまとめ【2019年最新】W報酬制度のあるASP、報酬+税金分受け取れるASPなどなど・・・個人ブロガーに特にお得なASPをまとめました。アフィリエイトで成果を出したい「個人ブロガー」に優しいASP中心に紹介します。pocketアドセンス関連コンテンツの解放条件は実は厳しくない始めましての方はこんにちは、フク郎(@fukuro-press)です。関連コンテンツ・・・これはアドセンスから認められたブログのみ使用できる特別な広告ユニットこの解放を目指す人は多いですが、明確な基準は公開されていません。usersWordPressにアドセンス自動広告コードを埋め込む手順まとめアドセンスには自動広告という便利な機能があります。表示する広告位置の調整などの作業を全て自動化可能色々な手間が省けるので導入を考えている方も多いと思います。「IT・プログラミング・開発の相談」カテゴリーから質問可能です。相談もオススメ「IT・プログラミング・開発の相談」カテゴリーから質問可能です。