《機械仕掛けのドラゴン/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::::::::::::::::::::::::::::::::::::::::\
―――うむ。自前で見る分には、だいたい問題無し。何か異常が目に付かば逐次修正の由。