エログ専用「使えて+いじれる」テンプレート

エログのエントリにはパターンがあって、たいてい画像とリンクの組み合わせで、提供コンテンツ+他サイトへのリンク(騙しリンクですね)もしくは、他サイトのエントリ紹介が占めています。
通常テンプレでも十分対応できますが、ある程度の知識は必要なので、雛形だけはご紹介します。
また、慣れると騙しリンクにはひっかからない(javaスクリプトを簡単にON/OFFできるブラウザを使うと便利)んですが、多分ひっかかったことはあると思います。決して気分のいいものではないので、オススメしませんし、使わないことを推奨します。

1.タイトルを上にして、画像リンク

エロエロ画像を探せ！

エロ画像#1
エロ画像#2
エロ画像#3
エロ画像#4
エロ画像#5

このエントリのコードはこちら


<p>エロエロ画像を探せ！</p>
<p><img src="http://14.dtiblog.com/b/blogtube/file/001.gif" width="350" height="200" alt="エロ画像" align="left" />
<a href="http://14.dtiblog.com/b/blogtube/file/001.gif" target="_blank">エロ画像#1</a><br />
<a href="http://14.dtiblog.com/b/blogtube/file/001.gif" target="_blank">エロ画像#2</a><br />
<a href="http://14.dtiblog.com/b/blogtube/file/001.gif" target="_blank">エロ画像#3</a><br />
<a href="http://14.dtiblog.com/b/blogtube/file/001.gif" target="_blank">エロ画像#4</a><br />
<a href="http://blogtube.14.dtiblog.com/" target="_blank">エロ画像#5</a>
</p><div style="clear: left;"></div>

これを基本にすれば、他サイトの更新情報にも使用できます。その他色を変えたり、ボックスをつけたり、いろいろとアレンジを楽しんでください。他のサイトも参考に。
必ず最後の右寄せクリアを忘れないで下さい。

カテゴリ : エログ流エントリテク | 記事のURL | コメント (0) | トラックバック (0)

2006年11月12日

画像を右に配置する

今回は画像を右に配置してみます。通常は画像が左でテキストを右に回りこませるパターンですが、逆に配置することで、エントリにめりはりとインパクトがでます。
画像を使ってリンク先をxxxはありがちなので、少し違った方法でやると効果があがるはず。

1.スタイルシートの追加

意外と簡単で、スタイルシートの追加とエントリ最後に回りこみ解除指定するだけです。それではスタイルシートの追加はこちら。


.imgright{
margin: 0 0 12px 16px;
float: right;
}

スタイルシートの最後にでも追加してください。意味は、マージンを左に16px、下に12px取り、画像を右に寄せます。
そして記事の右に配置したい部分で使用します。

2.記事での使用方法

使い方も簡単ですが、必ず右への回り込みを解除してください。使用例はこちら。

エロ画像ちょいエロYouTube
無料エログ
 エロの原石を探せ！
おぱ地下ブログ

この右に配置したエントリはこのようになっています。


<p><img class="imgright" src="http://14.dtiblog.com/b/blogtube/file/001.gif" width="300" height="150" alt="	エロ画像" />
<a href="http://ranks1.apserver.net/share/out.php?u=blogtube&id=elogtube">ちょいエロYouTube</a><br />
<a href="http://ranks1.apserver.net/share/out.php?u=blogtube&id=muryo">無料エログ</a><br />
<a href="http://ranks1.apserver.net/share/out.php?u=blogtube&id=genseki">エロの原石を探せ！</a><br />
<a href="http://ranks1.apserver.net/share/out.php?u=blogtube&id=opachika">おぱ地下ブログ</a>
</p><div style="clear: right;"></div>

imgに対してclass="imgright"を指定し、最後に右寄せを解除します右寄せを解除しないとずっと右寄せが有効になりますので、必ず忘れないで下さい。

3.右寄せと左寄せを両方使う

エロ画像ちょいエロYouTube
無料エログ
 エロの原石を探せ！
おぱ地下ブログ

右寄せと左寄せを交互に配置。使い方によってはインパクトがでます。
また左寄せの画像とテキストのマージンが違うと思いますが、通常テンプレートなら同じになっているはずです。

カテゴリ : カスタマイズ・投稿部分 | 記事のURL | コメント (0) | トラックバック (0)

2006年11月11日

カスタマイズとソースを見るのに使用するおすすめテキストエディタ

ウインドウズでの標準テキストエディタはメモ帳ですが、これですとeucのテキストファイルが読み込めないので、直ぐにでも他のテキストエディタに変更してください。
単純にそのほうが便利ですし、機能も優れています。Vectorなどで紹介されているソフトならたいてい大丈夫ですが、沢山あって選ぶの面倒でしたらこちらをお使い下さい。

1.TeraPad

ダウンロードはこちら。(リンク先はVectorです)
TeraPad

使い比べしているわけではないので何ですが、有名ですし使い勝手はいいのでオススメです。こだわりがなければこちらを使いましょう。

2.Crescent Eve

ダウンロードはこちら。
Crescent Eve

テキストエディタだけでいろいろとHTMLファイルをいじる時にはオススメです。邪魔にならない程度の補完機能で、これだけでウェブページを作れます。慣れたらこちらも試してみてください。最初からこれを使っても大丈夫ですよ。普通に使えば単なるテキストエディタです。

3.窓の手

ダウンロードはこちら。
窓の手

参考にブログのソースを見ることがあるかもしれません。IEの標準だとやっぱりメモ帳なので、テキストエディタを指定する場合、レジストリをいじります。ソフトで簡単に指定したい場合は、この窓の手を使いましょう。ie(1)タブの下段、ソースを表示するエディタの所で使いたいテキストエディタを指定すれば、それでソースを表示できます。他にもいろいろと便利なので、インストールして損の無いソフトですよ。

カテゴリ : エログツール作成用 | 記事のURL | コメント (0) | トラックバック (0)

2006年11月11日

エログカスタマイズでわからないタグがあった時は

エログ限定ではなく、ブログをカスタマイズする際にはタグやスタイルシートの知識が必要です。ウェブ上で簡単に調べることができるオススメサイトをご紹介します。カスタマイズ時にわからないことがあればこちらで調べていくと、だんだんとカスタマイズできる範囲が広がっていきますよ。

1.TAG index

タグやスタイルシート全般の説明。関連する項目にリンクが貼ってあったりして、初心者が調べものをするのにお勧め。もちろん説明も例があってわかりやすい。

2.HTMLクイックリファレンス

タグやスタイルシートの早引きのようなスタイルで、ちょい忘れのタグなどを簡単に調べたい時に。ある程度知識がないとわかりにくいかも。慣れると便利です。

こちらでのタグやスタイルシートの説明は最低限しか行っていませんので、意味の分からないタグなどはこちらのサイトで調べてみましょう。

カテゴリ : エログツール作成用 | 記事のURL | コメント (0) | トラックバック (0)

2006年11月10日

エントリ上部箇所を日付からタイトルに変更する

今回はエントリ本文を少しカスタマイズしましょう。エントリ本文の上段は日付になっていますが、エログだと日付が一番上というのは珍しいみたいなので、一番多いと思われるタイトルを上段に持って行きます。
それ以外に、上段部分のスタイルシートを少々いじってみた例を紹介します。本文は特にいじる必要はありませんし、いじらない方がいいと思いますが、上段はカスタマイズして自分好みに変更するのもよいかもしれません。

1.上段部分を日付からタイトルへとカスタマイズ

単純に日付部分にタイトルを持っていき、日付はエントリのフッター部分に移動しました。以下がそのカスタマイズ例です。変更部分のみ記述してあります。また時間は削除しました。


<div class="maindate"><!-- エントリタイトル -->
<h2 class="maindate2" id="a<%topentry_no>"><%topentry_title>

</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="mainfooter"><!-- エントリ下部 -->
<%topentry_month>/<%topentry_day> カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>

色が変わっている部分が変更箇所です。スタイルシートはそのままで、HTML部分だけ置き換えればそのまま表示できます。タイトルを重視したい場合は変更してみて下さい。

2.スタイルシートを変更する

見映えに影響する部分なので、ここをカスタマイズするだけで雰囲気が変わります。自分好みにどうぞ。
スタイルシートはこの部分になります。


.maindate{
padding: 3px;
text-align: left;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.maindate2{
font-size: 12px;
font-weight: bold;
color: #000;
}

maindateが上段部分のボックス、maindate2が文字の指定をしています。これを少しカスタマイズしてみましょう。


.maindate{
padding: 5px 3px 10px;
text-align: center;
background: #279bb3;
border-bottom: solid 3px #e51717;
}

.maindate2{
font-size: 12px;
color: #f6f6f6;
}

少々派手にしてありますが、このようにテキストと色の変更だけでも印象が変わりますので、お好きなカスタマイズを楽しみましょう。