エトゥ日記:菱形ピンク (モブログ向け)

2008年12月03日

菱形ピンク (モブログ向け)

■菱形ピンク (モブログ向け)

「モブログしかしないけど、文字あまり書かないんだよね～」って人にオススメのデザインっすよ。

画像の横じゃなく下に文字を入れる事で、少ない文字でも見栄えが悪くならないし、記事部分の横幅も小さいので一行に入れる文字数もそんな多くなくても文字が少なく見えないんすよ。

長文書くのが苦手な人向けのデザインっすね。

「メール投稿時の画像表示設定」を「画像を中央揃えに並べる」に設定して使うのを前提としたデザインっすよ。あと、写真の横幅も 300px 以上にならないように「画像の初期登録設定」も設定すると良いっすね。

■ ちゃんと読むんスよ ■

※登録は、管理画面の【テンプレート】の【カスタマイズ】からやって下さいっすよ。
　「それは管理画面のどこにあるの？」とか THE 超初心者な質問は華麗にスルーしまス。
　てぃーだブログのマニュアルを見るか、てぃーだ事務局に問合せすると良いっすよ。

※今使っているテンプレートが気に入っている人は、新しくテンプレートを登録してそれをカス
　タマイズすると良いっすよ。てぃーだはテンプレートを 3 つまで保存出来るんすよ。

※私のブログに素材として置いている画像の 直リンクはダメ っすよ。
　あんさんのパソコンに必ず落として、あんさんのブログにアップしてリンクさせるんすよ。
　やり方が分からん人は、これでも見るっすよ。

※PC 用のデザインなんで、モバイルの見た目は変わらないっすよ。

※カスタマイズで何か起こっても、私は何の責任も取らないっすよ。
　いつも言っている今流行の 自己責任 ってヤツっすよ、苦情も華麗にスルーっすよ。

使用する画像

CSS＆HTML の記述

【スタイルシート】

@charset "UTF-8";

/*共通設定*/
*{
font-family:"verdana","helvetica","osaka","ＭＳＰゴシック",ans-serif;word-break: break-all;
}

textarea,select,input {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳＰゴシック","sans-serif";
}

html{
}

body{
color:#555;
margin:0px;
padding:0px;
background:url(body の画像を入れてくださいっすよ) left ;
text-align:center;
}
html>/**/body{
font-size:16px;/*Good bye IE6+7*/
}

img{
border:none;
}

h1,h2,h3,p,ul,ol,li,dl,dt,dd,div,address,form{
margin:0px;
padding:0px;
font-size:100%;
}

/* -全体リンク色- */
a:link,a:visited {color:#999 ;text-decoration:underline;}
a:active,a:hover {color:#555 ;text-decoration:underline;}

/* -Layout 全体枠- */
#container{
background:#fcc;
font-size:12px;
width:574px;/*546*/
margin:0px auto;
padding:0px 15px;
text-align:left;
border-left:1px solid #666;
border-right:1px solid #666;
}

/* -バナー- */
#banner{
padding:0px 10px 10px 10px;
}
/* バナー内リンク色 */
#banner a:link,#banner a:visited {color:#aaa;text-decoration:none;}
#banner a:active,#banner a:hover {color:#98a;text-decoration:underline;}

/* ブログタイトル */
.blogtitle{
font-size:20px;
font-weight:bold;
padding:20px 0px 0px 10px;
text-align:left;
letter-spacing:2px;
}
/* ブログ説明 */
.description{
color:#666;
font-size:12px;
padding:4px 0px 0px 15px;
text-align:left;
letter-spacing:2px;
}

#content{
width:372px;/*346*/
float:right;
overflow:hidden;
}

/* TOP ページの記事と記事の黒間隔 */
.content-top{background:#fcc;height:20px;}

/* コンテンツ内 */
/* -ブログ本体- */
.blog{
width:373x;/*346*/
margin:0px 0px 20px 0px;
}

/* 記事外枠上部にあるアーカイブのリンク */
.archive_list {margin:20px 0 5px;}

.archive_list a:link, .archive_list a:visited {text-decoration:none;}
.archive_list a:hover, .archive_list a:active {text-decoration:underline;}

/* 記事部分 */
.blogbody{
margin-top:8px;
padding:8px;
background:#fff;
border:1px solid #c77;
}

/* 記事日付 */
.date{
color:#666;
font-size:12px;
letter-spacing:2px;
margin:5px 0;
}
/* 記事タイトル */
.title{
color:#555;
font-size:14px;
font-weight:bold;
height:10px;
}
/* 記事タイトルリンク色 */
.title a:link,.title a:visited {}
.title a:hover,.title a:active {}

/* 記事本文 */
.main{
width:100%;
font-size:12px;
padding:15px 0px 0px 0px;
overflow:hidden;
line-height:135%;
}

.main img{
margin:5px 5px 15px 5px;
padding:8px;
border:1px solid #bbb;

}

.main-continues{
font-size:10px;
}

/* 記事本文リンク色 */
.main a:link , .main a:visited {}
.main a:hover , .main a:active {}

/* 「続きを読む」リンク色 */
a.acontinues:link , a.acontinues:visited {text-decoration:underline;}
a.acontinues:hover , a.acontinues:active {text-decoration:underline;}

/* 記事追記 */
#more {}

/* 記事下部 */
.posted{
font-size:10px;
text-align:right;
margin:20px 0px 5px 0px;
}

/* コメントetc.リンク色 */
a.aposted{
white-space: nowrap;
}
a.aposted:link,a.aposted:visited {text-decoration:underline;}
a.aposted:active,a.aposted:hover {text-decoration:underline;}

/* ページメニュー「次の記事へ」etc. */
.menu{
font-size:10px;
text-align:right;
}

/* ページメニュー「前の記事へ」etc.リンク色 */
a.amenu:link,a.amenu:visited {text-decoration:underline;}
a.amenu:active,a.amenu:hover {text-decoration:underline;}

/* 「このページの上へ▲」 */
.pagetop{
font-size:10px;
text-align:right;
}

/* ******************************
トラバ・コメント関連
****************************** */

/* トラバ */
#trackbackURL {
margin:25px 0 0;
padding:5px 0px;
}

.trackbackurl-head{
color:#555;
font-size:10px;
font-weight:bold;
height:10px;
}

.trackback-url{
margin:5px 0px 0px 5px;
}

#trackback-text{
width:250px;
border:1px solid #000;
}

#trackback{
margin:25px 0 0;
}

.trackback-head{
color:#555;
font-size:10px;
font-weight:bold;
margin:10px 0 0;
height:10px;
}

.trackback-body{
margin:5px;
font-size:10px;
line-height:135%;
}

.trackback-post{
font-size:10px;
text-align:right;
margin:0px 0px 30px 0px;
}

a.atrackback-post:link,a.atrackback-post:visited {text-decoration:underline;font-weight:bold;}
a.atrackback-post:active,a.atrackback-post:hover {text-decoration:underline;font-weight:bold;}

/* コメント */
#comments {margin:25px 0 0;}

.comments-head{
color:#555;
font-size:10px;
font-weight:bold;
height:10px;
margin:5px 0;
}

.comments-body{
margin:5px;
font-size:12px;
line-height:135%;
}

.comments-post{
font-size:10px;
text-align:right;
margin:0px 0px 30px 0px;
}

a.acomments-posted:link,a.atrackback-post:visited {text-decoration:underline;font-weight:bold;}
a.acomments-posted:active,a.atrackback-post:hover {text-decoration:underline;font-weight:bold;}

/* コメント書き込みフォーム */
table.form{margin:25px 0px 0px 0px;}

.form th {
vertical-align:top;
text-align: right;
font-weight: normal;
}
.form .button {
margin:0 auto;
display: block;
}

label {font-size:10px;font-weight:bold;}
#author {width:200px;border:1px solid #999;}
#email {width:200px;border:1px solid #999;}
#url {width:200px;border:1px solid #999;}
#text {font-size:12px;width:240px;height:150px;border:1px solid #999;}

/* ******************************
サイドバー
****************************** */

#links{
width:180px;
float:left;
text-align:left;
padding:20px 0px 0px 0px;
overflow:hidden;
}

/* サイドメニュー共通設定 */
.sidetitle{
background:#fff;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
font-size:12px;
letter-spacing:2px;
padding:5px 5px 5px 5px;
}

.side{
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:5px;
}
.side .text{width:80px;}

.button {}

/* -サイドメニューリンク色- */
a.aside:link,a.aside:visited {text-decoration:underline;}
a.aside:active,a.aside:hover {text-decoration:underline;}
.sidebody a:link,.sidebody a:visited {text-decoration:underline;}
.sidebody a:active,.sidebody a:hover {text-decoration:underline;}

/* ******************************
カレンダー
****************************** */

.calender{
background:#fff;
border:1px solid #000;
font-size:10px;
padding:2px 0px;
}

.calendarhead{
border-top: 1px none #666;
border-left: 1px none #666;
border-right: 1px none #666;
color:#666;
font-size:12px;
font-weight:bold;
letter-spacing:2px;
padding:0px 0px 2px 0px;
text-align:center;
}

.calendartable{
margin:0px auto 10px auto;
width:100%;
text-align:left;
border-spacing:0px;
}
* html .calendartable
{ /*IE6のボーダー間隔を接着*/
border-collapse:collapse;
}
*+html .calendartable
{ /*IE7のボーダー間隔を接着*/
border-collapse:collapse;
}

/*曜日(文字)*/
.calendarweek{
color:#fff;
font-size:10px;
font-weight: bold;
}

/*曜日(セル)*/
.calendarwd{
background:#999;
font-size:10px;
font-weight:bold;
letter-spacing: 2px;
padding:2px 0px 2px 5px;
}

/*日付(セル)*/
.calendard{
empty-cells:show;
border-top:1px solid #efefef;
border-right:1px solid #efefef;
text-align: center;
}

/* カレンダー全体リンク色 */
.calendartable a:link , .calendartable a:visited{}
.calendartable a:hover , .calendartable a:active {}

/* カレンダー年月日リンク色 */
.calendarhead a:link,.calendarhead a:visited {color:#666;text-decoration:none;}
.calendarhead a:active,.calendarhead a:hover {color:#666;text-decoration:none;}

/* -カレンダー投稿日リンク色- */
.calendar a:link,.calendar a:visited {text-decoration:underline;}
.calendar a:active,.calendar a:hover {text-decoration:underline;}

/* -RSS- */
.rss{}

.rss ul{
margin:0px;
padding:0px;
width:100%;
text-align:center;
}

.rss ul li{
border-right:#999 1px solid;
display:inline;
font-size:12px;
font-style:normal;
font-weight:bold;
letter-spacing:0.2px;
margin-right:0.3em;
padding-right:0.5em;
padding-left:0.2em;
}

/* RSS リンク色 */
.rss ul a:link,.rss ul a:visited {color:#333333;text-decoration:none;}
.rss ul a:hover,.rss ul a:active {color:#999999;text-decoration:none;}

/* ******************************
サイドバー設定
****************************** */

/* 最近の記事 */
.recententry {}
.recententry .sidetitle {}

/* 過去記事 */
.archives {}
.archives .sidetitle {}

/* カウンター */
.counter {}
.counter .sidetitle {}

/* 最近のコメント */
.comment {font-size:10px;}
.comment .sidetitle {}

.comment a:link, .comment a:visited {font-size:10px;text-decoration:underline;}
.comment a:active, .comment a:hover {font-size:10px;text-decoration:none;}

/* 最近のトラバ */
.trackback {}
.trackback .sidetitle {}

/* お気に入り */
.link {}
.link .sidetitle {}

/* ブログ内検索 */
.search {}
.search .sidetitle {}

/* QRコード */
.qrcode {}
.qrcode .sidetitle {}

/* 読者登録 */
.subscription {}
.subscription .sidetitle {}

/* プロフィール */
.profile {}
.profile .sidetitle {}
.photo{text-align:center;}
.nickname{
color:#2b5695;
font-weight:bold;
margin:10px 0px;
}
.message{}

/* オーナーメール設定 */
.inquiry {}
.inquiry .sidetitle {}

/* インフォメーション設定 */
.ad {}
.ad .sidetitle {}

/* カテゴリ */
.category {}
.category .sidetitle {}

/* 新規投稿 */
.blog_entry {}
.blog_entry .sidetitle {}

/* カスタム1 */
.custom1 {}
/* カスタム2 */
.custom2 {}
/* カスタム3 */
.custom3 {}

/* ******************************

****************************** */

/* フッター */
#footer{
clear:both;
}
#copyright{
border-top:1px solid #999;
height:16px;
font-size:10px;
font-weight:bold;
font-style:normal;
color:#999;
margin:0px;
padding:0px;
line-height:16px;
text-align:center;
}

.album {background:#;width:360px;margin-top:10px 0 0 0px;padding:0px;}

　※画像のリンク を入れる箇所があるので、そこ注意っすよ。

【トップページ】

【個別記事】

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<%CSSUrl%>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%RDFUrl%>" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%RSDUrl%>" />
<link rel="contents" href="<%SiteMapUrl%>" />
<title><%BlogTitle%>:<%EntryTitle%></title>
<meta name="description" content="<%EntryExcerpt%>,<%BlogDescription%>" />
<meta name="keywords" content="<%BlogTitle%>,<%EntryTitle%>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />


<meta http-equiv="page-enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=1,Overlap=1.00,Enabled=1)" />
<meta http-equiv="page-exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=1,Overlap=1.00,Enabled=1)" />


<script type="text/javascript">

</script>

</head>
<body>
<div id="container">

<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>

<div id="links">
<%PluginList%>
</div>

<div id="content">
<div class="archive_list">
<a href="<%BlogUrl%>">■トップページ</a>　│<a href="<%BlogUrl%>sitemap.html">■サイトマップ</a>　│　<a href="<%BlogUrl%>album.html">■マイアルバム</a>
</div>

<div class="blog">
<%TrackBackAutoDiscovery%>
<div class="blogbody">

<h2 class="date"><%EntryDate%></h2>
<h3 class="title">■ <%EntryTitle%></h3>

<div class="main"><%EntryBody%><br clear="all" /></div>
<div class="main" id="more"><%EntryBodyMore%>

<div class="posted">
Posted by <%EntryAuthor%> at <%EntryTime%><br>
<IfEntryAllowComment>│<a class="aposted" href="#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment>
<IfEntryAllowPing>│<a class="aposted" href="#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing>
<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>
</div>

<div class="menu"><IfPrevEntry><a class="amenu" href="<%PrevEntry%>">« 前の記事へ</a>│</IfPrevEntry><a class="amenu" href="<%BlogUrl%>">このBlogのトップへ</a><IfNextEntry>│<a class="amenu" href="<%NextEntry%>">次の記事へ »</a></IfNextEntry></div>
</div>

<a name="comments"></a>

<div id="trackbackURL">
<IfEntryAllowPing>
<h3 class="trackbackurl-head">■ この記事へのトラックバックURL</h3>
<div class="trackback-url"><form><input id="trackback-text" type="text" value="<%EntryTrackBackUrl%>"></form></div>
</IfEntryAllowPing>
</div>

<div id="trackback">
<IfEntryPingCount>
<div class="trackback-head">■ この記事へのトラックバック</div>
<TrackBacksLoop>
<div class="trackback-body"><%PingExcerpt%></div>
<div class="trackback-post"><a class="atrackback-post" target="_blank" href="<%PingBlogUrl%>"><%PingTitle%></a>【<%PingBlogName%>】at <%PingDateTime%></div>
</TrackBacksLoop>
</IfEntryPingCount>
</div>

<div id="comments">
<IfEntryCommentCount>
<div class="comments-head">■ この記事へのコメント</div>
<CommentsLoop>
<div class="comments-body"><%CommentBody%></div>
<div class="comments-post">Posted by <IfCommentUrl><a class="acomments-posted" href="<%CommentUrl%>"><%CommentAuthor%></a><ElseIfCommentEmail><%CommentAuthor%><Else><%CommentAuthor%></IfCommentUrl> at <%CommentDateTime%></div>
</CommentsLoop>
</IfEntryCommentCount>
</div>

<IfEntryAllowComment>
<form action="<%EntryCommentUrl%>" method="POST" enctype="multipart/form-data">
<table summary="コメント投稿フォーム" class="form">
<tr>
<th><label for="author">名前： </label></th>
<td><input id="author" name="author" value="<%CookieAuthor%>" /></td>
</tr>
<tr>
<th><label for="email">メール： </label></th>
<td><input id="email" name="email" value="<%CookieEmail%>" /></td>
</tr>
<tr>
<th><label for="url">URL： </label></th>
<td><input id="url" name="url" value="<%CookieUrl%>" /></td>
</tr>
<tr>
<th><label for="bake">情報を記憶： </label></th>
<td><input id="bake" type="checkbox" name="cookie" style="padding:0;margin:0px;" <%CookieCookie%> /></td>
</tr>
<tr>
<th><label for="text">コメント： </label></th>
<td><textarea id="text" name="body" rows="10" cols="50"><%CommentArea%></textarea></td>
</tr>
<tr>
<td colspan="2"><input class="button" name="insert" type="submit" value="　書込　" /></td>
</tr>
</table>
</form>
</IfEntryAllowComment>
</div> 
<br clear="all">
<div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>

</div> 
</div> 

<div id="footer">
<div id="copyright">Copyright(C)<%Year%>/<%BlogTitle%> All Rights Reserved.</div>
</div>

</div>
</body>
</html>

名前:
メール:
URL:
情報を記憶:
コメント:
	＜ご注意＞書き込まれた内容は公開され、ブログの持ち主だけが削除できます。確認せずに書込