2024/06/25　もっとサイトデザインに手を加える

各ページで採用していたテーブル＜table＞の構造。
もう古臭くなったので、以下のようにカード形式に切り替えてみました。

HTML部分
<div class="card">
<p class="name"> タイトルなど </p>
<p class="come"> 記事・本文など </p>
</div>

CSS部分
.card {
border: 2px solid #000080;
border-radius: 4px;
height: 100%;
}

p.name {
background-color: #5e5ee9;
padding: 8px;
font-weight: 600;
font-size: clamp(0.875rem, calc(0.7954545454545454rem + 0.36363636363636365vw), 1rem);
color: #fafdff;
}

p.come {
padding: 0.8rem;
background-color: #dfe7ff;
font-size: clamp(0.875rem, calc(0.7954545454545454rem + 0.36363636363636365vw), 1rem);
}

さて、スマホ画面から見た際に、ヘッダーナビメニューがはみ出す状態になる。
折り返そうか、ハンバーガーメニューを採用しようか、タブ切り替えにしようかを思案中。

あとは、ボタンのデザインをどうしようかってところ、一通りデザインを変えたら考えてみようか

2024/06/21　サイトデザイン変更する

前回、バナー画像ページにGridレイアウトを適用してみましたが、
どうもレイアウト中身がカチャカチャしてたので、見直してみました。

また、Gridレイアウトとは？と改めて確認・再勉強しました。
順番にすべてのページにGridレイアウトを適用しています。

パンくずリストにGoogleフォントのアイコンを適用してみました。
ヘッダーナビメニューにドロップダウン風のサブメニューを追加してみましたが、
どうもヘッダーナビメニューが長すぎる問題がでています。

あと、スマホ画面でも確認できるよう、レスポンシブにも対応してみています。
”＠media”とか”Clamp（）”とか、面白いように対応できるのがいいです。

2022/05/11　FlaxレイアウトからGridレイアウトへ

現在、ページの縦割りをヘッダー・メイン・フッターに分けており
「Flexbox」レイアウトで全ページに割り振っています。

バナー画像ページに「Gridbox」レイアウトを採用してみました。
順番に全ページへ「Gridbox」レイアウトに変えていく予定です。

また、なんとなくパンくずリストがシンプルに作っているので、
もう少しデザインを加えてみようかなと考え中です。

上部ナビメニューも個々の横幅を変えてみたり、配置を左右どちらにしたらいいか模索してます。

2022/04/29　上部ナビメニュー全ページ適用

おおよそ１ヶ月近くかけて、全ページに上部ナビメニューを追加しました。

これによりどこからでもそれぞれのページにアクセスできるようになった。

また、ページの縦割りレイアウトに「Flexbox」を使ってみたが、どうも「Gridbox」でもできるらしい。
順番に「Gridbox」に切り替えてみようかと考えている。

あとは上ナビメニューに細かいページにアクセスするためネストメニューを追加すること
お知らせ・趣味・ゲストブック・日記のそれぞれにサイドバーメニューでも追加してみようかと考え中。

2022/04/01　日記ページの画面分割や微修正

以前の日記で画面分割（レイアウト）をあれこれ考えてたが、コードがスッキリしていないと思い、
結構シンプルなコードで書き直してみました。

レイアウトとして縦方向に画面をヘッダー、メイン、フッターの三分割にしてみました。
また、CSSも至極シンプルにしてみました。

.container {
display: flex;
flex-direction: column;
}

このレイアウトにするだけで、かんたんに三分割に割り振ることができます。
レイアウトに加え、パンくずリストをメイン内に入れ、見出し上部に配置したり
見出しの幅を変えてみたりしてみました。

あとはフッター周りを調整する予定です。
青色ボタンをどうするかを考え中・・・。

2022/03/28　トップページにメニューバー追加

だいぶ放置でものぐさですが２年ほど前からページ上段に
メニューバーを起きたいなーと考え、試行錯誤してました。

やり始めたらCSSの組み合わせとか難しかったですが、なんとか形にすることができました。

とりあえずトップページだけ反映させてまして、このあとページ各所に反映させます。
なお、トップページからページ各所に移動するためのコンテンツページは廃止するつもりです。

折角作った青色メニューボタン・・どっかでつかいたいな・・。

2020/05/06　見出しｈ１・ｈ２の調整

見出しの文字で上下左右の周り余白「padding」をいじってみた。

最初はピクセル指定（px）でやってたが、どうも上下の高さが合わない。
そこで思い切ってイーエム指定（em）に変えてみた。
少しずつ数値を変えてみて、いい具合に高さを合わせることができた。

また、見出しの幅もパーセント指定（％）からイーエム指定（em）に変えてみた。
イーエム指定（em）は、単位になるが、文字の大きさを中心に、
上下左右などの余白とか決められるとのこと。

文字の大きさを小さくすれば、それに伴って余白やらが縮まってくるという代物なのです。

2020/04/27　見出しで文字配置の調整

ページの画面配置をやってみて、それぞれの画面幅に合わせて
CSS内で見出しの幅をパーセント指定（％）していたら、縮んでしまった。

ピクセル指定（px）にしてみたり、パーセント指定（％）で幅を広げたり、引き続き調整している。
また、文字の配置がどうも少し上に寄っているようにも見える。
上側のpaddingを少し多く高さを取ってみたりした。

自前のPCから見ると問題ないようだが、他のPCから見るとほんの少し下がって見えた。
ディスプレイの画面サイズで見え方が違っているようで、もう少し調整する必要あるみたい。

2020/04/22　日誌に記述したコードの調整

日誌ページ内に、HTMLコードをそのまま記述してみるってことしてみた。

＜＞を特殊文字で記述するのをわからず、そのまま大文字で書いたりしていた。

このままでは、無格好と思えたので、調べてみると
「pre」（整形済み）のタグだったり、特殊文字に置き換えることが分かった。

改めて＜＞を特殊文字に記述しなおして、「per」に対して背景色とか左寄せとか
CSSも書き足したりして、形にすることができた。

2020/04/13　日記ページの画面分割とちょっと調整

縦方向の画面分割、あれこれ考えてみたら、わりと簡単にできた。
大きな親要素のflexboxの中に、子要素のflexboxを囲っておいてやればいいだけだった。

例えばこんな感じ。

<div class="oyayouso1">
　<div class="koyouso1">
　　コンテンツ内容（ヘッダー・見出しとか）
　　<div class="oyayouso2">
　　　<div class="koyouso2">
　　　　コンテンツ本文
　　　</div>
　　</div>
　　コンテンツ内容（フッターとか）
　</div>
</div>

"oyayouso1"と"oyayouso2"には、CSSで「display」のflexを使う。
"koyouso1"と"koyouso2"には、CSSで「flex」で１とか２とか数値で割り当てる

こんなことやって反映してみたら、見出しの「h1・h2」の横幅が縮んでしまった。
どうもCSSで横幅を％（パーセント）で指定していることと、
左右の両端の隙間を設けたことで、真ん中の内容に合わせて横幅が縮んだようだ。
仕方なくピクセル指定へ変更してみた。

2020/04/11　日記ページの画面分割

日記ページの画面分割、やんわり考えてみる。

まずこのページから手始めてみようかと・・。

直に色々と触る前に、別にテストしてみて、対応できることを確認した。
とりあえず対応してみた。
順次、他の日記ページに適用していくー。

ん～、縦の画面分割ってできないだろうか・・。

2020/04/08　ページ画面の分割割り当て

日記ページから手始めに、1ページ内の左右を割り当てて、
中央に文章などのコンテンツを並べて表示させる。

そのうえで、CSSにて「display」のflexを使うことで、
画面（コンテンツ）の割り当て配分ができるそうな。

さて、上手くいけるかなー？

2020/04/03　日記ページまとめる

時間（とき）の日記ってことで、過去・現在・未来をただただ書き綴ってたが、
３ページに分ける必要もないなと思ってしまった。

なので、一つのページにまとめることにして、過去の遺産扱いにした。

単に保守・更新で揃えるのが面倒なだけだったり・・。

2020/04/01　デザイン更新してみたい

２年ほど前、ただのリンクをボタンに変えてみる。
CSSでデザインを変えてみるってことしてみた。

なんとなくこれでもいいかーって考えたが、どうもページ全体を見返して古臭くなった気がしてきた。
イマドキのデザインに変えてみたいと思ってる。

文章とかをほぼ左寄せしてるが、表示を左右均等に割り振って
背景白として内容を並べてみるのもわるくないかなっと。
あとは、ページ上部に切り替えできるメニュー設けたいかな。

まずはメニューの表示についてCSSをもう少し詳しく確認してみるつもりです。


・・後書き、日記の内容（ここだけ）をCSSでボックス表示してみました。・・