FC2ブログ

頭痛餅様から支援バナーを頂きました。変わらぬ御支援にこの場を借りて厚く御礼申し上げます。 このブログはリンクフリーです

ブログリニューアルまでの経緯







9532 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 19:39:12 ID:hosirin334 [204/223]
【急募】ブログのレイアウトが不評なので変更したい【スパーハカー】




>>1、知識も無いのにブログをリニューアルしたいとかダダをこねる



9533 名前:ハズレ[sage] 投稿日:2016/05/17(火) 19:40:18 ID:S/SmTheF0 [5/10]
同志、どう変えたいのかいわないと・・・

9534 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 19:42:35 ID:xK5T6wJ80 [1/3]
レイアウトが不評?
どんな風に不評なんだろ?

9535 名前:携帯@のじまーる ★[sage] 投稿日:2016/05/17(火) 19:42:57 ID:???0
実装はできてもレイアウト考えるセンスは死んでるし・・・



困惑する住人達、当然である。

だが、神が舞い降りた



9538 自分:名無しの読者さん[sage] 投稿日:2016/05/17(火) 19:48:08 ID:uIi5q5qG0 [1/34]
とりあえず左右逆転なら
#main_contents に float:rightを入れる。
#sidemenu の float:rightを削除。
あと、ナンカ幅がおかしいことになってイルっぽいですね。

9540 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 19:49:55 ID:uIi5q5qG0 [2/34]
あと、#sidemenu の width: 320px;
これを削除したら多分お望みの挙動になるかと。

9541 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 19:54:03 ID:uIi5q5qG0 [3/34]
同志、以上の全てが、51146.css 内部での話ですー

9542 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 19:59:42 ID:uIi5q5qG0 [4/34]
あと、 #sidemenuの padding-top: 35px; を削除すれば良いかもデス。
ttp://www.dotup.org/uploda/www.dotup.org865684.png.html
以上の処理をしたら、こんな感じになるかと思われます。



懇切丁寧なCSS変更の手順を教授してくれる神に対し、



9545 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 20:04:37 ID:hosirin334 [206/223]
すいません、CSSのどの部分いじれば良いか>>1≒チンパンな>>1に解説お願いします。

>>1とかいうチンパン、エテ公以下な脳味噌を露呈した模様


だが、神は哀れなチンパン>>1を見捨てなかった


9546 返信:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:11:11 ID:uIi5q5qG0 [5/34]
>>9545
まず、 51146.css をメモ帳で開いてください。

#main_contents {
margin: -36px 340px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
padding-top: 35px;
}

#sidemenu {
float: right;
position:relative;
overflow: hidden;
width: 320px; /* サイドメニューの幅 */
padding-top: 35px;
}
と書かれている業を探してください。

9547 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:12:01 ID:uIi5q5qG0 [6/34]
これを
#main_contents {
margin: -36px 340px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
padding-top: 35px;
float: right;
}

#sidemenu {
position:relative;
overflow: hidden;
width: 280px; /* サイドメニューの幅 */
}

以上のように変更してください。
これで多分上手く行くはずです。

9548 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:12:49 ID:Eq3TqgWN0
(パネェ)

9549 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:15:03 ID:xK5T6wJ80 [2/3]
(マジパネェ)

9552 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:18:36 ID:GlwPvorp0
呼べば出てくるスーパーハカー

チンパンでも理解できる更に丁寧な解説に住人も賞賛


9556 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 20:33:20 ID:hosirin334 [207/223]
変更したけど変わらんです





     // 1  . {. . .ヽ. . ヽ. . ',. .ヽヽ
    / .:/ ハ: :!: :.:ト、:.:. :\:...l:.. :}: : |_⊥ 、
    j . {: .:{ :l、:l、: :.ト-ヽ、_:..`ヽ、j__イ_つノ
    l 1:ハ.::{ゝl=くヽ:.ヽ トィjr}Tァ┬ァ:.:´|
    |ハ :ヽlァ{トィrj \i ー_'っ /:.イ-、:。:|
     ヽ。ハ^rぅ' 丶 `   ノ', く } }:.ol゚ o
    。  `ハ 。  {ァ´ヽ     ,ー o':.へl お客様の中にチンパンにも劣る>>1に火の扱いから教えられる方は
      ゚ ´ノi\  ー'   ィ:;:.ィ/|/゚ 。 いらっしゃいませんか??
   。 o  。 ゚ハヘ;:>ー--<_rv〈、_
         / ̄ヽ \/ll  }l}`'^'ト、
          /   ::Y77l  j l    !_`7
        l, ---::、〉 jl  l   ハゝ-i
        ヽ    Vi    }  ,' ノ, ー_ヽ
          }  , -‐ァl  ノ  / レ´,.- j
        j イ   !l /   /  ハ -,.く!














9558 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:39:33 ID:uIi5q5qG0 [9/34]
float: right;
これが無効にされているのが問題みたいですね。

ちょっと調べます。


それでも神は>>1を見捨てなかった





9562 返信:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:43:00 ID:uIi5q5qG0 [10/34]
>>9556
ttp://aqsky.blog.fc2.com/blog-entry-2.html
同志、これが原因です。

float: right;の前にある全角空白を半角に変更したらききます。

9566 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:49:16 ID:uIi5q5qG0 [12/34]
>>9561
あと、float: left; だけだと、sidemenuの幅が合っていないのでwidth: 280pxの指定は別途必要でした。



9568 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:50:47 ID:uIi5q5qG0 [13/34]
お、上手く動いたみたいですね。何よりです。

9569 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 20:50:50 ID:hosirin334 [208/223]
#main_contents {
margin: -36px 340px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
padding-top: 35px;
float: right;
}

#sidemenu {
position:relative;
overflow: hidden;
width: 280px; /* サイドメニューの幅 */
}


これで入れましたがやっぱりおかしくなります



9570 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:53:10 ID:uIi5q5qG0 [14/34]
トップ画面だと、サイドバーが左にありますね。
たとえば、「この板で許されるか否かのぎりぎりのラインで書いてみたお話」とかだと、上手く左に表示されていますね。

んー、原因なんだろう。


9572 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 20:56:37 ID:uIi5q5qG0 [15/34]
今、被狐をインストールしてみたところ
ttp://www.dotup.org/uploda/www.dotup.org865788.png.html
こういう感じで表示されました。

確認ですが、同志のブラウザは狐ですよね?
あと、キャッシュは一回削除された上で、閲覧されましたよね?


9574 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:04:40 ID:hosirin334 [210/223]
CCクリーナ掛けて確認。
一部の作品は正しく反映されるのにトップと多くの作品ではカラムが下にきてる状態

9575 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:07:48 ID:uIi5q5qG0 [16/34]
#main_contents {
margin: -36px 340px 0 0;
padding-top: 35px;
float: right;
}

これの340が悪さし輝っぽいですね。例えば600pxとかにすると、個別生地では旨く表示されますね。


9579 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:15:38 ID:hosirin334 [211/223]
600にするとAAが崩れる作品が……


試行錯誤が続くも、やはりうまくいかない




9580 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:18:47 ID:uIi5q5qG0 [18/34]
やる夫の戦国立志伝 EVOLVE 最終話 とかだと

margin: -36px 600px 0 0; */
これを
/* margin: -36px 600px 0 0; */
こうして、

#sidemenu {
position: relative;
overflow: hidden;
/* width: 280px; */
}
にすると、少なくともクロームでは上手く動きますね。



9555 名前:ハズレ[sage] 投稿日:2016/05/17(火) 20:30:15 ID:S/SmTheF0 [8/12]
えっと同志
テンプレートの追加に
simple_white_resp ってのがあると思うのでそれ入れた方が早いんじゃないでしょうか・・・


9582 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:26:36 ID:hosirin334 [212/223]
>>9555を入れてみたけどAAが崩れる



ここに至りチンパン>>1、現状のテンプレを破棄、新テンプレの導入に踏み切る


9583 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:28:52 ID:hosirin334 [213/223]
div.AA {
font-weight:normal;
font-family: "MS PGothic",sans-serif;
font-size:12pt; /* 変更OK */
line-height:100%;
}

入れたけどAAは直った?

9584 名前:のじま[sage] 投稿日:2016/05/17(火) 21:29:54 ID:cW6rDC4G0 [2/5]
AAは直ってますね

9585 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:31:35 ID:hosirin334 [214/223]
カラムのサイズを元のサイズに変更したい、ぼすけて

9587 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:39:30 ID:ljIkg7to0 [3/7]
ChromeとIEで見たところAAはズレてない模様

9588 返信:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:39:43 ID:uIi5q5qG0 [19/34]
>>9585
#l-container,
.header_inner,
.footer_inner {
width: 960px;
margin: 0 auto;
text-align: left;
}

まず、これのwidthを適当に1200px位にします。

9589 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:41:12 ID:uIi5q5qG0 [20/34]
#l-main {
float: right;
width: 690px;
}

これのwidthを690→900px位にしてみます。
どうでしょう?

9590 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:46:31 ID:uIi5q5qG0 [21/34]
んー左カラムと右の間概要に空いていますね。

9591 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:47:10 ID:hosirin334 [215/223]
左側がすごい空間が開いてAAが崩れます。
テンプレ変更


ここで再度テンプレを変更




9592 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:52:17 ID:uIi5q5qG0 [22/34]
#l-container の width: 1800px;
#l-sidecontents の width: 220px;
なので、
#l-main の width:1400px;
位にしたら多分上手く行くっぽいです。


9594 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 21:52:58 ID:hosirin334 [216/223]
これでいかがでしょ?

9595 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:54:56 ID:uIi5q5qG0 [23/34]
/* 記事表示部分を囲うブロック要素の属性 */
.body {
font-size: 12px;
border-bottom: 1px dashed #999;
margin: 0 0 5.7em 0;
padding: 0 1.7em 0.7em 1.7em;
line-height: 1.4;
word-break: break-all;
}

これの
margin: 0 0 5.7em 0;
ここをいじる必要がありますね。

9596 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 21:55:51 ID:uIi5q5qG0 [24/34]
margin: 0 0 5.7em 5em;
位にするとちょうど良い鴨です。

9599 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:00:07 ID:uIi5q5qG0 [25/34]
/* 記事の見出し(タイトル) */
#left h3 {
font-size:14px;
border-left: 7px solid #999;
border-bottom: 1px dashed #999;
padding: 0.1em 0.7em;
margin: 0 0 1.7em 0;
}

ここのmarginを
margin: 0 0 1.7em 5em;
これくらいにするとちょうど逢う感じですかね?

9600 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:01:34 ID:hosirin334 [217/223]
これでどう?
IEでも良い感じ

9601 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:03:25 ID:uIi5q5qG0 [26/34]
IE,Firefox、chrome、EDGEともに、h3さえ治せば良い感じです。
(なお、Edgeからは標準仕様ブラウザになっているので、Edgeで見られれば基本OKです。



試行錯誤の末、光が見え始める。なお、ここまで>>1とかいうチンパンは殆ど役にたっていない模様




9604 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:06:45 ID:hosirin334 [218/223]
バナー絵の入れ方どうやるんでしたっけ


この体たらくである




9605 返信:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:10:14 ID:uIi5q5qG0 [27/34]
>>9604
ttp://help.fc2.com/blog/manual/group112/1406?nc=1
同志、これです。


9607 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:14:46 ID:uIi5q5qG0 [28/34]
あと
.body {
font-size: 12px;
border-bottom: 1px dashed #999;
margin: 0 0 5.7em 5em;
padding: 0 1.7em 0.7em 1.7em;
line-height: 1.4;
word-break: break-all;
}

のfont-sizeを 12pt位にして戴けると(老眼に)優しいです。

9608 名前:Scotchな読者さん[sage] 投稿日:2016/05/17(火) 22:19:21 ID:gGmzGLot0 [2/2]
おお、かなりスッキリ見やすくなってる

9609 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:37:10 ID:hosirin334 [219/223]
バナー絵は


<%blog_name>













ではめ込み

9610 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:38:43 ID:hosirin334 [220/223]
>>9607
標準が12pxですがそのままでおk?

9611 返信:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:40:13 ID:uIi5q5qG0 [29/34]
>>9610
12「px」を12「pt」に変更して戴けると幸いです。

あと、サイドバーが重なっているので未だ問題が出ている用です。


9612 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:42:39 ID:hosirin334 [221/223]
12ptに変更




    / , /  ! : :|: : : |: : : : : : : :ヽ: \: : : : : : : : ヽ
_ /, ィ:/:/: . . !   |  ヽ、       l  ヽ     . .l
 ̄ /:/: :l : : :.:.{:. : : !:. : : :',ヽ:...... . . . !... . . !. . :ヽ: : : : !
  l : {: : |: : .:.:ハ:.. : :l、.. : :丶ヽ:.:. : : :|:.:.  j:.:_: }: 、: :l
  {: :.l : :',: :.:.:{ ',:. : {\:.:.. : \l:.:. : :ハ:.:.〃r―.、`ヽ: !
  ヽハ: :.ヽ:.:.ト _ヽ:.:|jv `7、-  _ー く_j:._ヽ_ー_ノ- ':l l
     \:.:ヽ、l _ \、   ` ‐!::/二T:7T:.´:/:. :/ l お客様の中に>>1に基礎的な英語を教えられる先生は
      /..::┬V⌒ヽi >   _ノ'ニ、 ノ' j:./:. :/:.:.l
    ノフィ:.イ///丶//´⌒>ァ_/イ:.:. /:.:.:.l  いらっしゃいませんか??
      /j/ハ   {〉`ニニ´ヘ ´ / ̄フ ィ´ノ:.:トト、{
      !  __>、 !       }    _´_ イィ:.ハヽ \
     l j  アーくヽ     ノ _ .f_,.┴、フ ´  }
     〉Y / / /ーiー--'ァ j, ヘ´ ヽ  ヽ   /
    く {、   l /  iハ 「 |{ ヽ. ヽ. '  / , イ
     \ ヽ、    〉-l | Lト `   /  ̄  |
      |`ヽ/` ー イ  ヽ ! ヽ-‐  ヘ  ,.イ

このエテ公の皮を剥げ(辛らつ





9613 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:44:12 ID:uIi5q5qG0 [30/34]
/* 記事表示部分 */
#left {
margin-top: 3.7em/* 横カレンダーを消した場合 3.7em ぐらい*/;
margin-left: 0;
margin-right:6em;
padding: 0 0 0 20em;
word-break: break-all;
}

これを

/* 記事表示部分 */
#left {
margin-top: 3.7em/* 横カレンダーを消した場合 3.7em ぐらい*/;
margin-left: 5em;
margin-right:6em;
padding: 0 0 0 20em;
word-break: break-all;
}

9614 名前:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:46:21 ID:uIi5q5qG0 [31/34]
/* メニュー表示部分 */
/* 横幅を増やした場合は left 属性の右パディングも増やしてください。 */
#right {
width: 18em;
position: absolute;
padding: 0 0 2.7em 0;
top: 9.7em/* 横カレンダーを消した場合 9.7em ぐらい*/;
left: 4%;
color: #232323;
word-break: break-all;
}

これを

/* メニュー表示部分 */
/* 横幅を増やした場合は left 属性の右パディングも増やしてください。 */
#right {
width: 18em;
position: absolute;
margin-top: 7em;
padding: 0 0 2.7em 0;
top: 9.7em/* 横カレンダーを消した場合 9.7em ぐらい*/;
left: 4%;
color: #232323;
word-break: break-all;
}

こうすると、多分上手く行くはずです。

そしてついに

9617 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:55:23 ID:hosirin334 [222/223]
変更完了
軽い、軽いぞ!IEでもスクロール余裕や!


自分の手柄のようにはしゃぐチンパンにも劣る管理人がいるらしい






9622 自分:◇PxpsTgDRu. ★[] 投稿日:2016/05/17(火) 22:59:22 ID:hosirin334 [223/223]
ID:uIi5q5qG0神に、敬礼!
快適なブログをありがとう!
お礼に板さんとハズレさんとメシテロさんの※を、どうぞ。


9624 返信:名無しの読者さん[sage] 投稿日:2016/05/17(火) 22:59:39 ID:uIi5q5qG0 [34/34]
>>9617
上手く行けましたか。おめでとうございます。





長時間に渡り、>>1に英知を授け続けたID:uIi5q5qG0神の奮闘により、
このブログはリニューアルした事実を忘れず、感謝しましょう。





ID:uIi5q5qG0様、本当にありがとうございました!
  1. 2016/05/17(火) 23:35:05|
  2. 未分類
  3. | トラックバック:0
  4. | コメント:5
<<やる夫の野望・創造 6 | ホーム | ケッコンカッコカリ>>

コメント

ここにID:uIi5q5qG0氏の銅像を建てよう
  1. 2016/05/18(水) 00:14:46 |
  2. URL |
  3. #-
  4. [ 編集 ]

ID:uIi5q5qG0氏はフリーパスでいいと思う
  1. 2016/05/18(水) 08:05:29 |
  2. URL |
  3. #-
  4. [ 編集 ]

ID:uIi5q5qG0氏に敬礼!
  1. 2016/05/18(水) 14:22:12 |
  2. URL |
  3. #-
  4. [ 編集 ]

ID:uIi5q5qG0氏のクールな仕事っぷりに憧れます! 同志もめげずによく頑張りましたw
  1. 2016/05/19(木) 19:52:34 |
  2. URL |
  3. #-
  4. [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  1. 2016/06/04(土) 08:47:38 |
  2. |
  3. #
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://hosirin351.blog.fc2.com/tb.php/552-a2990c59
この記事にトラックバックする(FC2ブログユーザー)