SSブログ

記事内で枠を付ける方法 [PC]

 たまには、PC関連の記事も書かなくては・・・。

 

 今日の記事は、「知らなかったの・・・」と、言われればそれまでの話でございます。

 

 “chal”も、まだまだ“HTML”修行中の分際ですからね!

 

 前回、ちょこっと、ご紹介した(サイドコンテンツ:行列のできる店のラーメンシリーズ)なのですが、過去記事に追加した文章の、バックグラウンドの色を変更したり、枠で囲んだりしたいと考えていたのです。

 

 HTMLで書きたくても、エディター設定の変更も、“伝統的に重い?ソネブロ”では、大変ですしね・・・!

 

 と、言う事で、CSSで、お気に入りの設定をして置けば、使いやすいのではと思い、色々やってみました。

 

 CSSの編集は、「デザイン」「テンプレート管理」から、現在使用中の“タイトル”をクリックすれば、CSSの編集(スタイルシート編集)が、出来るように成ります。

 

cssedit01.jpg

  

 ここで、何処でも良いので、下記の記述を、CSSに埋め込んで、保存します。

 

/* waku1 /*

.waku1

{

border: 2px dotted #dddddd;

padding: 5px 5px 5px 5px;

background: #ffffcc;

width: 500px;

overflow: auto;

height: auto;

}

 

 記述の詳細を書くと長く成るので省略しますが、枠線の位置・形状・色・太さ・背景色・・・の設定をして置きます。

 

 同じ、記述で、“waku2”・“waku3”・・・の様に、お好みの設定をしても良いかも知れません。

 

 記事の新規作成に戻って、記事を書いて行きます。

 

 ココから、枠書きにしたい所で、エディターの“HTMLの直接編集”のボタンを押して、

 

htmledit01.jpg

 

<div class="waku1">

 

 と入力して、一番下にある“挿入”ボタンを押します。

 

 エディター上で、枠内の文章を完成させます。枠を終了する時は、上記と同じ要領で、

 

htmledit02.jpg

 

</div>

 と入力して、“挿入”ボタンを押します。

 

 記事をセーブしてから、プレビュー画面で確認してみて下さい。枠書きが出来ていると思いますが・・・。

 

 こう言う記事の説明は難しいですね。分かっていただけたでしょうか?

 

 堅い話はこの辺にして置いて、昨日の晩御飯をご紹介します。

 

 中華料理2点です。一皿目はご存知、「青椒肉絲(チンジャオロースー)」です。

 

“ピーマンと細切り肉の炒め”です。今回は“豚肉”ですが、本当は“牛肉”かもしれません。豚しゃぶ用の薄切り肉を使ったので、ちょっと“グチャグチャ”になってしまいました・・・。

 

P2270021.jpg P2270027.jpg

 

 食材は、豚肉・ピーマン・セロリ・タケノコです。

  

 調味料は、中華スープ・オイスターソース・生姜・醤油・老酒です。材料は全て千切りにして、肉に老酒・片栗粉・中華スープで下味を付けます。

  

 本当は、各具材を油通しするのですが、油が多く成るので、肉以外は、大さじ1杯の油をまぶして、電子レンジで“チン”して置きます。

  

 肉が炒まった所で野菜を投入。野菜から出た水分は入れません。最後に合わせ調味料を加えて、30秒で完成です。

 

P2270028.jpg P2270029.jpg

 

 “チン”の効果で、油も少なく、野菜もシャキシャキですよ。

 

 二皿目は、「西紅柿炒鶏蛋(シーホンシーチャオジータン)」です。

 

 なんだかよく分かりませんね? 単なるトマトの卵炒めですよ・・・。中国語では、“トマト=西紅柿”、“卵=鶏蛋”なんですね・・・。

 

 材料は、卵・トマト。調味料は、塩・胡椒のみです。これは、超簡単スピードレシピです。

 

P2270022.jpg P2270024.jpg

 

 あらかじめ、卵に塩・胡椒。今日はミニトマトで作ります。トマトの皮を剥いて、多めの油で潰しながら炒めます。

 

 卵を加えて1分で完成です。

 

P2270025.jpg P2270026.jpg

 

 炒め過ぎは禁物。“生かな~”位かちょうどです。

  

 余熱で十分に卵に火が入るので大丈夫です。とにかく、強火で一気に勝負あるのみ。シンプルなだけに、ごまかせない、腕の違いが出る一皿かも知れません。

 

 今日のお昼ですが、昨日の余った炒め物をあんかけにして、“固焼きそば(皿うどんの麺)”にかけてみました。トッピングは、もちろん“老干媽(ラオガンマー)”。

 

P2280031.jpg

 

 赤・緑・黄色・白で綺麗でしょ! お酢(黒酢)をかけて。いただきま~す!

 

 名付けて“合体中華あんかけ焼きそば”。これ、残り物ですが、なかなか行けます。

 

 ☆☆☆。週末のお昼に如何でしょうか!

 

 今回の投稿から、「絵文字・色・フォントサイズ」等の、装飾を極力抑えるようにしました。

 

 理由は簡単。記事が“読みにくい”からです。文章の装飾にも時間がかかりますし・・・。

 

 「西紅柿炒鶏蛋(シーホンシーチャオジータン)」では無いですが、

  

 シンプルなのが一番ですね!

 

 


nice!(26)  コメント(27)  トラックバック(0) 
共通テーマ:グルメ・料理

nice! 26

コメント 27

momotty

HTML言語、難しいですよねー。
未だにセンタリングとか強調文字くらいしか・・・
書けません(初心者です)

お肉、チンでもOKなんですね。
チンジャーロースはよくやるのですが
油をかなり使うので、チンだと
ヘルシーに出来ますね。やってみます(*^^)v
by momotty (2010-03-06 12:23) 

水郷楽人

いろんな機能がありますね。まだ十分知識を習得仕切れない状態の水郷です。。
by 水郷楽人 (2010-03-06 15:50) 

ピンキーリング

卵、もうちょっと・・・と焼くと硬くなりすぎますね^^;☆
by ピンキーリング (2010-03-06 17:15) 

kurizo

HTMLはわかんなくなるといつも会社のWEBデザイナーにHTMLを作ってもらって、そのままコピペなんてことが多いです[__あせあせ]
トマトオムレツかなーと思ったら、見事に外れました(笑)。
固焼きそばに、黒酢は本当にいい感じになりますよね。
普通の酢ではダメです[__わーい]
by kurizo (2010-03-06 19:45) 

ナビパ

実は私は大のパソコン音痴なんですよ^^;
by ナビパ (2010-03-06 20:00) 

みぃ

パソコン音痴なので、息子に教えて貰うのですが、理解出来なくて怒られてばかりです。
理解しようとする気持ちが足りないのだとか・・・。苦笑^0^
ラオガンマーってどんな味なのでしょうか?
どんな料理に使う物なのでしょう…?!
恥ずかしながら、見た事も使った事も有りません。
by みぃ (2010-03-06 20:45) 

こうちゃん

HTMLとCSSの本を買ってきて
勉強しましたけど、blogのデザインでギブアップでした。><
by こうちゃん (2010-03-07 00:18) 

genpati

HTML書けるなんてすごいです。
尊敬です。
自分も将来的にはなんて思ってるんですが。
あれやりたいこれやりたいが、多すぎて
目移りしてたりします。
by genpati (2010-03-07 01:06) 

kido_azusa

青椒肉絲(チンジャオロースー)好きです。電子レンジをつかってシャキシャキのものができるんですね。余分な油分がないのもいいです。やってみます。
by kido_azusa (2010-03-07 10:36) 

michie

チンしてから炒めるのですね、そのひと手間が
味の違いになるのですね!
HTMLは???です。
数字をいじってみては、プレビューで確認して、
その時は分かったつもりでも、もう忘れちゃいました^^;
by michie (2010-03-07 12:18) 

たぁ

Blogやる前は、HTMLでサイト立ち上げて毎日日記書いてました。
もうすっかり忘れましたが(^ ^;
by たぁ (2010-03-07 13:04) 

[hana]

私はフォントだけいつも変えてから本文にとりかかってます。
HTMLも少し勉強しましたが、HPからblogが自分の主流になり、
私の中であまり使わなくなってしまいました。
まるっきりの独学なのであやふやな部分も多いです…。
by [hana] (2010-03-07 18:53) 

takui

うぅぅっっHTMLアレルギーが・・・(笑)
これは何回覚えようと思ってもダメなんですよね・・・・(汗)
トマトと卵の炒め物美味しそうです。
トマトの甘みが引き立ちませんか?
by takui (2010-03-07 20:15) 

prost

昔は、flash使って文字を動かしたりしてみたものの
すぐに挫折・・・。HTMLもすぐに挫折・・・。
今のブログも、もっとこうしたい!という気持ちはある
もののどうしたら良いか分からず・・・。
by prost (2010-03-07 22:59) 

kappa

私も投稿の時は最初に文字の大きさなどを指定したHTML文をを入れているのですが、最近はブラウザによって表示のされ方が変わってしまい、どうしようか悩んでいます。表も以前はHTMLで記載したこともあったのですが、画像で貼り付けた方が遙かに楽なので最近はやらなくなりました。
ところで、レシピの中の油を掛けてレンジでチン!は色々な料理に使えそうですね。ウチはIHなので中華は火力が弱くてどうしてもべちゃっとしてしまうのですが、この方法なら美味しく作れそうです。
by kappa (2010-03-08 01:07) 

の

PC関連、、[__あせあせ]、、、、、、、
ウチ、、分からんし~[__もうやだ~]
「キー打って字、書けりゃエエ」思ってますデス~[__わーい]
by (2010-03-08 10:42) 

chal

momotty様
私も少しずつ、人のHPのソースを見たりして、勉強中です。ようやく、タグ辞書を見ながら、なんとか使える程度に成りました。最近は、なんとか、スタイルシートの方もいじれるように成りました。
”油コーティング/チン作戦”は、普通の野菜炒めなんかでも、使えますので、お試しください。

水郷楽人様
別サーバーに、練習用のHPが有るので、実験しながら、ちょこちょこ現況中です。

ピンキーリング様
流石ですね。ばれちゃいました! 撮影が遅れたので、余熱で火が入りすぎちゃいました。

kurizo様
近くに作ってくれる人がいると、本当に便利ですね。仰る通り、トマトオムレツですよ。呼び名を”中国語”で書いて見ただけなので・・・・。固焼きそばに、お酢をかけると”餡”がゆるく成るので、固めに作るのが良いかも知れません。

ナビバ様
いえいえ。ブログの写真は何時も凄いな~、と思いながら、読ませて頂いてます。

みぃ様
目的が有れば、自然とやる気も出て来るのでは・・・。
老干媽(ラオガンマー)は、島ラー油みたいな物です。宜しければ、こちらで!
http://beltusouseikatu.blog.so-net.ne.jp/2009-11-26

こうちゃん様
そちらのブログのソースコードを見て、結構勉強させて頂いてます。

genpati様
最近、ちょこちょこCSSをいじっているので、ブログの表示が毎回違って、読みにくいかも知れません。すいません。

kido_azusa様
ありがとうございます。投稿写真を見てお分かりかも知れませんが、お皿に水分と油が殆ど溜まりません。これぞ”チン”の下処理効果だと思います。

michie様
私も出来た瞬間に、どんどん忘れます。タグ辞書・カラーチャート・ソネブロのスタイルシートのリファレンスを、お気に入りに登録してあります。当ブログで、忘れないように、なにも見ないで、実践練習中でございます。

たぁ様
一度覚えれば、2度目は早いですよ・・・。昔に比べれば、随分、楽に成りましたよね!

hana様
私、文書だけは、WORDから、コピペして来るので、無駄なタグが一杯です。まあ、写真の容量に比べれば大した事ないと思うのですが、塵も積もれば・・・ですよね!

takui様
HTMLアレルギー。直す薬は一杯有りますよ! トマトの”甘み”より、”酸味”が引き立つ一品です。単なる、”トマトオムレツ”ですが・・・

prost様
私、人のブログのソースをコピペして、自分のHPで動作確認をしています。HPの場所は秘密?です。やれば如何にか成るもんですね! 理解するまで、時間は結構かかります。

kappa様
私も、結構画像にしちゃう方ですが、容量が多く成るので、最近は、頑張ってHTMLでなんとかしたいと思ってます。
”油コーティング/チン作戦”。お試しください。女性の、プロの方(名前はど忘れ!)の受け売りですが・・・。

の様
確かに、仰る通りです。趣味で?、勉強を兼ねてちょこちょこやっています。成果は、なかなか現れませんが・・・

by chal (2010-03-08 17:02) 

プラダ 店舗

今日は よろしくお願いしますね^^すごいですね^^
by プラダ 店舗 (2013-06-29 16:18) 

victria s secret

ビクトリアズシークレット
by victria s secret (2013-08-05 20:50) 

腕時計 価格

グッチ 腕時計 価格 http://www.shoppingforcapitaljp.pw/
by 腕時計 価格 (2013-08-13 17:44) 

catz hid

しかし、1は、<a href="http://ulh6pzt3e.doitinvt.com" title="PIAA HID hb4">PIAA HID hb4</a>のブランドの全65品種間であなたのためのスーツに最適<a href="ht 0443A5D651EE199CE5E5E16B542B6CF3 tp://cg69s7aix.doitinvt.com" title="エスティマ HID 交換">エスティマ HID 交換</a>ダンクをチェックし、利用するために最善のディーラーを選択する必要があります。 あなたの自己のための<a href="http://ulh6pzt3e.doitinvt.com" title="PIAA HID hb4">PIAA HID hb4</a>のハンドバッグファストを習得すると、いくつかの、それ以外のはさらに難しい個々のために取得するためにほとんど不可能です。 <a href="http://2sqbkujt4.doitinvt.com" title="h4 HID デュアル">h4 HID デュアル</a>トレーナー1の前身として、<a href="http://5etjivtcg7.doitinvt.com" title="hidバルブ 比較">hidバルブ 比較</a>エアトレーナーは、それが1987年に生まれて以来、<a href="http://jud2ohdox.doitinvt.com" title="hidメーカー">hidメーカー</a>エアトレーナーのフォルダであることが評価されています。 「<a href="http://nwp4tkk4c.doitinvt.com" title="fcl HID 口コミ">fcl HID 口コミ</a>とヨーロッパ」の関連記事テレコムスクエア、「Wi-Ho!」世界周遊タイプの利用エリアに19カ国を追加テレコムスクエアが提供する海外用モバイルWi-Fiルーター「Wi-Ho!」にて、ビジネス世界周遊タイプの利用可能エリアが拡大。 catz hid http://8fs2utvuc3.doitinvt.com
by catz hid (2013-08-18 06:39) 

モンクレール

This web site is really a walk-through for all of the info you wanted about this and didn't know who to ask.Glimpse here, and you'll definitely discover it.
[url=http://www.monclerdown2014.com/]モンクレール[/url]
by モンクレール (2013-09-14 21:51) 

ブランド時計ランキング

アルマーニ 時計 値段
by ブランド時計ランキング (2013-10-05 16:11) 

セイコー クォーツ

セイコー メカニカル
by セイコー クォーツ (2013-10-05 16:12) 

プラダ 財布 ピンク

And this season, our new model is to be more prominent in the brand, was actually the Prada show experience. Particularly remarkable, and it appeared to show that the model in Prada Milano Mens Collection was carried out in June. Expression and ホリー?ローズ?エメリー sulky face, baby, face, she was the marina.
プラダ 財布 ピンク http://www.ed.city.kasama.ibaraki.jp/el-kasama/blog/Prada1015-1.html
by プラダ 財布 ピンク (2013-10-23 02:47) 

シャネル 財布 公式

"Super cute bag, 锝烇紒銆?
シャネル 財布 公式 http://www.takebe.jp/blog/data/chanel1022.php?product_id=63
by シャネル 財布 公式 (2013-10-23 15:57) 

グッチ 財布 コピー

On the other hand, "" Ballerina compositions used in the VOGUE JAPAN and GUCCI collaboration project. A fascinating gothic in esoteric atmosphere and elegant melody track complex involving the works produced by Wolfe Gang Gartner. Video clip in YouTube open, GUCCI 2013-14, autumn / winter collection Namie in appearance. The Neonlight Lipstick "beatniks" and "song of prior distribution in Ballerina 'either.
グッチ 財布 コピー http://tttr.net/a/gucci1023.php?product_id=36
by グッチ 財布 コピー (2013-10-25 22:13) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 0

桃の節句仕込中(その3) ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。