ALORC-Bottle-Craft-512-Logbook(Ⅱ)

AよりRへ。記録を継続する。(二冊目)

《機械仕掛けのドラゴン/Clockwork Dragon》(CSS調整演習)

別途:はてなダイアリーCSS調整演習

 かねてより懸案であったアスキーアート貼り付けに適した環境へのデザイン調整。公開テーマをあれこれ探してみたものの、サイドバー等の兼ね合いがどうにも一長一短で……暫定的結論として「やる夫まとめ」サイトの幾つかがしているように「ページ自体の横幅を広く取る」手法を採択することに。

div.hatena-body{←サイドバー以外の本文の幅。下との差が本文とサイドバーの余白
width:1100px;
}
div.main {←本文記事枠の幅。拡張してAAの収容力増加
width:1100px;
}
div.sidebar {←サイドバー枠の幅
width:250px;
}

div.refererlist li {←以前貼り付けたリンク元による個別記事横膨れの防止
word-wrap: break-word;
overflow: hidden;
}

……実際にやってみると、参考記事の内容と何か違うような気がしたが、さしあたってはこんな所で。


─────────────────────────────────────────
△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△
─────────────────────────────────────────
       /      |        |           |   i          ‘,
     ′       :|       ハ   i      |   |           ‘,
          |     ∧     /  }   ト、-‐… |‐- |     : .     ト、
     |: :  |    厶-ー  /   ハ   | \   |\ | `  : : .    !⌒\
     | : : ∧ /′  ゚。  ′ /   \{    \{   }ハ   : : :}l :  |
: .    |: : {/  |    \{      \ァ竓竿ミメ、 ;  : : 八:  |{
: :    |: : :|  Ⅵ ,斗=ミ             んィ ハ Y |  .: :∧  八
: : .、 八.:.:.|   xfんィハ             { V⌒'リ } | . :/  }/      色々と、教えてもらう必要がありますね
: : : \   ヽ{ 〃 {  V⌒             乂:....:ン  ,   , }  \
: : : :  \ ゚。{{  V:........:リ               厶イノ     ヽ
: : : : .   \{゙  ー-‐ '             iハハ/   :        ゚。
: : : :     ト、   ハVハ/i       '            : .    |
: :l|:     |,ハ                ,       人: .     ト、
.:八      |ー-ヘ           ー-           / : : : .   } \  }
′ ゚。    |\ 个: .                    . : :/ } : : : /  /    }ノ
    \  |  Ⅵ\ >             . イ: : / ノイ : /}/
     \{   リ  }ハ {\≧=‐-  ‐</^ V   }/
      \   /  } ノ   ー-=ミ__ ィ     :ト、
                /        | | |        ー-  .,,__
 __,.  -‐…     ´        | | |
─────────────────────────────────────────
△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△▽△
───────────────────────────────────────── 
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : , '´                    ; : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :, '´                     ,' : : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :, '´                γ´ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄`ヽ :
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :; '´....   ,r:.:.:.:.:.:.:.:.:.、..        |  いってらっしゃい!   . | :
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :,'. ィi〔:.:.:.:────:.:.:.`ヽ.     ゝ___________,ノ .:
: : : : : : : : : : : : : : : : : : : : : : :.゙rj´ト、  f>:.:.:// ̄ ̄ ̄ ̄`ヽ∨:.:.',    :´. : : : : : : : : : : : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : : : :.゙// /ーー≪:.:/':.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.}ノ:.:.:.:.:,   ,' : : : : : : : : : : : : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : :.゙// /`ヽ /:.:/:.:.:.:/|:i:.:.ト:.:.:.:.:.:.:.:.:.:.:.:‘,f三三ヽ : : : : : : : : : : : : : : : : : : : : : : :
:.:.:.:.:.;´' : : : : ,:::': : : : : : / / ィフ 》':.:.:.:.:{:.:.:./冖ト:.:! Ⅵ::ト;.:.:.:.:.:.:: ヘ| ヽ∨丿: : : : : : : : : : : : : : : : : : : : : : :
.:.:,ノ"/: : : :,:::' : : : : : :゙/  У ノ /:.:.:.:.:.八:./{   ヽ!. ',:.:|'丁:`:.:.:.:.:.}  ∨ミ===≦二フ.゙: : : : : : : : : : : : : : :
'"  / : : : :' : : : : : : : :j.   -rイ/:.:.:イ彡:.:.:代===ミ.   Ⅵ__}ノ:.:.:.:.广匕:.:.`ヾ: : : : : : : : : : : : : : : : : : : : : :
 i |: : : : : : : : : : ,´ :/.   //イ/ /:.:/:.:/:.:.:.ゝ       ' ̄`リ:.:.:.:.j:.:.:.Y:.:.:.:}ヽ`ヽ.: : : : : : : : : : : : : : : : : : :
 l |: : : : : : : :,,、': : /.   / ̄{{´ /:.:/:.:/:.:.:.八   _′   ム:::.:.ノ:.:.:.|i:.\\} リ...: : : : : : : : : : : : : : : : : :
 l |: : : : :,、ィ,:'/,:'::/.   /  乂 {:.:.{:.:.{:.:.:.:.:.:.:ヽ  乂:.:.:.:フ  /:.:.:.:':.:.:.:.jリ:.:.:.:\》 ' : : : : ,,:,:,;: : ,:::':.::.:.,、ィ,:'/,:'
 l |,:':.':.:.:.|l ; /:゙/.   ,'.      乂::.:.:ヽ:.:.:.:.:.:.:.:>、__   r<:.:イ:.:ノi:.:丿ノ:.:リУ.   :,、ィ'r'゙:::.::.::.::.::.::.:|l ; /:.:
 l |:.:.:.:.:.:.|l  | /    {        ,ヘrヽ:.ヽ:.:.:.:.:}    |厶イУ ̄/ヘ         | !|.::.::.::.::.::.::.::::|l  |.:.:
 l |.:.:.:.:.:.:| l. /.     |_,ィi〔⌒ベ~  |::i|: : : : :.ノ     7: : : : :/i/   }.      | !|:.::.::.::.::.:::.::.::| l |.:.:
 l |:.:.:.:.:.:.| l/.    |: :ヾ: :ヽ   \  |::i|.: : : :.{ ̄`  '¨/.:. :. .:./i/.    |.      | !|:.::.::.::.::.::.::.:::| l |.:.:
 l l ""''''""''{.     ト、: : }}: : }.     Ⅵ.: : :. :.',二二'7.: : : :./i/    |'' ' '' '"'' ' ''''"""''''""''"""'''"""''
 | ヽ    八     ノ. |: : ii.: :.|.   \Ⅵ.: : : :.}.   /.: : : :./i/< ̄ ̄ ̄`ヽ
 |ヾ  \ ,.   ヽ___j: : ||.:.:.|     YⅥ.: : :.{.   /.: : : :./i/        /  ''       ""'''
                  V_jj:.:イ==───{`〕iト、 jY/: :ィi〔彡´──===</
                            八  \㍉彡イ  /:.:.:.:.:.:.:.:>寸/
                            》  \Y:イ.  {:.:.:.:.:.:.:.:.::.:.:.:.:]
                          〉  /介ヽ寸7 ̄`ヽ_:_:_:_/
                              > 〈 / } } /   /:.:.:У
                            ノ: :}: У==j ノ/   ∧
                    `》==へ,/: : :j: { {==// {   /: : >==f: : :厂
                     《: : : : : \: : : ::レ: : | |: :,   ,': : : : /: : : ノ 
                                      __/ニニニニ _´ニニニ`_ 、          ヽ
                                     Y´ニニニiニニニニ/ニニニニニニ\           }
                                       ノニニニ人ニニ,/ニニニニニニニニ丶       ノ
                              _ -‐.... ̄<二ヽ_/ニニ__/ニニニニニニニ  -‐……`‐--‐ ´       ヽ
                             ´   __ :::::::::< ̄ ヾ´ニニニニニニニ _´ニニニニニニ`___、.          i!
                        /   //////>、:::::::`¨ 人ニニニニニニ,/ニニニニニニニニニ\       ノ}
                          〈 /ー_'//////////,ヽ:::::::::::_ヽ__ニニ/ニニニニニニニニニニニ,`ー―‐=ニノ
                        ヽ '´ ̄ ̄ ` ー'二二¨¨´::(__ -‐_´一_´ニニニニ_   -―…………―-  <
                              }     ...::::_\___\::::::人ニニニニニニ  ´                  ` 、
                        _人_   ....:::::::::::\\ノ-=二二=-... _ニニニ ''
                     Y⌒   ´-‐_ニヽ ::::::::::::::_i´    ::::::::::::::::::::`ヽ/
                    八 、 __ ,ィ≧,、ニニゝ、__/Γi!     .::::::::::::::::::::::/
                 __,ゝ二ニニi  i i ̄ ̄::}i  ノ ,ノ     :::::::::::::: ´ ̄ ̄ ̄ ̄ フ
                  Y´ニニニニ,|  | |:::::::::::八 r イ  __ _::::::::::/ -―――‐<
                _  -‐┴――/ ̄i|  | |::::::: '  /   ´  人`ニi´       __ヽ
              ´    , ´ ヽr‐ 、 r‐|  | L∠ / ,/    ´ ̄ ヽ_人__ -‐ ::::::....
         /  __   \  八  \\ ヾ-ィ´ ∠ __,/       八/{::::::::::::::::::::::::::::..............
        /.     \ ̄ ̄ i「 ` 、 ̄   `¨´   .:/∠ -‐   ̄  {::::人::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.............   _ -‐
.     '       ヽ _八__ ヽ__   '  .:/          人:::::: \:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::_ ...-‐...´
.     /        /        〉 /  .:/               i| \:::::::丶:::::::::::::::::::::::::::::::::::::::::::::_ ...-‐...´::::::::::::::_ ...-‐<
    /         /           / /  .:/                |:::::: \::::::::`... ____ ...-‐...´:::::::::::::::::::_ ...<::::::::::::::::::
 r‐イ         /           / '  .,                   i::::::::::::::丶::::::::::::::::::::::::::::::::::::::::::::::::_ ..-‐....::::::::::::::`....、:::::::
. {  {           /         {| i  ′               ノ::::::::::::::::::::::::>..、____ ..-‐/::::::::::::::::::::::::_::::::::::`ー
. ∨∧............:::::::::::〈             || ..i ..::{ヽ                 /.::::::::::::::::::::: '´:::::::::::ハ::::::人ヽ::::::〉:::::::::::_ ...-‐.....:::::::ヾ...、::::::
. ∨∧::::::::::::::::::::::::ヽ           .|l ::i :::::∨、 ______ / ::::::::::::::::::::::::/:::::::::::::::::::i::::::::::::ヾ:::/:::::::/::::::::::::::::::::::::::::\\
.   \::\:::::::::::::::::::::::\  ..........:::::::ノl ::i :::::::∨::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::/ ::::::::::::::::::人::::::::::::::}'::::::Y::::::::::::::::::::::::::::::::::::::::\


―――うむ。自前で見る分には、だいたい問題無し。何か異常が目に付かば逐次修正の由。