スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログテンプレート【white_style】改編の軌跡

レバニラ?

この卵なんなんだろね?
なんかレバニラ?とか言ってたけど。言ってません(まだ)。

ていうかゴメン、MoEな話で申し訳ない。
でも言わせて。
まさかな~とは思うけど、
4~5年前のゴンゾな時のMoE運営にいた人ががんほさんに来てない?
こないだのラーメンイベントと言い、丸太イベントと言い、
どうにも当時のMoE臭がして仕方ないんだけど。
知っててアーって思う人がいると嬉しいなーなんてw

とりあえず粛々と丸太納品してます。



さて、今日はどうでもいい更新でして、さらに申し訳ない。
ブログテンプレートのCSSを改編した跡を備忘録として載せておこうと。
色々漁ったけど情報が出てこなくて、わたし自身が難儀したというコトもあり、
もしも利用したい人がいれば使ってくださいなということで。



長いので折りたたみます。


───────────────以下CSS───────────────



@charset "UTF-8";





/* Reset
------------------------------------------------- */

html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
blockquote,th,td,p {
margin: 0;
padding: 0;
}



/* Default
------------------------------------------------- */

body {
background-color: #FFFFFF;
color: #666666;
text-align: center;
font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
line-height: 1.4;
font-size: 12px; /* IE7 */ ←(元small)本文文字の大きさ
font-size: 12px; /* IE6 */ ←(元82%)本文文字の大きさ
word-break: break-all;
}
/* Modern browser */
html>/**/body {
font-size: 12px; ←(元13px)本文文字の大きさ
}



/* Hyper text
------------------------------------------------- */

a {
text-decoration: none;
/*\*/
overflow: hidden; /* for Fx */
/**/
}

a:link,
a:visited {
color: #777777;
}

a:focus,
a:hover,
a:active {
color: #333333;
}

タイトル、本文それぞれリンク部分の色を違うものにしたかったので、
最後尾にて追加指示する形にしました。


/* Image
------------------------------------------------- */

img,
a img {
border: none;
}

.emoji {
vertical-align:middle;
}

.entry_body img{
max-width: 100%;
height: auto;
}


/* Base elements
------------------------------------------------- */

h1 { font-size: 26px; } ←(元180%)タイトル文字の大きさ

h2 { font-size: 13px; } ←(元130%)記事タイトル文字の大きさ

h3 { font-size: 12px; } ←(元115%)コメントタイトル文字の大きさ

h4,h5,h6 { font-size: 100%; }

ul, ol, li, dl, dt, dd { list-style: none; }
 
table {
font-size: 10px; /* for Modern browser */
font-size: 10px; /* for IE6 */
}



/* Layout
------------------------------------------------------------ */

#container {
width: 1020px; ←(元900px)ブログ全体の幅
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FFFFFF;
position: relative;
}

#header {
padding: 20px 20px;
background-image: url("×××"); ←タイトル背景画像、画像urlは伏せます、以下略。
background-repeat:no-repeat;
height:475px; ←(元204px)タイトル画像の縦幅を変えました


}

以下の数値の変更については下部にまとめて説明。

#wrap {
width: 762px; ←(元680px)
float: left;
}
#wrap:after {
content: "";
overflow: hidden;
display: block;
height: 1px;
clear: both;
}
/*\*/
* html #wrap {
overflow: visible;
height: 1px;
}
/**/

#main {
float: right;
width: 504px !important; ←(元460px)メインコンテンツの幅
width /* for IE5.5 */: 500px;
padding: 0px 0px 5px 0px;
overflow: hidden;
margin-left: 12px;

}

#sidemenu1 {
float: left;
width: 238px; ←(元208px)左サイドメニューの幅
padding-bottom: 20px; ←(元12px)記事左部分余白
overflow: hidden;

}

#sidemenu2 {
float: right;
width: 238px; ←(元208px)右サイドメニューの幅
padding-bottom: 20px; ←(元12px)記事右部分余白
overflow: hidden;
}

#footer {
clear: both;
padding: 10px 0px;
width: 100%;
font-size: 85% !important; /* for Modern browser */
font-size: 90%; /* for IE6 */
border-top:solid 1px #dddddd; ←(追加指定)フッター上部にラインを入れました
background-image: url; ←背景画像を消去
}

デフォルト
(左サイドメニュー)208 + (余白)12 + (記事幅)460 = 680 (#wrap)
(#wrap)680 + (余白)12 + (右サイドメニュー)208 = 900 (#container)
このように考える。
すると、(右サイドメニュー)238 + (余白)20 + (#wrap) = 1020(#container)
故に(1020-238-20)#wrap = 762
#main = 762 - (余白)20 -(左サイドメニュー)238 = 504
238 + 20 + 504 (ここまでが #wrap) + 20 + 238 = 1020
右サイドバーの 20 はこの 1020 - 1000 (= 20 から余白が作られる)。


※Yahoo!知恵袋にて質問した際に貰った回答に少し加筆しました。

2015.4.15 追記
この状態だと、メインコンテンツ幅(記事幅)が狭いまま。
ここより少し下にある、↓の部分を見つけて書きなおし。

>  h2.entry_header {
>      text-align: left;
>      background-image:url("×××");
>      background-repeat: no-repeat;
>      background-position: left top;
>       height: 34px;
>      padding: 5px 0px 0px 15px;
>      width: 504px !important; 
          ↑(元456px)ここのwidthを#mainのwidthと同じ値にする
>      width: 440px;
>  }

で、広がる。

/* Header
------------------------------------------------------------ */

#header h1 {
text-align: right; ←(元left)タイトルを右へ
padding-top: 20px; ←(元padding-bottom:5px topから20pxに変更)
padding-right: 15px; ←(追加指定)タイトルを右から15pxの位置へ
}

#header p {
text-align: right; ←(元left)ブログ説明文を右へ
padding-right: 15px; ←(追加指定)ブログ説明文を右から15pxの位置へ
}



/* Main Contents
------------------------------------------------------------ */

.content {
margin-bottom: 20px;
text-align: left;
width: 502px;
border: 1px solid #dddddd;
background-image: url("×××"); ←記事部分下部の灰色のライン画像
background-repeat:no-repeat;
background-position: bottom;
}

.xcalender {
background-image: url("×××"); ←xカレンダーの背景画像
background-position: center;
background-repeat:no-repeat;
color: #787878;
font-size: small;
height:35px !important;
height /*ie5.5*/:50px;
left : 0px;
letter-spacing:-1px;
padding-top:15px !important;
padding-top /ie5.5/: 15px;
position: absolute;
text-align: center;
top: 466px; ←(元195px)xカレンダーの位置を下げました
width: 100%;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 50;
}

.xcalender a {
color: #66CCFF; ←(元#6598ff)xカレンダーリンクの色
font-weight:bold;
}

.xcalender a:hover {
color: #000000;
}

.xcalender li {
display: inline;
padding-right: 2px;
padding-left: 2px;
}


h2.entry_header {
text-align: left;
background-image:url("×××"); ←記事タイトルの背景画像(作り直し)サイズは本体-2px
background-repeat: no-repeat;
background-position: left top;
height: 34px;
padding: 5px 0px 0px 15px;
width: 504px !important; ←(元456px)メインコンテンツの幅を広げました
width: 440px;
}

.entry_body {
text-align: left;
margin-top: 0px;
padding: 5px 15px 0px 20px;
overflow: hidden;


}

.entry_body .entry_more {
padding: 15px 15px 15px 0px;
margin: 0px;
}

.entry_body .tag_lnk {
margin: 0px;
}

.entry_body .theme {
margin: 10px 0px 0px;
}

.entry_footer {
text-align: right;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;

}

.entry_footer li {
display: inline;
list-style-type: none;
}
.blog_baton {
border:1px solid #90DCF6;

}

/* clap + bookmark */
.fc2_footer {
margin: 10px 0px 0px;
}

.page_navi {
margin-bottom: 15px;
text-align: center;
}

.pagetop {
text-align: right;
margin-right: 10px;
margin-left: 10px;
padding: 0px 0px 10px 0px;
}
.pagetop a{
color: #66CCFF;
background-image: url("×××");
background-repeat: no-repeat;
background-position: left;
padding: 15px;
}

a#container{
text-align:-9999px;

}



/* Entry (html tag)
------------------------------------------------------------ */

.entry_body h2,
.entry_body h3,
.entry_body h4,
.entry_body h5,
.entry_body h6 {
margin: 0em 0em 0.5em;
}

.entry_body p {
margin: 0.3em 1em;
}

.entry_body ul,
.entry_body ol {
margin: 1em 0em 1em;
}

.entry_body ul li {
list-style: disc outside;
margin-left: 15px;
}

.entry_body ol li {
list-style: decimal outside;
margin-left: 2em;
}

.entry_body dl {
margin: 1em 1.5em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 1em 1em 0em;
}

.entry_body dt {
font-weight: bold;
margin-bottom: 0.5em;
padding-bottom: 2px;
border-bottom-width: 1px;
border-bottom-style: dotted;
}

.entry_body dd {
margin: 0em 1em 1em;
}

.entry_body blockquote {
margin: 5px;
padding: 5px;
border: 1px dotted;
}

.entry_body pre {
margin: 1em auto;
padding: 0.5em;
border: 1px solid;
font-family: sans-serif;
overflow: auto;
width: 90%;
}




/* for without MacIE5 \*/
.entry_body pre { overflow: scroll; }
/**/

.entry_body > pre { width: auto; }

.entry_body code { font-family: monospace; }



/* Comment, Trackback, Entry list
------------------------------------------------------------ */

.sub_header {
text-align: left;
margin-bottom: 10px;
padding:5px 0px 0px 10px;
}

.sub_title {
margin-bottom: 5px;
margin-right: 10px;
margin-left: 10px;
}

.sub_body {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}

.list_body {
margin-bottom:10px;
margin-top: 0px;
margin-right: 10px;
margin-left: 10px;
}

.list_body li {
margin-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: dotted;
padding-bottom: 1px;
}

.sub_footer {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}

.sub_footer li {
display: inline;
list-style-type: none;
}

.form dl {
margin-right: 10px;
margin-left: 10px;
}

.form dl dd {
margin-bottom: 5px;
}

.form dl dd textarea {
width: 380px;
height: 150px;
}

.form input#himitu {
margin-right: 0.5em;
}

.form .form_btn {
margin-top: 20px;
margin-bottom: 15px;
margin-right: 10px;
margin-left: 10px;
}

.form .form_btn input {
margin-right: 3px;
}

.content .sub_header{
border-left:3px solid #90DCF6;
margin:0px 0px 10px 5px;
padding:5px 10px 5px 10px;
}

h3.sub_title{
border-left:3px solid #90DCF6;
padding:0px 0px 0px 5px;
border-bottom:1px solid #90DCF6;
}

.trackback_url {
padding-bottom: 30px;
margin-right: 10px;
margin-left: 10px;
text-align: left;
}

.trackback_url input {
padding: 1px;
width: 85%;
border: 1px solid #66CCFF;
}



/* Plugin (Main content)
------------------------------------------------------------ */

.plg3_body {
margin-bottom: 20px;
}

.plg3_body .plg_header,
.plg3_body .plg_body,
.plg3_body .plg_footer {
margin-top: 3px;
}



/* Sidemenu (Plugin)
------------------------------------------------------------ */

#sidemenu1 li,
#sidemenu2 li {
list-style-type: disc;
list-style-position: outside;
margin-left: 15px;
}

.sidemenu_body {
margin-bottom: 15px;
border:1px solid #dddddd;

}

.sidemenu_body .plg_title {
background-image: url("×××"); ←サイドメニュータイトルの背景画像(作り直し)サイズは本体-2px
background-repeat: no-repeat;
background-position: top;
height:34px;
padding:8px 0px 0px 10px; ←(元5px)サイドメニュータイトル位置を下げました
font-size:12px; ←(追加指定)サイドメニューのタイトル文字の大きさ
font-weight: bold;
}


.sidemenu_body .plg_header{
margin-top: 3px;
margin-right: 10px;
margin-left: 10px;
}
.sidemenu_body .plg_body{
padding:5px 5px 10px 10px;
font-size:11px; ←(追加指定)サイドメニューの本文の文字の大きさ
}
.sidemenu_body .plg_body ul{
color:#66CCFF;
}

.sidemenu_body .plg_footer {
background-image: url("×××"); /*url先にファイル存在せず*/
background-repeat: no-repeat;
background-position: left bottom;
padding:0px 0px 5px 10px;

}

.sidemenu_body .plg_body input {
margin: 2px;
}




/* Calendar(Plugin)
------------------------------------------------------------ */

table.calender {
width: 90%;
margin: 0px auto;
}

table.calender caption {
margin-bottom: 10px;
margin: 0px auto;
}

table.calender th,
table.calender td {
padding: 0.1em;
border-bottom: 1px dotted #cccccc;
text-align: center;
}

table.calender td a:link{
display: block;
color: #FFFFFF;
background-color: #90DCF6;
border: 1px #D9EFE9 solid;
}

table.calender td a:visited {
display: block;
color: #666666;
background-color: #90DCF6;
border: 1px #D9EFE9 solid;
}

table.calender td a:focus,
table.calender td a:hover,
table.calender td a:active {
background-color: #FFFFFF;
border: 1px #66CCFF solid;
color: #666666;
}

table.calender th#sun {
color: #FF0000;
}

table.calender th#sat {
color: #0000FF;
}



/* Piyo(Plugin)
------------------------------------------------------------ */

.tab {
text-align: left;
margin-bottom: 10px;
}

.tab input{
padding: 3px 5px;
}

.tab input.b1{
margin-right: 5px;
border: 1px solid #66CCFF;
background-color: #FFFFCC;

}
.tab input.b2{
margin-right: 5px;
border: 1px solid #66CCFF;
background-color: #FFFFCC;

}

.mylog {
padding: 5px;
text-align: left;
background-color: #FFFFFF;
font-size: 10px; /* for Modern browser */
font-size: 10px; /* for IE6 */
}

.mylog .title {
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A5A5A5;
margin: 0px 0px 10px;
padding: 0px 0px 3px;
}

.mylog dl {
margin: 0px;
padding: 0px;
}

.mylog dt.day {
margin: 0px;
padding: 0px 0px 5px;
background-color: #FFFFFF;
background-image: none;
text-align: left;
font-size: 10px; /* for Modern browser */
font-size: 10px; /* for IE6 */
}

.mylog dd.piyolog {
margin: 0px 0px 5px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A5A5A5;
padding: 0px 0px 10px;
}


.license {
text-align: right;
font-size: 88% !important; /* for Modern browser */
font-size: 93%; /* for IE6 */
}



/* Footer
------------------------------------------------------------ */

#footer p {
margin-bottom: 3px;
}

#footer .copyright {
margin-bottom: 10px;
}



/* for MacIE
------------------------------------------------------------ */

textarea,input,select {
font-family: "MS Pゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", sans-serif;
}


※以下全て追加。


/* 文字色関係 追加部分
------------------------------------------------------------ */

#header a:link,#header a:visited{
color:#ffffff; /* タイトルリンクの色 */
}

#header a:hover{
color:#444444; /* タイトルリンクオンマウスの色 */
}

#header p {
color:#ffffff;/*ブログ紹介文の色*/
 }

.entry_body a{
color:#FF6699; /* 記事内リンクの色 */
font-weight:bold; /* 記事内リンクは太字で */
}
.entry_body a:hover{
color:#FF3399; /* 記事内リンクオンマウスの色 */
}

※ここも知恵袋さんのお陰!

/* カテゴリー内書式  
↑カテゴリーは選択できる二つのうち、「カスタマイズ用」のを使っています。
------------------------------------------------------------ */

li.main_list {
margin-bottom:8px; /* 親カテゴリの間隔 */
font-weight:bold; /* 親カテゴリの文字の太さ */
}

ul.sub_menu {
margin:0px;
padding:0px;
margin-top:5px; /* 親カテゴリから子カテゴリまでの間隔 */
padding-left:0px; /* 子カテゴリの左余白 */
font-weight:normal; /* 子カテゴリの文字の太さ */
}

#sidemenu1 li.sub_list,
#sidemenu1 li.sub_list_end {
list-style-type: none; /*子カテゴリのリストマーク削除*/
}




───────────────ここまで───────────────


こんな感じで。
html部分もだいぶ手を加えましたが、ネット漁ったら出てきたコトばかりなのと、
多分まんま貼りつけたらぐちゃる(かといって加工は面倒)ので、公開は控えます!

コメントの投稿

非公開コメント

No title

改めてイラスト頂きました!有難う御座います!
っていうか、ろくさんの真面目に描いた男イラスト初めて見たww
イケメンだな!!
でも、ろくさん。大事な相棒がいないじゃないっすか。
シャルロッテがいないじゃないっすか。(猫)
しゃ、シャルロッテー!!!(猫)

テンプレート色々弄れたら面白そうだなー!と思いつつ
謎の記号の羅列に頭痛がしてきたぜ・・・(お布団に入りながら)

No title

おぉう・・・すごい事になっている(´゚ω゚):;*

うちもアレコレしたいなーと思いつつ、
文章の色味をいじったところで力尽きました。
昔はトップ画変えたりしてたのですがw
(たぶんろくちゃんが見たことあるのがソレだと思うw)
ガラケーから見れるテンプレはちゃんと作ったんだけどなぁ。

本当にお疲れ様でした!(。+・`ω・´)b

No title

>>ナオ吉さん

こちらこそ使って頂いてありがとうございます!
えっ、前のもかなり真面目に書いたんですが?????
モデルが真面目ではないことについては、当方では如何ともし難く………

そう、ショルリットさん出来上がってから、ああー、忘れた!と。
ごめんねショリリッチさん、でも書いたらサイズ的に限界突破して、
本体(イケメン)部分を削る羽目になったかもしれない…から許してね?

テンプレいじるのは楽しいのですが、
ついつい入れ込み過ぎて、時間がたつのを忘れてしまいますw
どうにもこの手のコトには集中が過ぎてしまいましてw。
でも結構思うように出来て満足です☆


>>ぽっちー

手っ取り早いかなーと思ってこういうカタチで載せてしまいましたw
前に一度wordpressで作ったことがあるのですが、生半可なもので、
他人の作ったものになるとどうにも勝手が分からず苦労しましたw
もっと精進したいですねえw

確かに前に見たのはそんなだったかも!
てかガラケーからちゃんと見えるようにってすごいなあ、
わたしはPC用しかいじってなくて、スマホも持ってないので、
スマホから見るとどうなってるのか果てしなく不思議ですw
プロフィール

ろく

Author:ろく
ラグナロクオンラインBreidablikサーバーに、2014年8月4年の時を経て復帰した、いち貧乏プレイヤーです。
生温い目で見守って下さると、ありがたく存じます。
初心者向けに情報発信できたらな、などと思っていないこともないです。

当ブログは、リンクフリーです。
基本ぼっちでコミュ障なので、リンクとか超絶照れますが、気が狂うほど喜びます。
よかったらお声掛けくださると、なお嬉しいです。

カテゴリ
月別アーカイブ
検索フォーム
ブロとも申請フォーム

この人とブロともになる

RSSリンクの表示
QRコード
QR
Copyright
このページ内における「ラグナロクオンライン」から転載された全てのコンテンツの著作権につきましては、運営元であるガンホー・オンライン・エンターテイメント株式会社と開発元である株式会社Gravity並びに原作者であるリー・ミョンジン氏に帰属します。 © Gravity Co., Ltd. & LeeMyoungJin(studio DTDS) All rights reserved. © GungHo Online Entertainment, Inc. All Rights Reserved. なお、当ページに掲載しているコンテンツの再利用(再転載・配布など)は、禁止しています。
応援してます☆
最新記事
最新コメント
ROブログのリンク
ROお役立ちリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。