写真の載せ方 ＣＳＳだけでも・・・

写真の上にカーソルを載せると・・・・・・
CSSだけでもこんなことができます

が
、設定が面倒なんです・・・・
ブログに使う写真がすべて同じサイズの写真だけだって方にはお勧めしますが
違うサイズの写真では上のようにおかしくなります

前に同じ写真を載せていますのでくらべたらおかしいことがわかります
大きくなった写真をクリックしても確認できます

/*■■■■■　ポップアップ　■■■■■*/

p.pop {
margin: 0 1em 0 0;
padding: 0;
width: 175px;
height: 196px;
float: left;
}

p.pop a {
width: 175px;
height: 196px;
display: block;
overflow: hidden;
}

p.pop > a {
overflow: visible;
}

p.pop a img {
width: 175px;
height: 196px;
z-index: 1;
}

p.pop a:hover {
overflow: scroll;
}

p.pop > a:hover {
overflow: visible;
}

p.pop a:hover img {
position: relative;
top: -100px;
left: -40px;
width: 304px;
height: 342px;
z-index: 2;
}
/* ■■　ここまで　■■　*/

なので、・・・説明はヌキです

ヒント？

Good する部分に付いちゃっていたアイコンが・・・

付かないように設定できました・・・・

本当はほっておくつもりでしたが

コメントのところにも発見して

なんとかしてみました・・・・・

だんだんと、

完成に近づいているかも・・・・・

CSS ドロップキャップ

※リンク実験中↓下のリンクは記事とは関係ありませんm(_ _)m

　　　　　　　　　ポラ風写真テスト

-----------------------------------------------

実は・・・・javascriptはじめてまだ1ヶ月くらいなんです・・・
本当はCSSの方が得意だったりして・・・
でも、今はjavascriptにはまちゃっています・・・
が、行き詰まって良い考えもでてこないので
で、ドロップキャップでもやってみました？？？
↑・・・・・・・・・・・？？です


まず、記事を書きます
そのとき、ドロップキャップを付けたい段落を一固まりにして
<p class="dcap">と</p>で囲ってください（HTMLタグを表示）
その中の1番目の文字がドロップキャップになります

　<p class="dcap">何とかなったみたいです・・・・<br />
　画像フォルダーに画像を上げたときにつけたタイトルを<br />
　拾ってくるようにしました</p>
　<br />
　<br />
　<p class="dcap">あとはグループを自動で設定するだけですが・・・・・<br />
　投稿日を拾いたいのですが・・・・<br />
　どうやればいいか・・・・？？？？<br />
　・・・・・？？です <br /><br />
　</p>


　<p class="dcap"> ようにクラス指定する

たとえば昨日の書き方の例 　　←thickboxでこんなこともできます

デザインの変更　→　スキンCSSの編集　で、
枠内の1番下に下記の部分(青字部分)をコピペする

/*■■■■■■■■　ドロップキャップ　Mac版IE対策　■■■■■■■■\*/
p.dcap:first-letter {

color: #ffffff;
font-size: 270%;
float: left;
line-height: 1;
padding: 3px;
margin-right: 3px;
background-color: #cc0000;
}
/* ■■ ここまで ■■ */

プレビュー　を押して確認して成功していれば　保存
色の変更は #cc0000 を変えてください
文字の色は #ffffff を変えてください

※backgroundに画像も使えますよ・・・・・

クラス指定しないで 記事を書けば自動でもできるのですが・・・

ウザイので

クラス指定で、必要なところで使ったほうが使いやすいです