Seesaaブログにグローバルナビを設置する方法【新システム】

この記事はSeesaaブログの新デザインシステム版です。旧システムを利用している方はこちらの記事を参考に。
シーサーブログにグローバルナビを設置する方法

今回はシーサーブログにグローバルナビを設置するカスタマイズ【新システム版】です。ナビゲーションメニューとも言います。このグローバルナビを設置しておけば主要なページへ誘導する事もできますし、訪問者もクリックしてくれる確率の高い部分です。

私の場合はそれぞれのカテゴリーで目次ページを作って主要なページへのリンクをグローバルナビに追加しています。ちなみにグローバルナビを設置するとこのようになります。

グローバルナビ-1

もちろん色や大きさなどはスタイルシート(CSS)で変更できます。それでは早速手順を紹介していきましょう。

グローバルナビ設置の前準備

グローバルナビを設置する前にグローバルナビにいくつの項目を作るかを考えておく必要があります。あまり多くしすぎるとメニュー名が入らなくなりますし、長すぎるタイトルはすべて表示できないので4つか5つがおすすめです。

項目の数を決めたら自分のブログの幅を確認しておきましょう。すでに別記事「Seesaaブログの幅を変更する方法【新システム】」で横幅を変更した方は全体の幅を確認しておくとスムーズに進みますので「.l-wrapper」という部分の「width」で横幅を設定した数字を覚えておいて下さいね。

ブログの幅を変更していない方は「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして「.l-wrapper」という部分の「width」に書かれている数字をメモしておきましょう。

デザインによって違いますが、多分デフォルトだと「980px」か「960px」になっている物が多いかなと思います。

Seesaawidth-1

グローバルナビを設置する方法

シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」を選択します。

新デザインパンくず-1

上のタブで「HTML編集」のタブに切り替えます。

新デザインパンくず-2

するとHTMLコードがズラリ並んでいるのでその中から次のコードを探します。このテンプレートだと17行目から22行目付近。

<header role="banner" class="l-header">
		<div class="header">
			<h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1>
			<p class="description"><% blog.description | nl2br | mark_raw -%></p>
		</div>
	</header>

このコードの下に次のコードを追加します。

<!--グローバルナビゲーション開始-->
<div id="navi-bar">
<ul class="menu">
<li><a href="#" target="_blank">メニュー1</a></li>
<li><a href="#" target="_blank">メニュー2</a></li>
<li><a href="#" target="_blank">メニュー3</a></li>
<li><a href="#" target="_blank">メニュー4</a></li>
<li><a href="#" target="_blank">メニュー5</a></li>
</ul>
</div><!--navi-bar終了-->
<!--グローバルナビゲーション終了-->

別記事のカスタマイズ「シーサーブログにパンくずリストを設置する方法【新システム】」でパンくずを設置している場合はこのコードの下にパンくずリストのコードが来ます(グローバルナビの下にパンくずを設置するので)。

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込んで下さい。

それから「メニュー1」から「メニュー5」には、そのボタンに表示する文字を記入します。一応メニューを5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。

以上追加できたら「保存」です。この状態だとまだナビが縦に並んでいると思うので、スタイルシートでこれを横並びにして位置調整をしていきましょう。

グローバルナビを横並びにして位置調整

先ほどは「HTMLの編集」でグローバルナビを設置したので、残りはスタイルシートで調整していきますよ。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒適応中のデザインタイトルをクリック。

新デザインパンくず-1

次の画面で今度は「スタイルシート編集」というタブが選択されている事を確認します。

新デザインパンくず-3

スタイルシートのコードがズラリ並んでいますが、一番下までスクロールして次のコードを追加。

/*グローバルナビゲーション設置場所*/
#navi-bar {
 margin-top:0px;
 padding:0;
}
#navi-bar ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#navi-bar ul.menu li{
  display:inline;
}
 
#navi-bar ul.menu li a{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;}
#banner{margin-bottom:0px;}

最初の方にある「margin-top」の数値を大きくすれば下にずらす事もできます。追加できたらさらに下に今度は位置調整のコードを追加。

/* ▼▼▼ 位置・サイズ調整 */
#navi-bar{max-width:960px;}   /* メニュー全体の幅 */
#navi-bar ul.menu li a{
  width:20%;            /* ボタンの幅 */
  line-height:30px;       /* ボタンの高さ */
  font-size:14px;         /* ボタンの文字サイズ */
}

ここのメニュー全体の幅「max-width:960px」という部分には最初に確認したブログの全体幅を記入します。それと、全体の幅(100%)に対するボタンの幅の割合を「%」で記述します。

この例の場合は5つのボタンを設置するので100%÷5=20%という計算になるので「ボタンの幅」は20%となっている訳です。4つのボタンなら25%になりますよね。

続いて最後に次のコードをさらに追加。

/*▼▼▼ 色・文字装飾・背景など */
#navi-bar ul.menu li a{         /* 通常時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:bold;             /* 太字 */
  text-decoration:none;         /* 下線(なし) */
  background-color:#1F5E73;     /* 背景色(藍色) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#navi-bar ul.menu li a:hover{  /* カーソルが乗った時 */
  color:#ffffff;               /* 文字色(白) */
  font-weight:bold;            /* 太字 */
  text-decoration: underline;  /* 下線(あり) */
  background-color:#1F5E73;    /* 背景色(藍色) */
  background-image:url();      /* 背景画像 */
  background-repeat:repeat;    /* 背景画像繰り返し */
}
#navi-bar:after{  /* 横並びの解除 */
  content:"";
  display:block;
  clear:both;
}

横に書かれた説明を見ながら自分の好きな色を指定すればOK。また、背景に画像を使う場合は画像のURLを background-image:urlの後の( )の中に入力して下さい。

ここまででグローバルナビの設置はできましたが、実際に見てみると下のコンテンツ(サイドバーとか記事タイトル)との間隔が狭いです。

新デザインパンくず-4

という訳でこれにも対処していきます。具体的にはサイドバーや記事タイトルと本文を含むコンテンツの上に余白を作ります。

先ほどコードを追加した「スタイルシート」に更に追加。

.l-content {
  margin-top: 30px;
}

一応30pxの余白にしていますが、これは自分で好きな数値に変更しておいて下さいね。以上でグローバルナビの設置は完了。

もしナビゲーションとヘッダー画像の間に余白が出来る場合には次のコードも追加して試して下さい。

.l-header {
    margin-bottom: 0px !important;
}

次回はブログの検索順位に重要なパンくずリストを設置する方法について紹介していきます。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

Seesaaブログにグローバルナビを設置する方法【新システム】”に38件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    なべ様

    返信ありがとうございます。解決できて良かったです。キャッシュは問題ないと思います(^^)

  2. なべ

    しげぞう様

    ありがとうございます!
    グローバルナビが普通の幅になりました!

    ブログのURLを検索してみますと、キャッシュにはグローバルナビが表示されておらず、リンクのみ(縦のまま)の状態になっています。

    横スクロールの非表示設定やキャッシュにナビの表示がされない場合、問題ありますか?

    よろしくお願いいたします。

  3. しげぞう 投稿作成者

    なべ様

    コメントありがとうございます。ナビを普通の幅にするという事ですか?次のコードをCSSに追加でどうでしょうか?

    .myd-menu {
        margin: 0;
        padding: 0;
    }

    もし違ったらお手数ですが再度コメント下さい!

  4. なべ

    しげぞう様

    お世話になっております。

    グローバルナビをスマホ画面で見ても綺麗に表示されるように設定をしています。

    RIPRA Proが同じデザインのテンプレートを使用していましたので、

    グローバルナビ部分を真似しました。

    RIPRA Proは持っているのですが、デザインが好きではなく、

    今使用中のテンプレートの方がデザインがシンプルなのでこのまま使いたいと思っています。

    ご質問ですが、横いっぱいにグローバルナビが表示されないようするには

    どの部分を弄ればいいのか教えて頂けないでしょうか。

    また、この設定で間違いがあれば教えて頂きたいです。

    よろしくお願いいたします。

    【HTML】


    【CSS】

    /*グローバルナビゲーション設置場所*/
    .myd-menu {
    margin-right: -100%;
    margin-left: -100%;
    padding-right: 100%;
    padding-left: 100%;
    background: #1F5E73;
    background: -webkit-linear-gradient (top, #1F5E73 0%, #1F5E73 100%);
    background: linear-gradient( to bottom, #1F5E73 0%, #1F5E73 100%);
    }

    .myd-menu-inner {
    margin: 0 auto;
    margin-right: -100%;
    margin-left: -100%;
    padding-right: 100%;
    padding-left: 100%;
    min-height: 28px;
    border-left : 1px #1F5E73;
    }

    .myd-menu ul {
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    border-left : 1px #1F5E73;
    list-style-type: none;
    }

    .myd-menu li {
    float: left;
    margin: 0;
    padding: 0;
    color: #ffffff;
    }

    .myd-menu li { /*base*/
    text-align: left;
    font-size: 14px;
    line-height: 1.1;
    }

    .myd-menu li a {
    display: block;
    padding: 1em;
    border-right: 1px #1F5E73;
    border-left : 1px #1F5E73;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 -1px 0 #1F5E73;
    font-weight: bold;
    }

    .myd-menu li a:hover {
    text-decoration: none;
    background-color: rgba(255,255,255,.2);
    }

    .myd-menu li:last-child a {
    border-right: none;
    }

    /* グローバルナビとヘッダー画像(間)余白調整 */

    .l-header {
    margin-bottom: 15px !important;
    }

    /* グローバルナビとコンテンツに余白 */

    .l-content {
    margin-top: 50px;
    }

    【横スクロール対策】

    /* 横スクロールを非表示 */
    body {
    overflow-x: hidden;
    }

  5. 茶風

    しげぞう様
    いつも迅速な対応ありがとうございます。
    記述削除で理想のグローバルナビになりました。
    本当にいつも感謝しております。ありがとうございました。

  6. しげぞう 投稿作成者

    茶風様

    コメント、URLの提示もありがとうございます。推測なんですが、多ナビの部分の広さをpxで指定しているからかな?と思います。
    CSSの以下の部分です。

    #navi-bar {
        max-width: 1550px;
    }

    この部分の1550pxを例えば9999pxとかに変更して解決するか確認してもらえますか?もしくはmax-width:1550pxという記述を削除してもいいかもしれません。

    ちょっとやってみないとわかりませんが、上記試してみて下さい。

  7. 茶風

    しげぞう様
    お世話になっております。
    相談があります。
    グローバルナビの設置はできているのですが、ブラウザの拡大表示を70%や60%など、100%より小さくするとグローバルナビが左側にくっついてしまっています。
    常に中央に設置したいのですが、どの数字を変更したらいいのか分かりません。
    お忙しいところ恐縮ですがよろしくお願い致します。

  8. ボックル

    しげぞう様
    昨日、張り替え作業後はすぐは反映されていませんでしたが、今朝は反映されていました。
    本当に長々と親切に教えてくださりありがとうございました。

  9. ボックル

    しげぞう様
    毎度すみません。
    張り替えてみましたが、反映されません。
    プレビューでの画面では反映されているのですが・・・ページを進めると反映されていません。
    (T_T)

  10. しげぞう 投稿作成者

    ボックル様

    返信ありがとうございます。やはり原因はわかりませんが、スペースがあると上手くいかない感じですね、CSSに追加している「グローバルナビゲーション設置場所」と記述した部分から下を一度削除して、スペースを抜いたコードに張替えてみましょうか?

    スペースを抜いた代替コードですので、こちらをCSSにコピペしてみて下さい。

    /*グローバルナビゲーション設置場所*/
    #navi-bar {
    margin-top:0px;
    padding:0;
    }
    #navi-bar ul.menu{
    margin:0;
    padding:0;
    list-style: none;
    }
    #navi-bar ul.menu li{
    display:inline;
    }
    #navi-bar ul.menu li a{
    display:block;
    float:left;
    margin:0;
    padding:0;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;}
    #banner{margin-bottom:0px;}
    /* ▼▼▼ 位置・サイズ調整 */
    #navi-bar{max-width:960px;}
    #navi-bar ul.menu li a{
    width:20%;
    line-height:30px;
    font-size:14px;
    }
    /*▼▼▼ 色・文字装飾・背景など */
    #navi-bar ul.menu li a{
    color:#ffffff;
    font-weight:bold;
    text-decoration:none;
    background-color:#1F5E73;
    background-image:url();
    background-repeat:repeat;
    }
    #navi-bar ul.menu li a:hover{
    color:#ffffff;
    font-weight:bold;
    text-decoration: underline;
    background-color:#1F5E73;
    background-image:url();
    background-repeat:repeat;
    }
    #navi-bar:after{
    content:"";
    display:block;
    clear:both;
    }
    .l-content {
    margin-top: 30px;
    }
    .l-header {
    margin-bottom: 0px !important;
    }

    これで反映されないなら再度コメント下さいね!もう少し諦めずに修正すれば上手くいくと思いますので、遠慮しなくてOKです(^o^)

  11. ボックル

    しげぞう様
    何度もすみません。
    スペースを消してみましたが反映されませんでした。
    お手数をかけて本当にすみません。

  12. しげぞう 投稿作成者

    ボックル様

    返信ありがとうございます。ちょっとチェックしてみたのですが、おそらく同じスペースが原因かと思います。スペースの場所はCSSから下記の記述を探します。

    #navi-bar ul.menu li{
    display:inline;
    }
      ←ここのスペースを削除する
    #navi-bar ul.menu li a{
    display:block;
    float:left;
    margin:0;
    padding:0;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;}
    #banner{margin-bottom:0px;}

    矢印でここを削除って書いている部分のスペースを削除して反映されるか確認をしてみて下さい。

  13. ボックル

    しげぞう様
    分かりやすい説明ありがとうございました。
    スペースを消してみたところ、縦並びから横並びへと変わりましたが、しげぞう様のグローバルナビの表示のされ方へとは違っていて・・・。
    この解決策を教えていただけないでしょうか?
    よろしくお願いします。

  14. しげぞう 投稿作成者

    ボックル様

    コメントとURLもありがとうございます。CSSの記述が反映されていない感じですね、これはおそらくコピペでのエラーというか最近なぜかこういうの多いのですが、コピペが上手く反映できていない?感じというか、余計な文字が含まれてたりします。原因はよく分かりませんが対処としては以下を試してみて下さい。

    グローバルナビでCSSに記述を追加していると思いますが、このスペースを消していきます(CSSの記述だけ)。

    例えばナビ付ける時に下記のような記述を追加していると思います。

    #navi-bar {
      margin-top:0px;
      padding:0;
    }

    この「margin」とか「padding」とかの前(左の所)に透明の半角のスペースが幾つか入っていると思います。これを消してこんな感じに。

    #navi-bar {
    margin-top:0px;
    padding:0;
    }

    上記のようにナビ用のCSS記述のスペース部分を消してみて反映されるか試してもらえますか?もしそれでも反映されない場合には再度コメント下さい(^o^)

  15. ボックル

    はじめまして。
    いつも勉強させてもらっています。
    グローバルメニューを作りたいのですが何度やってもうまくいかず、同じような質問を見てはみたのですが、自分が初心者すぎて理解できませんでした。
    どう改善していいのか全く分かりません。
    アドバイスを頂けないでしょうか。

  16. はねうさぎ

    しげぞう様

    いつも参考にさせていただいています。
    グローバルナビゲーションを設定できたのですが、クリックしてみると、別ウィンドウが新規開いてそちらに飛ばされてしまいます。ですので、同じカテゴリーを何度もクリックすると、同じ新規ページがいくつも開いてしまう状態になってしまっています。

    ブログについている「カテゴリ」を表示し、カテゴリの中のリンクをクリックしても新規ウィンドウは開かずに同じブログの中を回遊できるのですが、グローバルナビゲーションのカテゴリーをクリックしたときに、新規ウィンドウは開かせずにブログの中でリンクさせる方法はありますでしょうか?
    どうぞよろしくお願いいたします。

  17. しげぞう 投稿作成者

    しょうた様

    コメントありがとうございます。プレビューで反映されている場合にはブログを表示させてリロードしたら解決するする場合があります。以前のデータが残っているだけなので。また、念のため、別のブラウザでも確認してみる事をおすすめします。ブラウザ自体にキャッシュ(以前のデータ)が残っている場合もありますので、別ブウウザで反映されるなら大丈夫です。

    もしリロード(再読込み)とか別ブラウザでも反映されないという場合には一度変更したコードを元に戻し(削除して)保存。それで再度コードを追加して保存で反映される場合があります。

  18. しょうた

    しげぞう様

    いつも参考にさせて頂いてます。
    ありがとうございます。

    以前、コメントされてる笠井様と内容が被りますが、
    プレビューではしっかり設定ができてるのですが、
    実際ブログを見ると更新されていません。

    入力ミスだとプレビューも正しく表示されないと
    思うのですが、

    これは時間が解決してくれるものなのでしょうか?

    よろしくお願いします

  19. Yoshi

    しげぞう様
    早速の返信ありがとうございます!
    メモ帳にコードをコピーしてみたところ、

    /*グローバルナビゲーション設置場所*/
    #navi-bar {
    ?margin-top:0px;
    ?padding:0;

    のように、スペースの部分に『?』が入ってしまっている状態でした。
    『?』を消したところ無事に表示できました。
    ありがとうございました!

  20. しげぞう 投稿作成者

    Yoshi様

    コメントありがとうございます。ブログのURLも確認してコード自体も確認しましたが、特に問題なさそう。そのままのコードを私のSeesaaブログでも試したのですが、問題なく反映されてます。
    という事で、CSSとHTMLのコード追加したやつを一度コピーしておいて外して元に戻します。元にもどしたら保存。HTMLもCSSも同じように一度元に戻して保存。

    元に戻ったのを確認できたら再度HTMLとCSSにコードを追加して保存してみて下さい。両方追加できたらブログを表示させて「F5」を押してリロードして確認してみて下さい。

    以前私もコードを追加しても反映されてない事があり、上記の手順で一度元に戻して保存、それからやり直ししたら反映された事が何度かありますので、これ、試してみて下さい。
    それでも反映されない場合には再度コメント下さいませ。

  21. Yoshi

    いつもこちらの記事で勉強させていただいておりますYoshiと申します。
    このたび、自分のブログにもグローバルナビを設置しようかと思って挑戦してみたのですが、横表示ができませんでした。
    上記のコードをコピペするだけでは不十分なのでしょうか?
    お忙しいところ申し訳ありませんが、URLを載せておきますので、アドバイスをお願いいたします。

  22. カワラ

    しげぞう様おせわになっております。
    シーサーブログでグローバルナビをスマホにも設置する方法などありますでしょうか?

    もう一つ、シーサーブログからワードプレスに引っ越す方法を拝見させて頂きましたが
    シーサーの旧システムからシーサーの新システムに引っ越す方法などありましたらご教授いただけますでしょうか?

  23. 笠井

    すみません。先ほど、コメントした笠井ですが、
    今ブログみたら、ちゃんと設置できていました。
    ごめんなさい。
    失礼しました。

  24. 笠井

    はじめまして。笠井と申します。
    シーサーブログのカスタマイズで参考にさせて頂いております。
    ありがとうございます。
    グローバルナビの設置がうまくいきません。
    CSSのプレビューでは、ちゃんと設置できてるのですが、
    実際にブログをみると、
    文字が左横に縦に並んでるだけです。
    どういった理由が考えられるでしょうか?
    教えて頂けたら幸いです。
    よろしくお願いいたします。

  25. しげぞう 投稿作成者

    OSARA様

    コメントありがとうございます。グローバルナビの下に余白を作るコードですが、記事の本文とサイドバーを含む部分が「l-content」という部分になりますので、この「l-content」の上に余白を取ればナビと下のコンテンツに余白ができます。以下のコードをスタイルシート(CSS)に追加してみて下さい。

    .l-content {
      margin-top: 30px;
    }

    もしサイドバーだけ位置を下げたい場合や上手く反映されない場合にはお手数ですが、再度コメント下さい。その時にできればブログのURLも教えて頂けると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  26. OSARA

    はじめまして。
    凄く分かりやすいサイトでこちらの記事で勉強させてもらっています。

    今グローバルナビの設定をしていて、うまくいかなかった所が一つあり質問させて頂いてよろしいでしょうか。

    グローバルナビは無事設置できたんですが、サイドバーの検索とグローバルナビがピッタリついてしまいました。

    ここの間に空間を少し作りたいんですが、どこに何を記入すればいいでしょうか?教えて頂けたら嬉しいです。

    よろしくお願いします。

  27. SHIZUKO

    しげぞう様

    早速のご回答ありがとうございます!!
    教えていただいた通りにコードを追加すると余白を消せました!早速ブログにてしげぞうさんのこのブログを紹介させていただきました。記事にもすぐに追記していただいたようで、アフィリエイト初心者にとって本当に親切なブログですね。私もブログを運営しながら少しずつコーディングの勉強もしていきたいと思います。ありがとうございました!!

  28. しげぞう 投稿作成者

    SHIZUKO様

    コメントありがとうございます。なるほど、ヘッダーとナビの間の余白ですね。以下のコードをスタイルシート(CSS)に追加して試してみてください。

    .l-header {
        margin-bottom: 0px !important;
    }

    上記コードをスタイルシート(CSS)に追加して保存。それでブログを表示させてから「Ctrl」と「F5」を一緒に押してリロードしてから確認をしてみて下さい。もしそれで反映されない場合には再度コメント頂けると助かります。また、記事の方にも上記コードを追加して修正しておきました。ありがとうございます!

  29. SHIZUKO

    しげぞう様

    はじめまして。この記事を参考にメニューバーを設置させていただいたのですが、ヘッダー画像とメニューバーの間に余白がかなりあいていて不細工になってしまっています。色々と解消方法を模索したのですが分からなかったので、編集の仕方を教えていただけますでしょうか。

  30. のり

    しげぞう様

    本当に返答ありがとうございます。
    旧システム・・・
    最近始めたので新システムなんだと思い込んでいました。
    同じアカウントで新旧わかれているという・・
    本当にすみません
    丁寧な返答感謝です。

  31. しげぞう 投稿作成者

    のり様

    コメントありがとうございます。Seesaaブログには「旧システム」と「新デザインシステム」という2種類あります。ここがちょっとややこしい部分で、のり様が言われるように管理画面のメニューも違います。このブログでは「旧システム」と「新デザインシステム」両方でそれぞれ記事を書いてますし、Seesaaブログのカスタマイズ記事の冒頭にリンクで両方行き来できるようにしていますので、一度確認してみて下さい。

  32. のり

    しげぞう様

    ブログ初心者でかなり勉強させていただいております。
    急な質問で失礼します
    Seesaaブログで2つブログをつくったのですが

    1つは編集で
    スタイルシート編集|HTML編集|コンテンツHTML編集|カバー画像設定
    があってうま編集できています

    もう1つの方がこの編集ができなく困り果てています
    同じページなのですが
    デザイン|一覧デザイン設定|コンテンツ|HTML
                   ページ : トップ | 記事 | 過去ログ | カテゴリ         
    しかでてこなくて・・・
    編集はできるみたいなのですが
    少し違う感じにでてきてしまいます

    かなり初歩的な質問だとおもいますが、この違いはなんなのか
    自分の設定がおかしくなっているのか迷走しています
    アドバイス頂けたら嬉しいです
    よろしくお願いいたします。

  33. しげぞう 投稿作成者

    あっくん様

    返信おそくなってすみません。1つ1つ問題を解決してみますね。

    1.グローバルナビが右側にくっついている件

    これはあっくん様の推測の通り、「padding-left」が原因です。ただ、これはこのままでOKなので、「padding-right」を追加してバランスを取ります。以下のコードをスタイルシートに追加して下さい。

    .l-wrapper {
        padding-right: 15px;
    }

    2.記事タイトルとタグの下の余白の件

    これもスタイルシート(CSS)の編集で解決します。スタイルシートに次のコードを追加です。

    .article__heading {
        margin-bottom: 10px;
    }

    数値はお好みで変更して下さい。

    3.フォントの設定の件

    フォントに関しては全体のフォントの変更だと思いますので、「body」を使うと良いと思います。

    body {
      font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
     "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande",
     "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    }

    こんな感じになると思います。

    それから余談ですが、もう1つだけ追加しておくと、記事本文の右端がサイドバーに近すぎる感じがするので、以下をスタイルシートに追加することで、サイドバーと記事との余白ができます。

    .article__content {
        padding-right: 30px;
    }

    これも数値はお好みで変更して下さい。もし現在のままでもOKというのであれば気にしないで下さいね!

    また何かあればコメント下さい。

  34. あっくん

    しげぞう様

    何度もすみません。
    今、気がついたのですが
    トップページは個別記事のほうは、スタイルシートの並び替えで
    余分な余白が解消されたのですが、
    個別記事のページは、やはり、余分な余白が入っているようです。
    重ねてよろしくお願いいたします。
    ================
    記事タイトル
    タグ
    【ココの余白が広いんです】
    記事本文
    ================

  35. あっくん

    しげぞう様

    お世話になります。
    早速ありがとうございます。
    2点目の余白については、スタイルシートは後に書いたものが優先ということで
    書いたものを並び替えてみて解消しました。
    ありがとうございました。

    ブログのURLです。

    3点目のフォントの設定ですけど、対象となる変数は何を指定すれば
    よろしいでしょうか?
    どうかよろしくお願いいたします。

    ps
    夏休みですが?
    ごゆっくりお過ごしください^^

  36. しげぞう 投稿作成者

    あっくん様

    コメントありがとうございます。1点目と2点目に関してはおそらくスタイルシートの記述に原因があると思いますが、状況がちょっと把握できませんので、URLを教えて頂けると原因の特定ができるかと思います。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

    また、3点目、フォントの初期化ですが、スタイルシートで書き直すよりもスタイルシートの一番下にフォント変更のコードを追加するほうが良いと思います。スタイルシートは後に書いたもの(下に書いたもの)が優先的に反映されますので、一番下に追加すればOKです。それだと上手くできなかった時にも一番下の記述を削除するだけなので、分かりやすくて簡単になるかと思います。

    ※これからちょっと用事で出かけるのでコメントの返信が遅くなるかもしれません。土曜か日曜には返信できると思いますが、最悪週明けになるかも知れません。なので非常に申し訳ですが、気長に返信を待って頂けると助かります。どうぞよろしくお願い致します。

  37. あっくん

    しげぞう様

    先日はFBのPage Pluginの件でありがとうございました。
    お盆で恐縮ですが、3点ご教授ください。

    ◆1点目
    グローバルナビを設置したのですが、ナビの右端が、ブログの右端に
    ひっついています。
    また、サイドバーのタイトルのカスタマイズも同じく、右端がブログの
    右端にひっついています。
    どうぞよろしくお願いいたします。

    私のブログは width: 960px
    #navi-bar{max-width:960px;} /* メニュー全体の幅 */

    左右のスペースの背景色を変更した際に、左の余白を
    padding-left: 20px としています。(これが原因?)

    ◆2点目
    記事本文の上部に必要以上の余白があり、これを適正にしたいのです。
    私のブログの構成は

    記事タイトル
    タグ
    【ココの余白が広いんです】
    記事本文

    ◆3点目
    記事本文のフォントの初期値をスタイルシートで設定するには、
    どこを書き換えればいいのか教えてください。

    初歩的なことばかりでお申し訳ないです。