独学!Webサイト構築日誌

17日目:ゆっくりスタート。

12:00

おはようございます、こんにちは。
昨晩の頭痛から熱に移行し、水とポカリスエットの力で大分楽になりました。ただの風邪のようで安心ですが、念のためいつもよりゆっくり行動しています。部屋はスモーク臭が凄いけど。

では、今日の目標は故知覧。
  1. 日誌一覧画像にhover付ける。
  2. メニューバー固定。

1.日誌一覧画像にhover付ける。

簡単なのは昨日作ったものの、「カッコ良さより分かり易さだな。キリッ」とカッコつけて、拡大表示することにしました。参考にしたのはココ
            
/*日誌一覧関係-------*/
.p-diary ol{
border:none!important;
}
.p-diary a{
text-decoration: none;
}
.p-diary img{
position:relative;
top:3rem;
left: 3rem;
float:left;
width:25% !important;
border-top: 4px solid #d8dcdc;
border-right: 4px solid #666;
border-bottom: 4px solid #333;
border-left: 4px solid #868888;
border-radius: 0;
}
.p-diary .fullBody{
float:left;
width:100%;
margin-bottom: 5rem;
}
.p-diary .rightBody{
float:right;
width:60% ;
margin: 0 1rem;
min-height: 100px;
}
.p-diary .fullBody img:hover{ ←ココ追加したよ。
box-shadow:		1px 2px 3px #000;
-webkit-transform:	scale(1.5);
transform:		      scale(1.5);
-webkit-transition:	all 0.3s ease;
transition:		all 0.3s ease;
}
            
        
拡大表示するにあたって諸々弄りましたが、主な変更点は最後の.p-diary .fullBody img:hover部分です。

13:30

2.メニューバー固定。

これ先にやらないと、次のレイアウト変更が出来ないことに気付いたので、先にこれやる。

15:30

position: sticky;が全くいう事聞いてくれません。例えばh1に対してなら問題なく動きますが、フッターメニューには効きません。何でよ。iframeがイケないの?

16:00

原因はiframeでした。ということは、phpを学んだあとにやった方が良いですね。今更ヘッダー/フッターを手作業で張り直ししたくないです。

17:00

日誌画面のレイアウト変更を検討しましたが、現在検討しているものだと、 利点:目標の項目にすぐ飛べる。
欠点:横幅が狭くなりサイドバーとほぼ変わらない。
という点を踏まえ、実装を止めました。


22:00

燻製機弄ってました。
全然関係ないけど、これまでの進捗を記載しておく。
  1. ガスコンロでフライパンを使い、燻製チップを試す。
  2. →ガスコンロの温度センサーに引っかかり、燻製チップから煙出ず。
  3. 魚焼きグリルで煙出させてからフライパンに入れる。
  4. →煙は出たがすぐ止まる。
  5. 2の状態でフライパンを加熱。
  6. →煙は出続けたが、中の食材が焼ける・焦げる。
  7. ガスコンロで木炭を焼いて、フライパンの燻製チップの上に置く。
  8. →酸素不足で火が消える。
  9. 金属台の上に焼けた木炭と燻製チップを置いて、段ボールをコの時に被せて燻製する。
  10. →隙間が多すぎて、煙が逃げるので上手に燻製されない。
  11. 下から順に、金属台、金属の器、木炭・燻製チップを置いたものを、アルミで内部を防火処理した小型の段ボールに入れる。
  12. →今ココ。
今度こそ上手くいくんじゃないかと!
燻製するものは、鶏肉・魚の切り身・玉ねぎで固定しているので、上手に行けば違いが分かります。次回は2日後だな。


Webサイト構築日誌は明日も更新するので見に来てね。ハート



Before: 16日目

Before: 16日目

After: 17日目

After: 17日目



作成日:2020/12/29 - 更新日:2021/01/26

≪ 16日目≪ 一覧に戻る ≫18日目 ≫

HOME > 日誌一覧 > 17日目:ゆっくりスタート。