」の指定でマウスを載せた時の文字の色も同じにして、下にボーダーが出るようにしました。ボーダーが内側にくるようにしています。表示はこのようになります↓はい!完成です!だいぶ印象が変わりましたよね!今回の色は適当に選んでますが、ロゴ画像やボーダーの色を変えると雰囲気も変わると思うので色々と試してみてください。何かの参考になれば幸いです。それでは今日はこの辺で!【追記:2016.3.24】STINGER7のカスタマイズ記事をまとめました↓STINGER7:カスタマイズまとめこのブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。web-ashibi.net2016.03.24WordPressのカスタマイズをするなら、ネット検索はもちろん有効ですが、まずは本で基本を勉強することをオススメします。HTML、CSSなどの基本的な部分を習得するだけでも、ネット上にある記事の理解度がかなり変わってきますよ。初心者の方でも分かりやすいオススメの本をご紹介します。こちらのサイトを拝見して、Stinger7のヘッダーを横いっぱいに広げるカスタマイズをしてみました。ほとんどの部分がうまくいき、大変満足しております。「メニューにカーソルを合わせて出てくる子メニューが親メニューの位置よりも少し右になってしまう」という現象が起きてしまいます。http://storyinvention.com/ブログは上記URLで、「フリー音楽素材・BGM」のメニューにカーソルを合わせると同現象が起きます。解決方法がわかるようでしたら、お教えいただくことはできますでしょうか。ご検討、宜しくお願い致します。様すいません、東京に出張行っててお返事遅くなってしまいました(^^;)コメントありがとうございました!サイト拝見しましたが原因が2つあるようです。一つ目、ドロップダウンで隠れていない親メニューのズレです。「li」要素などを「inline-block」で横に並べている場合、コードの改行を反映して隙間が出来てしまいます。これを解決するには<li>メニュ−1</li><li>メニュー2</li>のように改行せずに記述するか、またはinline-blockを指定しているタグと、それを囲むタグに以下のcssを足せば改行したままでも隙間がなくなります。normal;}二つ目は、ドロップダウン部分で隠れているメニューのズレです。隠れている部分はpaddingやmarginの指定はいらないので、下記のように変更してみてください。PMDICE様ありがとうございます!!色々やっても直らなかったものが完璧に直りました...。自分も少しは覚えてきて自分でも多少はいじれるようになったつもりだったのですが、まだまだでした^^;これで綺麗なメニューとなりました。お聞きしてみて良かったです。stinger7のカスタマイズはここが一番詳しく、説明もわかりやすくとても参考にさせていただいています。これからも更新期待しています。AM参考にさせていただいている者です。実は上から順に実行していったところ、ヘッダー画像が左に寄ったまま直らないのですが、どうすればよいかご教示いただければありがたく存じます。PMよしお様コメントありがとうございます!ヘッダー画像が左に寄ったままということは、「中身のコンテンツは元の位置に戻す」の見出しのところの作業が上手くいっていないということでしょうか?タグやコードは一文字でも足りなかったり間違えていたりすると反映されませんので、もう一度コードをご確認の上で試されてみてください。それでもダメな場合はサイトを見れば原因が分かりますので、お問合せフォームなどからでもURLを教えていただければお答えできるかと思います。拝見させていただき、サイトを修正していました。よしおさんと同じ現象が起き、修正を加えたため、記載します。記事記載の通りに進めると、cssに記載されている箇所を削除するようになっているものは、子テーマのcssで上書きできていないと思います。リンク先の子テーマでcss書き換えを行う方法を実施しても、親テーマを読み込んでいるため、当該箇所削除をしても親テーマの記述が読み込まれるためと思います。0;}上記の箇所を削除でなく、リセット扱いで上書きしたところ、反映されました。横から失礼いたしました。PMもげもげ様コメントありがとうございます!そういえばこの記事は最初の頃に書いたので、親テーマのCSSを直接いじるやり方でした(^^;)子テーマのCSSで対応できるように修正しますね。お聞きしたい事がありましてコメントしました。コピペさせていただいての作業なのでどこをどうやったのかすっかり忘れてしまいまして。スミマセン、宜しくお願いします。記事一覧をカード型にするカスタマイズの記事を参考にとても満足のいく形に仕上げることができました。この画像のようにロゴ画像の横に初期状態STINGER7のようなブログタイトル+説明文が記載されるヘッダーはどのようにするのが最適でしょうか?ロゴ絵+ブログタイトルを文字のままにすることによってseoに影響するのかどうかはよくわからないのですが、ゲーム系などブログ名自体が検索されやすい所はこのようなレイアウトが多いような気がして、もし可能でしたらお時間あるときにご教授頂けないでしょうかそれでは失礼いたします。AMすいませんブログタイトル+説明文と書きましたが、titleタグを使わずh1で挟みブログタイトルとは少し違うタイトル+説明文を記載している様でした。PMPan様コメントありがとうございます!以前のやり方でも基本的に同じID名やクラス名でCSSの指定をしています。PMお餅様コメントありがとうございます!ご希望のようにカスタムするには「header.php」を編集するしかないと思います。–>」の中に入っているので、その中にボックスを2つ作って画像とタイトル・説明文を別々に入れる感じです。無事似たような感じにできました。AMお餅様すいません、コードが何かおかしくなってますね(^^;)コメント欄にコード書くと変わっちゃうみたいです。PMヘッダーの件、度々ありがとうございました!これからもカスタマイズ記事など楽しみにしております。PMDICEさまご返答ありがとうございます。確認が抜けているのかもしれません。ありがとうございます。引き続き参考にさせていただきます。PMDICE様いつもお世話になっております。WordPress初心者ですが、「記事一覧を3列のカード状にする方法」がまずやりたい事だったので、ドンピシャの内容が紹介されていて大変助かりました。サイドバーのデザインについても少し真似させて頂くだけで見た目が格段にお洒落になっていき感動しています。「スマホ・タブレットのメニュー周りも今度カスタマイズしようかな。」とのことで、楽しみにしております。個人的な要望ですが、スマホ表示にするとメニューが3本線のボタンに折りたたまれてしまうのを、常に表示できるようにしたいです。「ホーム」「プロフィール」「お問い合わせ」程度のメニュー項目であれば、わざわざ折りたたまなくても横1列に表示すればいいのに...などと考えておりました。お忙しいところ恐縮ですが、よろしくお願い致します。PM突然コメント失礼致します。Stingerの兄弟テーマ?であるAFFINGER4でもこの記事で紹介されているCSSは有効でしょうか?AFFINGER4にはロゴを中央に寄せる機能は標準でついているのですが、ヘッダーメニューをうぇぶあしび様が紹介されているように中央寄せする機能はありません。ヘッダーメニューを中央寄せしようと、この記事で紹介されているCSSを追加してみたのですが、上手く作動しないようです。(※AFFINGER4は有料テーマですので、もしお持ちでなければスルーしてください。PMAFFINGER4はたぶんコードが少し違うのかもしれませんね。bug」などで使われているコードを確認すると原因が分かるかと思います。PMDICEさま、初めまして。最近公開されたStingerPlus2をインストールしていじって調整しています。横幅をいっぱいに広げたいと思い、検索してこのサイトにたどり着きました。ところでいきなり反映されません。ところに「ヘッダー背景の横幅を100%にする」のチェックを入れる項目があるのですが、そこにチェックを入れても横幅100%になりません。※色を設定すると幅のMAX値は1100pxになります。いう注意書きがあるのですが、これが効いちゃってるのでしょうか?Plus2はやり方が違うのでしょうか?お分かりになれば教えて頂けると幸いです。2で確認してみましたが、ヘッダーの外枠は最初から幅100%になっているみたいなので、下記のコードでヘッダー背景の色は変えられました。PROで使える機能ですね。返信コメントをキャンセルメールアドレスが公開されることはありません。超オススメ!iMacの周辺機器&アクセサリ【オシャレ&機能的】タイトルとURLをコピーしました。