フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

FC2ブログのテンプレートを改装ver2

0 Comments
RYO
久々にテンプレートを一から改装し直した覚え書き。今回はレスポンシブ周りの設定で完全に詰んで初めてテンプレート製作者の方に助言を貰った。

詰んだ箇所以外はメモ取ってあったおかげで割とスムーズに済んでやっぱメモ大事だなあと。

Generic - FC2ブログテンプレート - テンプレート
テンプレートは引き続き『Generic』に手を加えたものを使用。何年も改装し続けてたのもあるけど、必要最低限の機能が揃ってて使いやすさでも改装のしやすさでもこれが一番しっくりくるね。

HTMLやCSSで一部色が変えてあるのは青は削除オレンジは追加・編集した部分という意味。


◆個別記事幅

今まで通り個別記事(main-body)幅を810pxから640pxに変更。レスポンシブテンプレートは幅によって細かい調整が必要になるので弄る場所が分かってないと結構大変。

この640pxはYouTubeのデフォルトの動画埋め込みサイズ(560×315)に一つ上の設定サイズ(640×360)があったときのものが基準で、動画アスペクト比も16:9を維持。画像サイズも程々に見やすい。

また1行の最大幅を日本語で45字程度にして読みやすいよう調整。1行の文字数が多いと行末から行頭に戻る視線移動の繰り返しで目が疲れやすい。大体2行で改行して90字前後だしそれなりの読みやすさは確保できたはず。


デフォルト余白未調整
main-containerの
左右余白60→10px
  • 個別記事(main-body)幅の設定
  • 810→640px
1300px(3箇所)1130px1030px
  • 個別記事幅が480px未満になったときにサイドメニューを下に移動させる。
  • 2箇所の方はシングルカラムになったとき個別記事幅が810pxになるのを防ぐため。
960px(4箇所)
986px
※CSS追加
886px
※CSS追加
930px(2箇所)
760px
※CSS追加
660px
※CSS追加
  • グローバルナビゲーションを格納
  • 767→500px
767px(1箇所)500px

大体元の数値から-170pxで640pxに調整できる。main-containerの左右余白も弄ったので-50pxを2箇所で更に-100px。サイドメニューの4箇所弄る方はデベロッパーツール弄りながら調整。


▼グローバルナビゲーション
ブログタイトルのすぐ下辺りにあるメニューバー的なもののことで、幅が狭くなるとハンバーガーっぽいアイコンになる。
幅の調整だけだとグローバルナビゲーションの位置が左にずれるのでCSS最下部に以下を追加。
/* ナビゲーンション調整 */
@media screen and (max-width: 886px) {
#navi-sizing {
max-width: 660px
}
}




◆SNSボタン

記事の下部だけでなく上部にも欲しかったので若干修正しつつ追加。

▼SNSボタン(記事下部)の編集
記事の下にあったSNSボタンの場所をpermanent_areaで囲ってトップページで非表示に。
「Go to page」ボタンを削除し、SNSボタンを需要がありそうな順番(Twitter・はてな・Facebook・Pinterest)に変更。
<!-- 注)記事下SNSシェアボタン不要の方ここから削除 -->
<!--permanent_area-->
<ul class="entry-footer-sns-ul">
<li class="c-twitter"><a href="https://twitter.com/intent/tweet?url=<%topentry_link>&amp;text=<%topentry_enc_title>" target="_blank" rel="noopener noreferrer" title="Tweet on Twitter"><i class="fab fa-twitter animated-hover"></i></a>
<li class="c-hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<%topentry_link>" target="_blank" rel="noopener noreferrer" title="Bookmark on Hatena"><span class="hatena animated-hover">B!</span></a>
<li class="c-facebook"><a href="https://www.facebook.com/sharer.php?u=<%topentry_link>&amp;t=<%topentry_enc_title>" target="_blank" rel="noopener noreferrer" title="Share on Facebook"><i class="fab fa-facebook-f animated-hover"></i></a>
<li class="c-pinterest"><a href="https://www.pinterest.com/pin/create/button/?url=<%topentry_link>&amp;media=<%topentry_image_url>&amp;description=<%topentry_enc_title>" target="_blank" rel="noopener noreferrer" title="Pin it on Pinterest"><i class="fab fa-pinterest-p animated-hover"></i></a>
<li class="go-to-page"><a href="<%topentry_link>" title="Go to page"><i class="fas fa-share animated-hover"></i></a>
</ul>
<!--/permanent_area-->
<!-- 注)記事下SNSシェアボタン不要の方ここまで削除 -->


▼SNSボタン(記事上部)の設置
permanent_areaで囲われてないものを<!--/topentry_tag-->の下部に設置してユーザータグの真下に設置。こちらはトップページでも表示。
<!-- 注)記事下SNSシェアボタン不要の方ここから削除 -->
<ul class="entry-footer-sns-ul">
<li class="c-twitter"><a href="https://twitter.com/intent/tweet?url=<%topentry_link>&amp;text=<%topentry_enc_title>" target="_blank" rel="noopener noreferrer" title="Tweet on Twitter"><i class="fab fa-twitter animated-hover"></i></a>
<li class="c-hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<%topentry_link>" target="_blank" rel="noopener noreferrer" title="Bookmark on Hatena"><span class="hatena animated-hover">B!</span></a>
<li class="c-facebook"><a href="https://www.facebook.com/sharer.php?u=<%topentry_link>&amp;t=<%topentry_enc_title>" target="_blank" rel="noopener noreferrer" title="Share on Facebook"><i class="fab fa-facebook-f animated-hover"></i></a>
<li class="c-pinterest"><a href="https://www.pinterest.com/pin/create/button/?url=<%topentry_link>&amp;media=<%topentry_image_url>&amp;description=<%topentry_enc_title>" target="_blank" rel="noopener noreferrer" title="Pin it on Pinterest"><i class="fab fa-pinterest-p animated-hover"></i></a>
</ul>
<!-- 注)記事下SNSシェアボタン不要の方ここまで削除 -->


▼SNSボタン(記事上部)の余白
ユーザータグとSNSボタンの間が狭すぎたので余白を設置。margin-top: 10px;を追加。
/* sns on article footer */
.entry-footer-sns-ul {
display: flex;
align-items: center;
height: 35px;
text-align: center;
margin-top: 10px;
}


▼SNSボタン(記事下部)の余白
管理人アイコンとSNSボタンの間が微妙に広かったので余白を20pxから10pxに変更。
#entry-author {
padding-bottom: 10px;
}




◆アクセス解析

アクセス解析の場所が指定してあるのでそこにGoogle AnalyticsとFC2アクセス解析を設置。
<!-- アクセス解析はここから -->
<!-------------------- ▼Google Analytics▼ -------------------->
解析タグ1
<!-------------------- ▲Google Analytics▲ -------------------->
<!--------------------- ▼[FC2 Analyzer]▼ --------------------->
解析タグ2
<!--------------------- ▲[FC2 Analyzer]▲ --------------------->
<!-- ここの間 -->
本当はGoogle Analyticsだけで良いんだけど、FC2アクセス解析の方が簡素で見やすいのがね。




◆広告

忍者AdMaxの登録&広告の設置
広告については長くなるので別記事参照。ここ見てる人はこれを機に広告導入するのもありかも。

あと記事内に広告を掲載していると特定条件下で表示されないのでスクロールアンカーは削除しておくべし。
<!-- 注)スクロールアンカー不要の方ここから削除 -->
<!-- 注)スクロールアンカー不要の方ここまで削除 -->




◆ブラウザタイトルバー(トップページ)

ブログのトップページでブラウザタイトルバーに「トップページ - ブログ名」と表示されるのが嫌だったので、「トップページ - 」の部分を消してブログ名だけ表示されるように変更。

▼修正前(「トップページ - ブログ名」)
<title>トップページ - <%blog_name></title>

▼修正後(ブログ名)
<title><%blog_name></title>




◆ブラウザタイトルバー(個別記事)

個別記事のタイトルバーで「個別記事名 - カテゴリ名」になっていたので、「個別記事名 - ブログ名」に変更。

▼修正前(「個別記事名 - カテゴリ名」)
<title><%sub_title> - <!--topentry--><%topentry_category><!--/topentry--></title>

▼修正後(「個別記事名 - ブログ名」)
<title><%sub_title> - <%blog_name></title>




◆最新記事の「New!」を消す

投稿して数日?の記事のタイトル横に「New!」と表示されなくても良いので削除。

</head>の上にあるスクリプト部分を消す。
<!--not_edit_area-->
<script>function nw(n,e,a,w){var t=new Date,s=24,c=new Date(n,e-1,a,w);36e5*s>t-c&&document.write('<span class="new">New!</span>')}</script>
<!--/not_edit_area-->

上記を消しただけだとデベロッパーツールでエラーが出たので以下のスクリプトも削除。

▼同じものが5つあるので消す
<script>nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')</script>

▼1つ消す
<script>nw('<%titlelist_year>','<%titlelist_month>','<%titlelist_day>','<%titlelist_hour>')</script>




◆ABOUT(グローバルナビゲーション)

グローバルナビゲーション(メニューバー)の「ABOUT」のリンクを当ブログの概要が書いてある記事に変更。

▼修正前
<a href="#">ABOUT</a><!-- 注)予備リンク, ABOUTのテキストを適宜修正+リンクアドレスを # と差し替え, 不要の方この一行削除 -->

▼修正後
<a href="https://tokitamaroku.blog.fc2.com/blog-entry-1.html">ABOUT</a><!-- 注)予備リンク, ABOUTのテキストを適宜修正+リンクアドレスを # と差し替え, 不要の方この一行削除 -->




◆ヘッダー画像&グラデーションを削除

ヘッダーは背景もグラデーションも要らないので両方とも削除。
#header-banner {
width: 100%;
background: url(https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/originbg1.png),
linear-gradient(to right, rgb(101,112,160), rgb(227,204,193));/* 注)トップページヘッダー画像+グラデーション */

overflow: hidden;
text-shadow: 2px 0px 2px rgba(85,85,85,.8);
}




◆ブログ名のフォントとサイズ

ブログ名のフォントサイズを倍の4remに変更。フォントの指定がなかったので以前のテンプレートに合わせて明朝体にしておいた。
#blog-title {
margin: 0;
width: 100%;
max-width: 800px;
letter-spacing: 2px;
line-height: 1.4;
font-size: 4rem;
font-weight: bold;
text-transform: uppercase;
font-family: "MS P明朝","MS 明朝",serif;
}




◆ブログ名とサイト説明文の間の余白

余白が広すぎたのでmargin-topを20pxから0pxに変更。
#site-description {
margin-top: 0px;
width: 100%;
max-width: 850px;
color: white;/* 注)ヘッダー内ブログ説明文文字色 */
line-height: 1.5;
font-size: 1.2rem;
}




◆「個別記事ブラウザサイドページ送り」を削除

スクロール中に画面の両サイドに出るやつ。記事の最下部辺りに関連記事あるしスクロール中に誤爆の可能性も考えて消しておいた。スクリプトの方もあるので計2箇所を削除。
<!-- 個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここから削除 -->
<!-- 個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここまで削除 -->




◆「個別記事用ページナビ」を削除

コメントフォームの下にある前後の記事への移動用ナビを削除。関連記事の前後ならともかく全く関係ない記事へのリンクは要らないかと。
<!-- 個別記事用ページナビここから -->
<!-- 個別記事用ページナビここまで -->




◆サイト説明文をトップページ以外でも表示

下記の青い部分を全て削除。
<!--not_permanent_area--><!--not_category_area--><!--not_titlelist_area--><!--not_search_area--><!--not_date_area--><!--not_edit_area--><!--not_tag_area-->
<p id="site-description"><%introduction></p>
<!--/not_tag_area--><!--/not_edit_area--><!--/not_date_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_category_area--><!--/not_permanent_area-->




◆「続きを読む」クリック時の表示位置を変更

トップページで「続きを読む」をクリックして記事を開くと追記の文章から表示されてしまうので、#postscriptを消し本文部分から表示。
<a href="<%topentry_link>#postscript">続きを読む<i class="far fa-arrow-alt-circle-right animated-hover"></i></a>




◆関連記事

▼「You may also like」を「関連記事」に変更
#fc2relate_entry_thumbnail_area:before {
content: "関連記事";/* 注)関連記事 タイトル変更はここです */
display: block;
margin: auto;
width: 100%;
line-height: 1.4;
padding-top: 20px;
position: absolute;
top: -50px;
z-index: 3;
}

▼関連記事(スマホ)
スマホで見たときなどに画面の横幅が狭いと関連記事が横にスクロールしないと見られなくなるので、width: 1470px→100%に変更し関連記事が縦に並ぶようにした。
@media screen and (max-width: 666px) {
#fc2relate_entry_thumbnail_area .relate_dd {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul {
width: 100%;
overflow: auto;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul li {
width: 290px;
}
}




◆「Posted by 〇〇」

英語だと分かりづらいので「Posted by」を「管理人」に変更。
<div id="entry-author-dv">管理人<span><%author_name></span></div>




◆コメント装飾ツールを削除

誰も使ってない上に地味に重いと聞いて以下の部分を削除。
<script src="<%template_comment_js>"></script>




◆コメント投稿

コメントを書き込むときのチェックボックスが「SECRET」だと分かりづらいので、HTMLの2箇所を「管理人にだけ表示を許可」に変更。
<label for="himitu">管理人にだけ表示を許可</label>




◆整形済みテキスト

記事にHTMLのソースコードを書くときはエンコードして<pre></pre>で囲む必要がある。背景色が黒だし引用と同じ色にしたかったので、CSS最下部に以下を追加。
/* 整形済みテキスト */
pre {
background-color: #383838;
}





★以下の内容は配色や余白の調整に関するもののみ。


◆全体の背景色と文字色

3行目の背景色はwhiteから以前のテンプレートに近い黒(#272727)に変更。それに合わせて4行目の文字色をrgb(51,51,51)からwhiteに変更。
body {
margin: 0;
background-color: #272727;
color: white;

word-wrap: break-word;
font: 1.4rem/1.9 Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', sans-serif;
-webkit-font-smoothing: antialiased;/* 注)文字が細すぎると感じる方はこの一行削除(Mac Google Chromeのみ) 1/2 */
-moz-osx-font-smoothing: grayscale;/* 注)文字が細すぎると感じる方はこの一行削除(Mac Firefoxのみ) 2/2 */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ここを変えただけでは記事タイトル・サイドメニュー・コメント・続きを読むなどの文字色がそのままなのでそちらも合わせて変えていく。




◆記事タイトル色

▼記事タイトル
rgb(51,51,51)からwhiteに変更。
.entry-title a {
color: white;
}

▼記事タイトルのホバー
rgb(166,159,142)からorangeに変更。
.entry-title a:hover {
color: orange;
}




◆「続きを読む」

▼「続きを読む」の文字色
ホバー前だと背景色に溶け込んで文字が見えないのでrgb(51,51,51)からwhiteに変更。
.read-more a {
color: white;
}

▼「続きを読む」の外枠
「続きを読む」の外枠も背景色に溶け込んでいるので、3行目のborder: 2px solid rgb(51,51,51);からborder: 2px solid white;に変更。
.read-more a {
display: inline-block;
border: 2px solid white;
border-radius: 2px;
padding: .8em 3em;
position: relative;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
-webkit-transform: perspective(1px) translateZ(0);
-webkit-transition: color .3s;
transition: color .3s;
}




◆コメント送信ボタン(SEND)

コメント送信ボタン(SEND)の文字色と外枠が背景色に溶け込んでいるので2箇所変更。

文字色は8行目のbackground-color: transparent;からbackground-color: white;に変更。

SENDの外枠は9行目のborder: 2px solid rgb(51,51,51);からborder: 2px solid white;に変更。
/* send and delete button */
#sendbtn,
#delbtn {
margin-top: 20px;
width: 49%;
max-width: 156px;
height: 40px;
background-color: white;
border: 2px solid white;

color: rgb(51,51,51);/* 注)send, deleteボタンテキスト色 */
cursor: pointer;
font-size: 1.4rem; /* 注)send, deleteボタンフォント大きさ */
text-align: center;
text-transform: uppercase;
transition: .3s ease-in-out;
}




◆コメント欄

全体の文字色をwhiteにしたせいで吹き出し背景色(白)にコメント(白字)が溶け込んでいるので、背景色を少し薄めにした。それに合わせてコメント欄の左上にある吹き出し(▲)部分の色も変える必要あり。

2箇所のrgb(250,250,250)を背景色より薄めの#383838に変更。
.arrow-box {
margin: 20px auto 0;
background-color: #383838;/* 注)コメント一覧背景色 */
padding: 15px 20px;
position: relative;
}

.arrow-box:after {
content: "";
margin-left: -12px;
height: 0;
width: 0;
border: solid transparent;
border-color: rgba(250,250,250,0);/* 注)コメント一覧矢印の色 */
border-bottom-color: #383838;/* 注)コメント一覧矢印の色 */
border-width: 12px;
pointer-events: none;
position: absolute;
left: 8%;
bottom: 100%;
}




◆リンクのホバー

記事内のリンクやコメント欄の「REPLY」などにカーソルを合わせたときのホバー色をrgb(51,51,51)からorangeに変更。
a:hover {
color: orange;
}




◆サイドバー

▼リンクの色
rgb(120,120,120)からこのテンプレートの基本リンク色のrgb(115,122,164)に変更。
.sidebar-style a {
color: rgb(115,122,164);
}

▼リンクのホバー色
カーソルを合わせたときにホバー色が付くようにcolor: orange;を追加。
.sidebar-style a:hover {
text-decoration: underline;/* 注)サイドメニューリンク色 */
color: orange;
}




◆関連記事のリンク色とホバー色

リンク色をrgb(165,164,179)からこのテンプレートの基本リンク色のrgb(115,122,164)に変更。

ホバー色が指定されてなかったのでcolor: orange;を追加。
.relate_dl a,
.tb_dl a {
color: rgb(115,122,164)
}

.relate_dl a:hover,
.tb_dl a:hover {
text-decoration: underline;
color: orange;
}




◆ページ送り

▼ページ数の文字色
数字が背景色に溶け込んで見えなくなったので数字の色を変更。

15行目の各ページの数字の色をcolor: rgb(51,51,51);からwhiteに変更。20行目に現在のページ数の文字色をcolor: blackとして挿入。
.pager-item-anchor,
#current,
.pager-item-anchor-general {
display: inline-flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
margin: 0 2px 4px;
box-shadow: 1px 0 0 0 rgb(229,229,229),
0 1px 0 0 rgb(229,229,229),
1px 1px 0 0 rgb(229,229,229),
1px 0 0 0 rgb(229,229,229) inset,
0 1px 0 0 rgb(229,229,229) inset;
color: white;
}

#current {
background: rgb(245,245,245);/* 注)汎用ページ送り現在ページ背景色 */
color: black
}




◆引用

引用を示す左横の縦線の色をborder-left: 3px solid rgb(51,51,51);からborder-left: 3px solid rgb(115,122,164);に変更。

引用の下余白が広すぎたのでmargin: 4em 15px 3em;をmargin: 4em 15px 1em;に変更。

background-color: #383838;を追加して引用枠を分かりやすくしてみた。

縦線の上のマークの色もrgb(206,206,206)からrgb(115,122,164)に変更。
blockquote {
margin: 4em 15px 1em;
border-left: 3px solid rgb(115,122,164);

padding-left: 15px;
position: relative;
z-index: 1;
background-color: #383838;
}

blockquote:before {
content: "\f10d";
color: rgb(115,122,164);
line-height: 1em;
position: absolute;
left: -15px;
top: -30px;
z-index: -1;
font-weight: 700;
font-family: 'Font Awesome 5 Free';
font-size: 200%;
}




◆ページスクロールボタン

▼ボタンの透明度
ボタンが不透明になっているのでbackground: rgba(255,255,255,.4);の4つ目の数値を0にし透過。
#pagetop,
#pagemiddle,
#pagebottom {
margin-bottom: 10px;
width: 40px;
height: 40px;
background: rgba(255,255,255,.0);
border: 1px solid rgba(179,171,180,.5);
line-height: 39px;
}

▼ホバー
ホバー時の背景色にbackground: rgb(115,122,164)を追加。背景色を指定したことで字が見づらくなったので文字色をrgb(150,150,150)からwhiteに変更。
#page-scroll a:hover {
color: white;
background: rgb(115,122,164);
}




★以下の内容は余白の調整に関するもののみ。


◆ブログ名の余白

シングルカラムに変化したときによって違う余白が設定されているので3箇所を変更。

▼padding: 60px 60px 40px;から上下余白を0、左右余白を10に変更
#blog-name-container {
margin: auto;
max-width: 1130px;
padding: 0px 10px 0px;
}

▼padding: 60px 30px 40px;から上下余白を0、左右余白を10に変更
@media screen and (max-width: 666px) {
#blog-name-container {
padding: 0px 10px 0px;
}
}

▼padding: 60px 15px 40px;から上下余白を0、左右余白を10に変更
@media screen and (max-width: 414px) {
#blog-name-container {
padding: 0px 10px 0px;
}
}




◆メインコンテナーの余白

シングルカラムに変化したときによって違う余白が設定されているので3箇所を変更。

▼padding: 50px 60px 80px;から余白を10に変更
#main-container {
display: flex;
justify-content: space-between;
margin: auto;
max-width: 1130px;
padding: 10px 10px 10px;
}

▼padding: 50px 30px 80px;から余白を10に変更
@media screen and (max-width: 666px) {
#main-container {
padding: 10px 10px 10px;
}
}

▼padding: 50px 15px 80px;から余白を10に変更
@media screen and (max-width: 414px) {
#main-container {
padding: 10px 10px 10px;
}
}




◆グローバルナビゲーションの余白

padding: 0 60px;から左右余白を10に変更
#navi-sizing {
margin: auto;
width: 100%;
max-width: 1130px;
padding: 0 10px;
}




◆エントリーヘッダー(個別記事)下部の余白

padding-bottom: 20px;を10pxに変更。
.entry-header {
border-bottom: 1px solid rgb(238,238,238);
color: rgb(150,150,150);
padding-bottom: 10px;
font-size: 12px;
}




◆インナーコンテンツ(個別記事)上部の余白

個別記事の設定なのでトップページ見ながらだと編集しづらい。レイアウトのバランスを考えて上余白を10pxにしつつ、下余白は20pxで維持。

▼編集前
.inner-contents {
margin: 20px 0;
}

▼編集後
.inner-contents {
margin: 10px 0px 20px;
}




◆サイドメニューのタイトル下の余白

タイトルとその下の内容との余白が微妙に広いのでmarginを20px→10pxに変更。
.side-menu h4 {
margin: 0 auto 10px;
border-left: 5px solid rgb(115,122,164);
letter-spacing: 1px;
line-height: 1.4;
padding: 10px 8px;
font-size: 13px;
text-transform: uppercase;
}




◆「続きを読む」の余白

「続きを読む」の上余白が広すぎたので上余白を0pxにしつつ、下余白は20pxで維持。

▼編集前
.read-more {
margin: 20px 0;
font-size: 1.5rem;
}

▼編集後
.read-more {
margin: 0px 0px 20px;
font-size: 1.5rem;
}

ボタンが大きすぎるのでpadding: .8em 3em;から半分のpadding: .4em 1.5em;に変更。
.read-more a {
display: inline-block;
border: 2px solid white;
border-radius: 2px;
padding: .4em 1.5em;
position: relative;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
transition: color .3s;
}




◆関連記事の上余白

記事本文と関連記事の間の余白が広すぎたので100pxから50pxに変更。
/* with thumbnail */
#fc2relate_entry_thumbnail_area {
margin: 50px auto 0;
border: 1px solid rgb(230,230,230);
padding: 0;
position: relative;
z-index: 1;
}




◆本文と追記の間の余白

余白が狭すぎたので40pxから80pxに変更。
#postscript {
margin-top: -40px;
padding-top: 80px;
}
関連記事
RYO
管理人RYO

Comments 0

There are no comments yet.