« test | トップページ | 携帯電話が水没!! »

2006年8月20日 (日)

スタイルシートCSSをいじくって、写真をポラロイド風にしてみる。

前日の方法だと写真1枚1枚設定しなければならないし、

実はこのスタイルシートのカレンダーが、記事を書いた日、書いてない日が、見にくいので何とかしたい・・

この2つを一気に解決するため、独自スタイルシートを適用させることにしました。

ブログは、「スタイルシート」と呼ばれる、ブログの文法設定を集めたファイルがあって、ブログを開くたびに読み込みます。

そこで、スタイルシート書き換えることにより、写真をアップの際一回一回設定しなくてよくなります。

うまいたとえが見つかりませんが・・・1回設定すれば、写真をアップすれば勝手に、写真に枠をつけてくれるし、その枠が気に入らなくなったら、スタイルシートの設定だけ替えればok。

でも、前日の方法だとアップした写真をすべて手動で、しかも全部変えないといけない。

後々のことを考えて、スタイルシートを変えちゃおうということにしました。

○現在のスタイルシートから独自スタイルシートを作る

1.自分のブログを表示させ、右クリック→ソースの表示で、ソースを表示する

2.私の場合はメモ帳が立ち上がるんですが、編集→検索で「.CSS」を検索します。

https://template.cocolog-nifty.com/000009/three_column/component/styles.css

私の場合ココにありました。

3.そのファイルを自分のパソコンの中に保存します。その際名前をmystyles.cssにします。

4.そのmystyles.cssに、ポラロイド風設定を追加します。

/* 画像 */
.entry-body img {
background-color: #FFFFFF;
border-width: 2px;
margin: 5px 10px 5px 5px;
padding: 10px 10px 35px 10px; border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
background-image: url(https://kazumaro.cocolog-nifty.com/maro.jpg);
background-repeat:no-repeat;
background-position:95% 98%;
}

/* 枠なし*/
.entry-body img.emoji {
background-color: #FFFFFF;
border: none;
margin: 0px;
padding: 0px;
background-image: none;
}

// 画像タグに含める属性値(alt属性以外) var att = 'border="0" width="17" height="17" style="vertical-align:middle" class="emoji"';

https://kazumaro.cocolog-nifty.com/maro.jpgは、写真の右下のロゴ「maro」の設定です。

padding: 10px 10px 35px 10px; border-style: solid;

↑がひとつだけ35になってるのはロゴ表示用に、写真下側を厚くしてるためです。

5.追加したら保存して、ココログにアップロードします。ココログの管理画面を開き「コントロールパネル」→「ファイル」のタグを選んで、「新規ファイルのアップロード」からmystyles.cssをアップロードします。

6.現在のフォルダのところに「mystyles.css」画追加されていたら成功です。

○独自のスタイルシートを適用させる。

サイドバーから適用させる必要がありますので、独自のサイドバーをつくります。サイドバーの位置は、なるべく左上のほうがいいです。

1.ココログの管理画面を開き「マイスト」から、マイリストの新規作成そのさいリストのタイプは「リンク」を選びます。そして適当に名前をつけて作成します。

2.作成したリストを選び、まず「設定」のタグを開きます。「高度な設定」の「メモ表示」を「テキスト表示」にします。こうしておかないと、設定が反映されません。

3.リストの「管理」のタグを押して「項目の追加」を選びます。そしてメモの中に。。。

<link rel="stylesheet" href="https://kazumaro.cocolog-nifty.com/mystyles.css" type="text/css">

を追加します。これで独自スタイルシートを適用させます。

https://kazumaro.cocolog-nifty.com/mystyles.cssは私のスタイルシートの位置ですので、個人に合わせて修正してください。

こんな感じで適用させて見ました。

<注>

全部、枠が表示されてしまうので、例外設定できるようにしています。

枠を表示したくない場合は・・・

<img alt="B0007WAD1W"
     src=
     "http://images.amazon.com/images/P/B0007WAD1W.01._SCMZZZZZZZ_.jpg"
     border="0"  class="emoji" /></a><br />

赤い部分を追加することで、枠を表示しません。

参考にさせていただいたブログ

CSSでココログの画像をポラロイド風にアレンジ 

スタイルシートをマイリストに入れました by KOROPPYの本棚 さん

ついでに、第14回:カレンダーの投稿した日付に色を付けてみよう by 初めてのココログ・カスタマイズさんを参考に

#calendar a {
  background-color:#DEEFFF;
width: 20px; line-height: 20px;
  display: block; margin: 0 auto; }

をスタイルシートに追加して、記事を書いた日はカレンダーに色がつくようにしました。

これで痒いと思っていたところにすべて手が回りました!!

すばらすぃ!

<H19.4.20追記>
写真の背景をわかりやすくするためちょっと色を入れて、maroの文字を抜きました。

/* 画像 */
.entry-body img {
background-color: #f7f7f4;
border-width: 2px;
margin: 5px 10px 5px 5px;
padding: 10px 10px 10px 10px; border-style: solid;
border-color: #e2e2db #c4c4ac #c4c4ac #e2e2db;
background-repeat:no-repeat;
background-position:95% 98%;
}

現在のCSSは以上のように変更しています。

==========================
韓国語の勉強時間 合計【 297.0 】時間
+0.5 トウミ単語を覚えるよてい。?を抜けたいです。
今日のモチベーション【 50 】%
+0 また暑くなってきました~いやだぁ

|

« test | トップページ | 携帯電話が水没!! »

ブログ@カスタマイズ」カテゴリの記事

コメント

記事でのご紹介、ありがとうございます。
こちらはスペシャルテンプレートだから、
CSSの編集が出来ないのですね。

「// 画像タグに含める属性値(alt属性以外)~」は、
絵文字スクリプトの部分なので不要かと。
class名もこちらでは絵文字に限ったことではないので、
emojiから別のものに変えてもOKですよ。

投稿: KOROPPY | 2006年8月21日 (月) 08:34

こちらこそ、ありがとうございました。
おかげさまで、痒いところを掻く事が出来ました。m(__)m

スペシャルテンプレートなんでCSSの編集が出来なかったわけですね。

>「// 画像タグに含める・・・

確かにそうですね。emojiも変えておくべきでしたが、実はうれしさのあまりもう設定してしまいましたので、このままにいたします(爆)

投稿: まろ | 2006年8月22日 (火) 19:17

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: スタイルシートCSSをいじくって、写真をポラロイド風にしてみる。:

« test | トップページ | 携帯電話が水没!! »