WordPressのデザインを変更したいときに、参考になる方法があったのと、問題点の対処法をまとめたのでご紹介します。
完成図
現在のフロントページは変更されているかもしれませんが、このような感じで編集しました。
ここではWordpressのテーマ「cocoon」を使用した方法を説明します。
ロゴの設定
ロゴを設定します。
①左側のタブ「cocoon設定」をクリック
②上のタブの「ヘッダー」をクリック
③ヘッダーロゴ で 自分で作成したロゴをアップロードする
●このロゴは、画面いっぱいにロゴの画像が来るようにトリミングすることをお勧めします！
（大きく表示された方がわかりやすいため。以外に小さく見える）
●ロゴの作成は、背景透過させた方がいいです！
レイアウト設定
ヘッダーレイアウト を 「トップメニュー(右寄せ)」に設定する
保存
メニューの作成
①左側のタブ「外観」にカーソルを当てるか、クリック
②「メニュー」をクリック
③メニューの項目作成
（１）「メニュー名」（なんでもOK）をいれて、一番下の「メニューを作成」をクリック
（２）メニュー項目を追加
メニューにいれたい記事やカテゴリーのチェックを入れて、「メニューに追加」をクリック
（３）追加したものが帯になって出てくる
・ドラッグアンドドロップしながら、順番を入れ替えることができる！
・▼を押すと「ナビゲーションラベル」の項目で、表示される名前を変更できる
④メニュー設定 の メニューの位置で、「ヘッダーメニュー」にチェックを入れてメニューを保存
CSSの変更
※CSSを変更する前に、必ず子テーマになっていることを確認しましょう。
子テーマについては、別の記事にしていますので、ご参照ください。
①左側のタブ「外観」にカーソルを当てるか、クリック
②「テーマファイルエディター」をクリック
③style.cssにCSSを入力する
CSSのコード
ぽんひろ.comさんの記事を参考にさせていただきました！
/************************************
** グローバルメニュー PC
************************************/
/* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
max-height: 200%;
height: auto;
max-width: 210px;
vertical-align: middle;
margin: 0;
}
#header-container {
box-shadow: 0 0 10px rgba(30, 30, 30, .1);
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 10;
padding: 10px 0;
}
.site-name-text-link {
color: #fff;
}
.navi {
background: none;
}
.navi-in > ul .sub-menu {
background: #fff;
box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
width: auto;
}
.navi-in a {
font-size: 13px; /* ナビ文字大きさ */
font-weight: bold;
position: relative;
color: #fff; /* ナビ文字色 */
padding: 0 20px;
display: block;
text-decoration: none;
}
.navi-in a:hover {
background: none;
}
.navi-in a:before {
position: absolute;
left: 0;
bottom: 6px;
content: "";
display: block;
width: 100%;
height: 3px;
background: #fff; /* マウスON時の下線色 */
transform: scale(0, 1);
transition: 0.4s;
}
.navi-in a:hover:before {
transform: scale(1);
}
.navi-in > ul .sub-menu a {
color: #666; /* サブメニュー文字色 */
font-size: 12px; /* サブメニュー文字の大きさ */
}
.navi-in > ul .sub-menu a:before {
background: #42d5e7; /* サブメニューマウスON時の下線色 */
}
.header-container-in.hlt-top-menu .logo-header {
max-height: 100%;
}
.header-small {
opacity: 0.9;
}
.header-small .header-container-in.hlt-top-menu .logo-header img {
max-width: 130px;
margin: 10px 0;
}
#container {
padding-top: 0px;
}
[id^="toc"]:target {
padding-top: 85px;
margin-top: -85px;
}スマホ表示だと、かぶさってしまう問題
スマホで表示を確認すると、ヘッダーの一部が、スマホのモバイルボタンにかぶさって表示されてしまうようになりました。
ここの部分だけ、モバイルボタンの上にくるような感じです。
そのため変更したのが、
①CSSの追記（これだけで大丈夫だと思います。）
/* PCにあるナビメニューのパディングを消したい*/
#header-container {
display:none
}※「display:none」の使用は、SEO対策には逆効果という話もあります。
使用の際はご検討ください。
詳しくは、「seopack.jp」様のサイトに掲載されています。
②モバイルボタンの固定表示
スマホのモバイルボタンは、別でCSSを使用して変更しているため、気になる方は、そちらもご参照ください。
コメント