参考になるかもしれない、私のブログ作成術 【実践編】

参考になるかもしれない、私のブログ作成術【実践編】

前回に引き続き、私のブログの書き方の紹介です。
今回は細かい実装方法を紹介します。

【前回記事】
　　参考になるかもしれない、私のブログ作成術【解説編】

　＜目次：解説編＞
　　・記事作成のスタイル
　　・サムネイル表示
　　・使用している画像枠
　　・画像枚数制限
　　・画像レイアウト
　　・引用ボックス

サムネイル表示

　まずは、サムネイル表示についてです。
　解説編よりもうちょっと細かい説明をすると、こんな感じになっています。

　

　画像にベベルとエンボス効果

　　これはあまり聞き馴染みのない方が多いかも知れません。
　　要は画像にちょっとインパクトを与えてあげようということです。

　　サムネイルをよく見て頂けると解ると思いますが、
　　枠の所がちょこっと浮き上がって見えますよね。

　　　

　　これをベベルとエンボスと言います。
　　有名所の画像編集ソフトには、この機能が付いていると思います。

　　まぁ、これも私の趣味の問題なのですが、ただ単に画像を表示するのではなく、
　　こういったちょっとした効果を与えることによって、目を引ければなぁという
　　思いで付けています。

　画像左寄せ

　　これは、そのままです。
　　画像を左寄せにして、右側に本文を入れています。

　　ファンブログの管理画面だと、これですね。

　　　

　　私の場合は、直接コードを入力しているので、こんな感じになります。
　　align = "left"で左寄せの指定をしています。

　　あとは、この続きに本文を入れるだけです。

　　実際には、サムネイル自体毎回使うものなので、重複を避ける為に
　　スタイルシートを利用しています。
　　ここで、画像サイズの指定も一緒に行っています。

/* ポストサムネイル用*/
#main img.post-thumbnail{
	width: 160px;			/* 画像サイズ指定 */
	height: 120px;			/* 画像サイズ指定 */
	margin: 0 20px 0 0;		/* 微妙な位置調整 */
	float: left;			/* 左寄せ */
}

　　記事ではこのように書いています。

　※コードが上手く表示されない場合は、こちらの掲示板を御覧ください

使用している画像枠

　次に、画像の周りに表示させている枠についてです。
　ちょっと小さくて見難いですが、こんな感じになっています。

　

　具体的には、スタイルシートでこのように設定しています。

/* 画像枠の表示 */
#main img.border {
padding: 5px;					/* 画像からの距離 */
margin: 0 !important;
border: 1px dashed #CCCCCC;		/*ボーダーの太さ・種類（ダッシュ線）・色*/
}

　記事ではこのように書いています。

　※コードが上手く表示されない場合は、こちらの掲示板を御覧ください

以上、２回に渡って私のブログの書き方を紹介させてもらいました。

HTMLコードで記事を書けるようになると、表現の幅が広がります。
是非皆さんのブログに合った表現方法を、色々試してみてください。

【前回記事】
　　参考になるかもしれない、私のブログ作成術【解説編】