はてなダイアリーで3段組みをする方法
意外と簡単に3段組みできるので紹介。
はてなはmainとsidebarの二つが主体。
sidebarを増やしてfloat:left;を追加すれば簡単に3段組みになります。
管理者コンテンツの「デザイン」→「詳細」にて左コンテンツの追加
cssを追加
.main{ float:left; width:400px; } .sidebar{ float:left; width:200px; }
すべてのCSSはこちら
*{ padding:0px; margin:0px; font-size:1.0em; font-weight:normal; text-decoration:none; line-height: 1.2; list-style:none; } body{ padding:0px; margin:0px; background-color:white; text-align:center; } a{ color:#ff517c; text-decoration:underline; } input{ } img{ border:0px solid red; } h1{ background-image:url(http://moeten.info/image/hatena/header_bg.jpg); background-repeat:no-repeat; width:988px; height:181px; padding:0px; margin:0 auto; font-size:1.0em; font-weight:normal; text-decoration:none; text-align:left; } div{ text-align:left; border:0px solid red; } .adminmenu{ background-color:#ffb5ef; padding:3px; text-align:right; } .adminmenu a{ color:white; } #headermycontents{ background-image:url(http://moeten.info/image/hatena/contents_bg.jpg); background-repeat:no-repeat; width:950px; height:42px; padding:6px 0px 20px 0px; margin:0px; background-color:white; } #headermycontents li{ float:left; text-align:center; width:195px; padding:4px; } #headermycontents li a{ font-size:20px; font-weight:bold; text-decoration:none; color:#620041; } #headermycontents li a:hover{ text-decoration:underline; } .hatena-body{ width:950px; padding:0px; margin:0px; } .sidebar{ padding:14px 0px 14px 0px; float:left; width:210px; margin-left:3px; text-align:center; } .sidebar div{ font-size:0.9em; } .sidebar .hatena-moduletitle{ background-image:url(http://moeten.info/image/hatena/hatena-moduletitle_bg.gif); background-color:#fbe9ff; background-repeat:no-repeat; background-position:0px 0px; width:200px; height:23px; padding-top:4px; font-weight:bold; font-size:1.2em; color:#77213f; margin:0px; text-align:center; } .sidebar .hatena-modulebody{ border:1px solid #e4afe2; background-color:white; width:200px; padding:4px; margin:0px 0px 14px 0px; } .sidebar .hatena-module{ background-color:#fbe9ff; margin:0px; width:200px; } .sidebar li{ border-bottom:1px dotted #e4afe2; padding:4px; } .sidebar a{ text-decoration:none; } .sidebar a:hover{ text-decoration:underline; } .sidebar table{ width:190px; border-collapse:collapse; border-spacing:1px; } .sidebar .calendar-day{ width:15px; padding:1px; margin:0px; border:1px dotted #ff81e9; } .calendar-prev-month{ width:15px; } .calendar-current-month{ width:15px; } .calendar-next-month{ width:15px; } .sidebar .calendar-sunday{ width:15px; padding:0px; margin:0px; } .sidebar .calendar-weekday{ width:15px; padding:0px; margin:0px; } .sidebar .calendar-weekday{ width:15px; padding:0px; margin:0px; } .sidebar .calendar-weekday{ width:15px; padding:0px; margin:0px; } .sidebar .calendar-weekday{ width:15px; padding:0px; margin:0px; } .sidebar .calendar-weekday{ width:15px; padding:0px; margin:0px; } .sidebar .calendar-saturday{ width:15px; padding:0px; margin:0px; } .hatena-module-calendar2{ width:190px; } .hatena-body{ background-image:url(http://moeten.info/image/hatena/main_bg.jpg); margin:0 auto; width:958px; text-align:center; background-repeat:repeat-y; background-position:center center; } .keyword{ color:#4b2b2b; text-decoration:none; border-bottom:1px dotted #ff6691; } .main{ padding:0px 5px 0px 8px; margin:0px; width:510px; float:left; } h2{ background-image:url(http://moeten.info/image/hatena/center_title_bg.gif); background-repeat:no-repeat; padding:4px 14px; margin:14px 0px 2px 0px; width:510px; height:32px; font-weight:bold; font-size:1.1em; } .date{ font-weight:bold; font-size:1.1em; } .main day{ font-size:0.9em; } .title{ border-width:0px 0px 1px 7px; border-style:solid; border-color:#f735b0; margin:10px 0px; padding:4px; } .title a{ text-decoration:none; font-size:1.1em; font-weight:bold; } .comment{ padding-left:14px; border:1pd solid #ffc4f5; background-color:#fff7e9; margin:14px; padding:4px; } .refererlist{ padding-left:14px; margin:14px; border:1pd solid #ffc4f5; background-color:#fff7e9; padding:4px; } .main .days{ padding:0px; margin:0px; width:510px; } .main .day{ padding:0px; margin:0px; width:510px; } .main .body{ padding:0px; margin:0px; width:510px; } .main .section{ font-size:0.9em; padding:9px; color:#413737; } h4{ background-image:url(http://moeten.info/image/hatena/h4_bg.gif); background-repeat:no-repeat; text-align:center; font-weight:bold; color:white; padding-top:2px; margin:14px 0px 10px 2px; width:199px; height:20px; clear:all; clear:both; } .mybookdiv{ font-size:0.9em; } .mybook{ width:190px; padding:3px; margin-left:8px; background-color:white; border-bottom:1px dotted #ff81e9; } .mybook img{ width:50px; height:50px; overflow:hidden; } #myfooter{ background-image:url(http://moeten.info/image/hatena/footer_bg.jpg); background-repeat:no-repeat; background-color:white; text-align:center; padding:10px 0px 0px 0px; margin:0px; width:949px; height:40px; } #myfooter a{ text-decoration:none; }