無料ブログをかんたん作成
無料ブログ作成ならJUGEM(ジュゲム)
ホーム
ブログ作成
ブログを書く
ブログを見る
無料ブログ作成
JUGEM PLUS お申し込み
サービス紹介
JUGEM(無料ブログ)
JUGEM PLUS(有料プラン)
ブログ機能一覧表
デザイン
公式ブログデザイン
PC版
スマートフォン版
ユーザー作成
ユーザー作成
JUGEM を楽しむ
投稿する・みんなとつながる
ブログテーマ
ブログのお題
その他のコンテンツ
芸能人・有名人のブログ
スペシャルインタビュー
JUGEM を楽しむ 一覧
サポート
管理者ページ・マニュアル
FAQ
お知らせ
新着情報
メンテナンス情報
障害情報
おすすめブログ紹介
このページでは JavaScript を使用しています。JavaScript を有効にしてください。
ホーム
>
ブログデザイン一覧
>
ユーザー作成テンプレート「utf」
>
テンプレートHTML・CSSについて
公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について
弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。
テンプレート名 :
カスタマイズ用
テンプレートイメージ表示ページへ戻る
HTML・CSSをコピーして使う
HTML
<?xml version="1.0" encoding="{site_encoding}"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>{site_title}</title> <link rel="stylesheet" href="{site_css}" type="text/css" /> <link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" /> <link rel="alternate" type="application/atom+xml" href="{site_atom}" /> <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" /> <script type="text/javascript" src="./template/js/cookie.js"></script> <script type="text/javascript" language="JavaScript"><!-- function GetMenu(tName) { var i; var TagName = document.getElementsByTagName("div"); var GetMenu = document.getElementById(tName).style; if (document.getElementById(tName) == ''){ return; } if (TagName == ''){ return; } for(i=0; i<TagName.length; i++){ if (TagName[i].className == 'getlist' || TagName[i].className == 'getlist_view') { TagName[i].style.display = "none"; } } if (GetMenu.display == 'none') GetMenu.display = "block"; else GetMenu.display = "none"; } // --></script> <script type="text/javascript"> //<![CDATA[ //メニューのスイッチ function menuSwich(id){ var menu = document.getElementById(id); var dsp; if(!menu)return; hideAll(); if(menu.style.display=="none"){ dsp = "block"; }else{ dsp = "none"; } menu.style.display=dsp; } //メニューをすべて消す。 function hideAll(){ var i; var tagname ="div"; var classname = "list"; var tags = document.getElementsByTagName(tagname); if(!tags)return; for(i=0;i<tags.length;i++){ if(tags[i].className==classname){ tags[i].style.display = "none"; } } } //]]> </script> </head> <body onload="javascript:initval();"> <a name="top" id="top"></a> <div id="layout"> <!-- BEGIN title --> <div id="header"> <h1 class="site_title">{blog_name}</h1> <!--<p class="description">{blog_description}</p>--> <!--ブログの説明はデフォルトでは テキスト非表示になっています。 表示させたい場合は、上のタグを囲んでいる コメントアウト部分を削除してください。 またブログタイトルを非表示にさせたい場合は ブログの説明と同じようにコメントアウトで囲んでください。 --> <br class="clear" /> </div> <!-- END title --> <div id="contents"> <div id="side1"> <!-- トップメニューはデフォルトでは フリースペースを表示になっています。 ・プロフィールページなどにリンクさせたい場合は href="プロフィールページのURL"に変更します。 ・リンク項目を画像にしたい場合は {freescape_title★}をimg srcタグにしてください ・カテゴリリストなどを表示したい場合は http://nous.jugem.jp/?eid=13を参考に書き換えてください--> <div class="topmenu"> <h3 class="linktitle"> <a href="javascript:menuSwich('free1');"> {freespace_title1}</a></h3> </div> <div class="topmenu"> <h3 class="linktitle"> <a href="javascript:menuSwich('free2');"> {freespace_title2}</a></h3> </div> <div class="topmenu"> <h3 class="linktitle"> <a href="javascript:menuSwich('free3');"> {freespace_title3}</a></h3> </div> <div class="topmenu"> <h3 class="linktitle"> <a href="javascript:menuSwich('free4');"> {freespace_title4}</a></h3> </div> <div class="topmenu"> <h3 class="linktitle"> <a href="javascript:menuSwich('free5');"> {freespace_title5}</a></h3> </div> <br class="clear" /> <!-- トップメニューのクリックして表示される部分です。 closeを画像にしたい場合はcloseをimg srcタグに 変更してください--> <!-- BEGIN freespace1 --> <div class="list" id='free1'> <div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div> {freespace_contents1} </div> <!-- END freespace1 --> <!-- BEGIN freespace2 --> <div class="list" id='free2'> <div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div> {freespace_contents2}</div> <!-- END freespace2 --> <!-- BEGIN freespace3 --> <div class="list" id='free3'> <div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div> {freespace_contents3}</div> <!-- END freespace3 --> <!-- BEGIN freespace4 --> <div class="list" id='free4'> <div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div> {freespace_contents4}</div> <!-- END freespace4 --> <!-- BEGIN freespace5 --> <div class="list" id='free5'> <div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div> {freespace_contents5}</div> <!-- END freespace5 --> </div> <!-- トップメニュー終わり。以下よりエントリ --> <div id="main"> <div class="pad"> <!-- BEGIN sequel --> <!-- 個別エントリページ上部のナビになります --> <p class="entry_navi"> {prev_entry} + <a href="./">main</a> + {next_entry} </p> <!-- END sequel --> <!-- ここからエントリ --> <!-- BEGIN entry --> <div class="entry"> <!-- エントリのタイトルと日付・作者名です --> <h2 class="entry_title">{entry_title}</h2> <p class="entry_author">{entry_date} | author : {user_name} </p> <!-- エントリ本文です --> <div class="entry_body">{entry_description}</div> <!-- 追記部分です。read more...を img srcタグにすることで画像に変更できます --> <a name="sequel"></a> <div class="entry_more"> <!-- BEGIN entry_sequel_link --> <a href="./?eid={entry_sequel_id}#sequel">read more...</a> <!-- END entry_sequel_link --> <!-- BEGIN entry_sequel_items --> {entry_sequel_text} <!-- END entry_sequel_items --> </div> <!-- エントリ下のカテゴリや時間などです。 こめんとを違う言葉やimg srcタグで画像にすることができます --> <p class="entry_state">| {category_name} | {entry_time} | <a href="{entry_permalink}#comments">こめんと {comment_num_only}</a> | {trackback_num} |</p> </div> {trackback_auto_discovery} <!-- END entry --> <!-- エントリ終わり --> <!-- ここからコメントです --> <!-- BEGIN comment_area --> <a name="comments"></a> <div class="entry"> <!-- 下のCommentをimg srcタグにすることで画像にできます --> <h3 class="comment-title">Comment</h3> <!-- BEGIN comment --> <div class="entry_body">{comment_description}</div> <!-- コメントした人の名前と時間です --> <p class="entry_state">| {comment_name} | {comment_time} |</p> <!-- END comment --> <!-- ここからコメントフォームです。 Submit Commentをimg srcタグにすることで画像にできます --> <h4 class="comment-title">Submit Comment</h4> <div class="entry_body"> <form name="comment_area" id="comment_area" action="./?mode=comment" method="post"> <input type="hidden" name="entry_id" value="{entry_id}" style="width:200px;" class="form_color" /> <label for="name">name:</label><br /> <input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:200px;" class="form_color" /><br /> <label for="email">email:</label><br /> <input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:200px;" class="form_color" /><br /> <label for="url">url:</label><br /> <input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:200px;" class="form_color" /><br /> <label for="description">comments:</label><br /> <textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:300px;" class="form_color"></textarea><br /> <!-- value="Submit"のSubmitを言葉を書き換えれば コメント送信ボタンの中の文字が変わります --> <input tabindex="5" type="submit" value="Submit" onclick="javascript:setval();" class="button" /> <input type="checkbox" name="set_cookie" value="1" id="set_cookie"> <label for="set_cookie">Cookie</label> </form> </div> </div> <!-- END comment_area --> <!-- コメント欄は終了です --> <!-- BEGIN trackback_area --> <a name="trackback"></a> <div class="entry"> <h3 class="trackback-title">Trackback URL</h3> <p class="entry_body">{trackback_url}</p> <h4 class="trackback-title">Trackback</h4> <!-- BEGIN trackback --> <h5 class="entry_title">{trackback_title}</h5> <div class="entry_body">{trackback_excerpt}</div> <p class="entry_state"> | {trackback_blog_name} | {trackback_time} | </p> <!-- END trackback --> </div> <!-- END trackback_area --> <!-- BEGIN profile_area --> <div class="entry"> <!-- プロフィールになります。 全プロフィールに共通なので、 ユーザーを複数作ってた場合、{profile_name}を 画像に差し替えると全部変わっちゃうので気をつけてください。 --> <h2 class="entry_title">{profile_name}</h2> <div class="entry_body">{profile_description}</div> </div> <!-- END profile_area --> <!-- BEGIN page --> <!-- ページ下部の全体のページ数と 次のページへのリンクを出すやつです--> <p class="page">{prev_page_link} + {page_now}/{page_num}PAGES + {next_page_link}</p> <!-- END page --> </div> </div> <!-- メインカラム内終了 --> <!-- 下部のメニューはここから。 項目を減らす場合、<li></li>ごと削除してください。 上のメニューにもって行った場合は 2個にならないように下のBEGINとENDの方も それごと削除してください。 --> <div id="side2"> <div id="bottommenu"> <ul class="menutitle"> <li><a href="javascript:GetMenu('newentrys');">NEW ENTRIES</a></li> <li><a href="javascript:GetMenu('ctgs');">CATEGORIES</a></li> <li><a href="javascript:GetMenu('cmts');">COMMENTS</a></li> <li><a href="javascript:GetMenu('tbks');">TRACKBACKS</a></li> <li><a href="javascript:GetMenu('logs');">ARCHIVES</a></li> <li><a href="javascript:GetMenu('prof');">PROFILE</a></li> <li><a href="javascript:GetMenu('lnks');">LINKS</a></li> <li><a href="javascript:GetMenu('contents_etc');">RECOMMEND</a></li> <li><a href="javascript:GetMenu('sh_box');">SEARCH BOX</a></li> </ul> <!-- BEGIN latest_entry --> <div class="getlist" id="newentrys"> <div class="linktitle">NEW ENTRIES</div> <div class="linktext"> {latest_entry_list} </div> </div> <!-- END latest_entry --> <!-- BEGIN category --> <div class="getlist" id="ctgs"> <div class="linktitle">CATEGORIES</div> <div class="linktext"> {category_list} </div> </div> <!-- END category --> <!-- BEGIN recent_comment --> <div class="getlist" id="cmts"> <div class="linktitle">COMMENTS</div> <div class="linktext"> {recent_comment_list} </div> </div> <!-- END recent_comment --> <!-- BEGIN recent_trackback --> <div class="getlist" id="tbks"> <div class="linktitle">TRACBACKS</div> <div class="linktext"> {recent_trackback_list} </div> </div> <!-- END recent_trackback --> <!-- BEGIN archives --> <div class="getlist" id="logs"> <div class="linktitle">ARCHIVES</div> <div class="linktext"> {archives_list} </div> </div> <!-- END archives --> <!-- BEGIN profile --> <div class="getlist" id="prof"> <div class="linktitle">PROFILE</div> <div class="linktext"> {user_list} </div> </div> <!-- END profile --> <div class="getlist" id="lnks"> <!-- BEGIN link --> <div class="linktitle">LINKS</div> <div class="linktext"> {link_list} </div> <!-- END link --> <!-- powered --> <div class="linktitle">BLOG DATA</div> <div class="linktext"> <ul> <li><a href="./admin/">管理者ページ</a></li> <li><a href="./?mode=rss">RSS1.0</a></li> <li><a href="./?mode=atom">Atom0.3</a></li> </ul> </div> <!-- mobile --> <div class="linktitle">MOBILE</div> <div class="linktext">{site_qrcode}</div> <!-- //mobile --> <!-- /powered/ --> </div> <div class="getlist" id="sh_box"> <div class="linktitle">SEARCH BOX</div> <div class="linktext" align="center"> <!-- search --> <div id="searcharea"> <form method="get" action=""> <input type="text" id="search" name="search" size="20" style="width:130px" style="width:130px;" class="form_color" /><br /> <input type="submit" value="Search" class="button" style="width:135px;" /> </form> </div> <!-- /search/ --> </div> </div> <div class="getlist" id="contents_etc"> <!-- BEGIN amazon --> {amazon_item} <!-- END amazon --> </div> <br class="clear" /> </div> </div> <!--footer --> <div id="footer"> <!-- 下のJUGEMの表示になります。削除不可 --> <div class="copyright" align="center">{copyright}</div> <!-- 広告です 削除不可 --> <!-- BEGIN jugem_ad --> {ad} <!-- END jugem_ad --> </div> <!-- /footer/ --> </div> </div> </body> </html>
CSS
/*------------------------------------------------ このテンプレートの著作権はtkに帰属します。 再配布とこのクレジットの削除はご遠慮ください。 またこのテンプレートを元にしてUTFでの配布テンプレを作ることを禁じます。 カスタマイズ方法については各項目の 前に書かれている設定方法をご参照ください。 http://nous.jugem.jp/ -------------------------------------------------*/ /*------------------------------------------------- スクロールバーの色は以下で変更します。 項目が多いので適当に変えてみてください。 #666が灰色、#ffffffは白です。 また対応はIEのみとなります。 ---------------------------------------------------*/ * { margin: 0; padding: 0; scrollbar-arrow-color: #666; scrollbar-base-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #666; scrollbar-3d-light-color: #FFFFFF; scrollbar-shadow-color: #666; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } /*------------------------------------------------- bodyについて 全体の背景と構造はbody以下で設定します。 ・中央寄せをやめたい →text-align:center;を削除 ・背景画像を使いたい →background-image:url();の()に画像のURLを記入 ・背景画像がない場所の色を背景色を指定したい →background-color:#fff; のカラーコードを変更 ・背景画像の繰り返しを指定 →background-repeat:no-repeat; 繰り返さない場合 background-repeat:repeat-x; 横方向にのみ繰り返す background-repeat:repeat-y; 縦方向にのみ繰り返す background-repeat:repeat; 敷き詰める ・背景画像を固定する →background-attachment:fixed; そのまま。 固定しない場合は削除 ・背景画像の位置を指定する。 →background-position:0 0; 左上固定 background-position:100% 100%; 右下固定 background-position:0 100%; 左下固定 background-position:100% 0; 右上固定 ----------------------------------------------------*/ body { margin: 0px auto; padding: 0px; text-align: center; font-size:12px; background-image:url(); background-color:#fff; background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; } .clear { clear: both; font: 0px/0px sans-serif ; } a img { border:none; } /*------------------------------------------------- layoutについて #layoutでは1カラム部分の設定をします。 ・横幅を変えたい →width:400px; の400の数値を変更してください。 ・中央寄せをやめたい →margin:0 auto;のautoを削除。 右寄せにしたい場合はfloat:right;を代わりにいれるか margin:0 をmargin-left:左からの余白px;としてください。 ・背景を敷きたい →background関連項目をいれてください。 基本はbody部分と一緒ですが、fixedはIEでは効きません。 ・両側に線をいれたい →border-left:1px solid #000; border-right:1px solid #000; を挿入してください。太さや色は調節してください。 ・文章を中央寄せ・右寄せにしたい。 →text-align:left;のleftをcenterやrightに変えてください。 --------------------------------------------------*/ #layout { width:400px; margin: 0 auto; text-align: left; } /*------------------------------------------------- headerについて #headerはブログのタイトル部分の設定になります。 タイトルを画像にする方が多いので デフォルトでは文字のブログタイトルが 出ないようにしてあります。 文字のブログタイトルを出したい方はhtmlを編集してください。 ・タイトル画像を張りたい。 →background-image:url(); の()にURLを記入してください。 またheight:200px; の200をタイトル画像の高さより 大きくしてください。 ---------------------------------------------------*/ #header { background-image:url(); background-repeat:no-repeat; background-position:0 0; height:200px; } /*----------------------------------------------- side1について #side1はタイトル下のメニュー部分のデザイン設定になります。 デフォルトでは何も指定してません。 フリースペースを並べてjavascriptで開くようにしてあります。 メニュー項目を画像にしたり項目を変更したいときは html側を編集してください。 ・そもそも表示させたくないとき →display:none; を書き込んでください。 ------------------------------------------------*/ #contents #side1 { } /*----------------------------------------------- mainとpadについて #mainと #main .padはエントリ部分の設定になります。 ・背景をつけたい →background関連指定をいれてください。基本はbodyと 一緒ですが、fixedはききません。 スクロールバーを背景内にいれたい場合は #mainに背景指定をして、背景の高さ分 height:○○px;指定をいれてください。 また同時に.padにそれよりちょっと少ない数字で height指定をしてください。 スクロールバーを背景外に出したい時は #main.padに背景指定してください。 ・小窓スクロール部分の高さを変えたい。 →.padのheight:300px;の300を変えてください。 ・小窓スクロールしないようにしたい。 →.padのoverflow:auto;を削除してください。 ・背景からもう一回り中身を小さくしたい →.padのmargin:10px とpadding:10pxを増やして 調節してください。 --------------------------------------------------*/ #contents #main { clear:both; width: 100%; } #contents #main .pad { margin: 10px; height:300px; overflow:auto; } /*-------------------------------------------------- side2について #side2は下のメニューの土台になります。 項目設定などはhtml側で行ってください。 ・上との距離をもっと開けたい。 →margin-top:20px;の20を増やしてください。 ・そもそも表示したくない。 →display:none;を書き込んでください。 ---------------------------------------------------*/ #contents #side2 { margin-top:20px; width: 100%; } #bottommenu { } #bottommenu .menutitle{ float:left; } #footer { clear: both; } /*-------------------------------------------------- topmenuについて .topmenuはタイトル下のメニューのタイトルになります。 ・右から並べたい →float:left; をrightにしてください。 -----------------------------------------------------*/ .topmenu{ float:left; margin-right:1em; } /*------------------------------------------------- listについて .listは上のメニューをクリックして表示される部分です。 ・背景をつけたい →background系の指定をいれてください。以下略! ・縦幅を変えたい →height: 200px;の数字を変えてください。 ・増えすぎてもスクロールバーをださないで 縦に伸ばしたい →overflow: auto;を削除してください。 -------------------------------------------------*/ .list { font-family: "Verdana", "MS ゴシック", "Osaka"; display: none; overflow: auto; height: 200px; font-size:12px; color:#666; line-height:1.7; width:100%; } /*------------------------------------------------- closeについて .closeはトップメニューを開いた時の 閉じる為のclose という文字のデザインです。 画像にしたい場合はhtml側で編集してください -------------------------------------------------*/ .close { font-size:11px; text-align:right; } h1 { margin: 0px; padding: 0px; } /*-------------------------------------------------- ulはリスト全般の指定をします。 ・リスト前の・を無くしたい →list-style-type:none;と追加してください。 ・リスト前を画像にしたい。 →list-style-image:url(ここに画像アドレス); を追加してください。 ----------------------------------------------------*/ ul { margin: 0px 0px 0px 15px; padding: 0px; } div, td { font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅"; } /*---------------------------------------------------- form_colorについて .form_colorは検索入力窓や コメントの入力部分のデザイン設定です。 ・枠線の色や太さを変えたい。 →border部分を変更してください。 1pxが太さ、 solidが直線 #000が色です。 ・文字色を変えたい colorのカラーコードをかえてください。 ・背景色を変えたい →backgroundのカラーコードをかえてください。 -----------------------------------------------------*/ .form_color { border:1px solid #000; color:#000; background: #ECECEC; } /*----------------------------------------------------- aについて aはリンク色です。 colorは色、text-decorationは下線のあるなしを指定してますので カラーコードを変えたりunderlineとnoneを使い分けて下さい。 a:hoverはマウスオン時の挙動です。 -----------------------------------------------------*/ a { color: #999966; text-decoration: underline; } a:link { color: #336666; text-decoration: underline; } a:visited { color: #999999; text-decoration: underline; } a:active { color: #999999; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } /*------------------------------------------------------- .site_titleはブログのタイトルです。 デフォルトでは非表示です。 非表示を解除されたい場合はhtml側を編集ください。 .site_title aは色、 フォントや大きさ、太字の設定は.site_titleで行います。 .descriptionはブログの説明です。 ---------------------------------------------------------*/ .site_title a {color: #666666;text-decoration: none;} .site_title a:link {color: #666666;text-decoration: none;} .site_title a:visited {color: #666666;text-decoration: none;} .site_title a:active {color: #666666;text-decoration: none;} .site_title a:hover {color: #666666;text-decoration: none;} .site_title { font-size: 24px; color: #000000; margin: 20px 0px 10px 0px; padding: 0px; } .description { font-size: 14px; color: #666666; margin: 0px 0px 25px 0px; } /*-------------------------------------------------- .entry_naviは個別ページ上部の 前のエントリと次のエントリに飛ぶリンクです。 文字の大きさや色はここで変えられます。 ----------------------------------------------------*/ .entry_navi{ font-size: 12px; color: #666666; margin: 15px 0px 15px 0px; text-align: center; } .entry { margin: 0px; padding: 0px; } /*-------------------------------------------------- .entry_titleはエントリタイトルです。 文字の大きさや色はここで変えられます。 ・太字じゃなくしたい →font-weightをbolderからnormalに。 ・背景を表示したい →backgroundタグをいれてください。 背景の高さ分のheightを指定するのも忘れずに。 ・題名の前にアイコンをつけたい。 →background-imageでアイコンのURLを指定し background-repeatでno-repeatに height:○○px;で画像の高さ分高さをとり、 最後にpadding-left:○px;でアイコンの横幅よりちょっと大きく 右にエントリタイトルをずらしてください。 エントリタイトルを下にずらしたい場合は padding-topを指定してください。 --------------------------------------------------*/ .entry_title { font-size: 14px; font-weight: bolder; color: #666666; margin: 15px 0px 15px 0px; } /*---------------------------------------------------- .entry_bodyはエントリ本文です。 文字の大きさや色はここで指定できます。 ・行間を調整したい →line-height:170%;の170をいじってください。 ・背景をつけたい →background系指定を以下略。 ・枠線をつけたい →border指定をいれてください。 border:1px solid #000;で4辺にでます。 border-right,border-left,border-top,border-bottomで 1辺ずつ指定できます。 ・外側から余白をとりたい →padding:○px;を指定してください。 --------------------------------------------------------*/ .entry_body { font-size: 12px; line-height: 170%; color: #666666; margin: 15px 1em 15px 0px; } /*------------------------------------------------------ .entry_authorは エントリの作者名とエントリの日付部分です。 文字の大きさや色はここで変えられます。 ・右寄せを解除したい。 →text-align: right;をleftやcenterにしてください --------------------------------------------------------*/ .entry_author { font-size: 10px; color: #999999; margin: 5px 1em 5px 0px; text-align: right; } /*------------------------------------------------ .entry_moreは追記部分です。 設定の仕方はentry_bodyと一緒です -------------------------------------------------*/ .entry_more { font-size: 11px; line-height: 170%; color: #333333; margin: 15px 1em 15px 0px; } /*------------------------------------------------- .entry_stateはエントリのカテゴリや時間などの説明です。 基本はentry_authorと一緒の指定の仕方です。 ・エントリとエントリの間に線を引きたい →border-bottom:1px solid #000;と追加。 色や太さは調節してください。 -------------------------------------------------*/ .entry_state { width:95%; font-size: 11px; color: #666666; margin: 15px 1em 30px 0px; padding-bottom:3px; text-align:right; } /*----------------------------------------------- blockquoteは引用部分の指定です。 文字の大きさや色、左のボーダーの指定がいじれます。 背景色を変えたい場合はbackgroun系指定をいれてください -------------------------------------------------*/ blockquote { font-size: 11px; color: #666666; margin: 20px 10px 20px 10px; padding: 10px; border-left: 3px solid #CCCCCC; } /*------------------------------------------ .comment-titleと.trackback-titleは それぞれCommentやTrackbackなどの題字の指定です。 文字の大きさや色、下に引かれている点線などを ここで調節できます。 entry_titleと基本は同じです。 -------------------------------------------*/ .comment-title { font-size: 14px; font-weight: bolder; color: #666666; margin: 10px 0px 10px 0px; padding-bottom: 3px; border-bottom: 1px dotted #CCCCCC; } .trackback-title { font-size: 14px; font-weight: bolder; color: #666666; margin: 10px 0px 10px 0px; padding-bottom: 3px; border-bottom: 1px dotted #CCCCCC; } /*--------------------------------------- .pictはJUGEMでアップロードした写真や画像の指定です。 枠線の色や太さなどが指定できます。 ・枠線を無くしたい →3行全部消して、border:none;と書いてください ---------------------------------------------*/ .pict { border-width: 1px; border-style: solid; border-color: #999; } /*------------------------------------------------ .pageはページ下部にある全体が何ページあって 次のページへのリンクが貼ってある部分の指定です。 文字の大きさや色を調節できます。 ・中央寄せをやめたい →text-align: center;をleftやrightにしてください。 ---------------------------------------------*/ .page { font-size: 12px; color: #666666; padding: 10px 0px 0px 0px; text-align: center; } /*----------------------------------------------- .getlist_viewと.getlistは 下のメニューのクリックで開く部分になります。 widthで横幅の調整 heightで縦幅の調整が出き、 overflow:autoの削除でスクロールバーがなくなります。 .getlistを1つだけ.getlist_viewに html側を書き換えることにより 最初からその項目を開いた状態にすることができます。 ------------------------------------------------*/ .getlist_view { font-family: "Verdana", "MS ゴシック", "Osaka"; overflow: auto; width: 180px; height: 200px; float:right; margin-right:10px; } .getlist { font-family: "Verdana", "MS ゴシック", "Osaka"; display: none; overflow: auto; width: 180px; height: 200px; float:right; margin-right:10px; } /*------------------------------------------------ linktitleは上部下部メニュー共通の 項目名です。フォントや文字の大きさが指定できます。 基本はentry_titleと同じ変更ができます。 リンクになっているので色はここではなく a項目の色に依存します。 ------------------------------------------------*/ .linktitle { font-family: "Verdana"; font-size: 12px; font-weight: normal; color: #666666; line-height: 170%; margin: 0px; } /*---------------------------------------------- linktextは下のメニューのクリックで開かれる部分になります。 文字の大きさや色、行間や余白はここで指定できます。 -----------------------------------------------*/ .linktext { font-size: 11px; color: #999999; line-height: 170%; margin: 5px 0px 25px 2px; } /*---------------------------------------------- buttonは検索やコメント送信のボタン部分になります。 基本的にはform_colorを同じようなデザイン設定ができます。 ----------------------------------------------*/ .button { border:1px solid #fff; background:#eee; color:#333; margin: 5px 0 0 0; } /*---------------------------------------------- copyrightは最下部のJUGEMへのcopyrightリンクになります。 文字サイズや色、上の点線をここで調節できます。 --------------------------------------------------*/ .copyright { font-size: 10px; color: #333333; line-height: 170%; border-top: 1px dotted #CCCCCC; margin: 30px 0px 0px 0px; padding-top: 10px; }
高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成!
今すぐ
無料ブログ
をはじめよう! ≫
ブログ作成
利用規約
|
プライバシーポリシー
|
推奨環境
|
会社概要
|
サイトマップ
Copyright © 2003-2021 株式会社メディアーノ All Rights Reserved.
ページの先頭へ↑