前日の方法だと写真１枚１枚設定しなければならないし、
実はこのスタイルシートのカレンダーが、記事を書いた日、書いてない日が、見にくいので何とかしたい・・
この２つを一気に解決するため、独自スタイルシートを適用させることにしました。
ブログは、「スタイルシート」と呼ばれる、ブログの文法設定を集めたファイルがあって、ブログを開くたびに読み込みます。
そこで、スタイルシート書き換えることにより、写真をアップの際一回一回設定しなくてよくなります。
うまいたとえが見つかりませんが・・・１回設定すれば、写真をアップすれば勝手に、写真に枠をつけてくれるし、その枠が気に入らなくなったら、スタイルシートの設定だけ替えればｏｋ。
でも、前日の方法だとアップした写真をすべて手動で、しかも全部変えないといけない。
後々のことを考えて、スタイルシートを変えちゃおうということにしました。
○現在のスタイルシートから独自スタイルシートを作る
１．自分のブログを表示させ、右クリック→ソースの表示で、ソースを表示する
２．私の場合はメモ帳が立ち上がるんですが、編集→検索で「.CSS」を検索します。
https://template.cocolog-nifty.com/000009/three_column/component/styles.css
私の場合ココにありました。
３．そのファイルを自分のパソコンの中に保存します。その際名前をmystyles.cssにします。
４．その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になってるのはロゴ表示用に、写真下側を厚くしてるためです。
５．追加したら保存して、ココログにアップロードします。ココログの管理画面を開き「コントロールパネル」→「ファイル」のタグを選んで、「新規ファイルのアップロード」からmystyles.cssをアップロードします。
６．現在のフォルダのところに「mystyles.css」画追加されていたら成功です。
○独自のスタイルシートを適用させる。
サイドバーから適用させる必要がありますので、独自のサイドバーをつくります。サイドバーの位置は、なるべく左上のほうがいいです。
１．ココログの管理画面を開き「マイスト」から、マイリストの新規作成そのさいリストのタイプは「リンク」を選びます。そして適当に名前をつけて作成します。
２．作成したリストを選び、まず「設定」のタグを開きます。「高度な設定」の「メモ表示」を「テキスト表示」にします。こうしておかないと、設定が反映されません。
３．リストの「管理」のタグを押して「項目の追加」を選びます。そしてメモの中に。。。
<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 また暑くなってきました～いやだぁ
最近のコメント