Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

paeo-menu

検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください

■paeo-menue : プレビュー 
paeo-menue

■paeo-menue-i : プレビュー
paeo-menu-i

履歴

paeo-menue / paeo-menu-i

pazo-menue または pazo-menue-i のHTMLとスタイルシートを変更します。
※menue-i の1カラムを使用する場合は、先に menue-i への変更を済ませてください。

変更場所 ▼ HTMLの編集

【1】検索ワード「左右変更」

<body class="side-r"><!--左右変更-->
<div class="size-m"><!--サイド幅変更-->

上記を以下に変更(side-/size-の削除)

<body>

【2】検索ワード「"main"」

<div class="main">
 <div class="m-main">

上記を以下に変更(mainの削除)

<div class="m-main">

【3】検索ワード「"right"」 すぐ上の /div ふたつ~

</div>
</div>
<div class="right">
 <div class="r-main">
<!--plugin-->
(省略)
<!--/plugin-->
 </div>
</div>
<ul id="b-top"><li><a href="#header">Top</a></li></ul>

上記を以下に変更(赤字すべて削除。/div ひとつだけ残す)

</div>

【4】検索ワード「/body」最下部

</div>
</body>

上記を以下に変更(/body の上にある /div を1つ削除)

</body>

変更場所 ▼ スタイルシートの編集

【5】検索ワード「幅変更 ---」

div.main{ width: 568px ; /* メイン */
   margin-right: 0px ; /* 可変 左右入替え right ←→ left */
}
div.m-main{ margin-right: 0px; } /* 可変 左右入替え right ←→ left */

上記を丸ごと以下に変更。

div.m-main{ width: 100% ;} /* メイン */

【6】検索ワード「body ---- */」部分
※menueとmenue-iで若干数値は異なりますが、変更部分は同じです
(.side-l #pagetop ~ .side-l div.rightまで)

.side-l #pagetop{
background: #f8f8f0 url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/10-right.jpg) right top repeat-y;
}
div.main{
  clear: both;
  float: left;
  overflow: hidden;
}
div.right{
  width: 230px;
  float: right;
  overflow: hidden;
  margin-bottom:15px;
}
.side-l div.main{ float: right ; }
.side-l div.right{ float: left ; }

上記を丸ごと以下に変更(使用テンプレートによってどちらかを選択)。

【pazo-menu】を使用

div.container{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-left.jpg) right top repeat-y;
}
div.outhead{
margin: 0 auto;
background: #dbd3bc url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/02-right.jpg) left top repeat-y;
}
div.inhead{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/02-left.jpg) right top repeat-y;
}
div.m-main{
  clear: both;
  overflow: hidden;
  padding-top: 20px; /* メイン上余白 */
  padding-bottom: 12px; /* メイン下余白 */
  text-align: left;
}

【pazo-menu-i】を使用

div.container{
background: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/10-right.jpg) right top repeat-y;
}
div.m-main{
  clear: both;
  overflow: hidden;
  padding-top: 20px; /* メイン上余白 */
  padding-bottom: 12px; /* メイン下余白 */
  text-align: left;
}

【7】検索ワード「body ---- */」【6】の少し下
※menueとmenue-iで若干数値は異なりますが、変更部分は同じです
(div.m-main ~ div.r-main tableまで)

div.m-main{
  padding-top: 20px; /* メイン上余白 */
  text-align: left;
  overflow: hidden;
}
div.main ul.navi,div.p-third,div.entry-m,div.entry-p{
  margin-right: 11px; /* メイン左右余白 - 右サイド */
  margin-left: 20px;
}
.side-l div.main ul.navi,.side-l div.p-third,.side-l div.entry-m,.side-l div.entry-p{
  margin-right: 20px; /* メイン左右余白 - 左サイド */
  margin-left: 11px;
}
div.m-main table{ font-size: 13.12px; }
div.r-main{
  margin: 0 16px 0 14px;
  padding-top: 18px; /* サイド上余白 */
  text-align: left;
}
.side-l div.r-main{
  margin: 0 14px 0 16px;
  text-align: left;
}
div.r-main table{ font-size: 13.12px; }

上記を丸ごと以下に変更。

div.m-main ul.navi,div.p-third,div.entry-m,div.entry-p{
  margin-right: 21px; /* メイン左右余白 */
  margin-left: 21px;
}
div.m-main table{ font-size: 13.12px; }

【8】【pazo-menu】のみ 検索ワード「header footer --- */」

下記部分を丸ごと削除。

.outhead{
margin: 0 auto;
background-color: #dbd3bc;
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/04-right.jpg);
background-position: left top;
background-repeat: repeat-y;
}
.side-l .outhead{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/02-left.jpg);
background-position: right top;
}

【9】検索ワード「bottom --- */」「size-m --- */」

「bottom --- */」部分と最下部の「size-m --- */」~「size-w --- */」は不要なので削除してください。

備考

幅変更の手順を参考にして、全体幅やリンク幅を調整。必要であれば、文字サイズも調整。幅が狭い場合は、フッターの文字サイズを少し小さくした方がいいかもしれません。

#footer{ font-size: 69%; }

文字サイズを大きくする場合は、メイン左右の余白を増やした方がいいかもしれません。

div.m-main ul.navi,div.p-third,div.entry-m,div.entry-p{
  margin-right: 25px; /* メイン左右余白 */
  margin-left: 25px;
}

■メニューからHomeリンクを右上に移動する場合

※右上メニューに赤字を追加

<ul><li><a href="./">Home</a></li><li><a href="./archives.html">Archives</a></li>...

リンク変更部分からHomeリンクを削除
※最初のリンクには class="home" をつける

<!--リンク変更-->
<ul>
<li class="home"><a href="./">About</a></li>

  1. メニューリンクの幅と個数を決める→154pxで4個
  2. 【pazo-menue】
    メニューの幅を計算する→154*4=616px
    これに余白分の14px(固定)を加えたものが全体幅になります。
    616+14=630px
    【pazo-menue-i】
    メニューの幅を計算する→154*4=616px
    これに余白分の12px(固定)を加えたものが全体幅になります。
    616+12=628px
  3. スタイルシートの幅変更に各値を入れる

【pazo-menue】

#pagetop{ width: 630px ; } /* 全体幅 (メイン + サイド) */
div.m-main{ width: 100% ;} /* メイン */
#menunavi li{ width: 154px; } /* メニューリンク */

【pazo-menue-i】

#pagetop{ width: 628px ; } /* 全体幅 (メイン + サイド) */
div.m-main{ width: 100% ;} /* メイン */
#menunavi li{ width: 154px; } /* メニューリンク */

関連記事