掲載:2019年11月05日
20191105-01_s.jpg20191105-02_s.jpg 小生のブログはクールと言うより、簡素。昔は、装飾用画像満載のHPやブログを何度も作って来たが、その時点でも求めた物は表示の早さ。如何に軽い画像を綺麗に作るか、其れが求められた。

 今はWiFiでもギガの出る時代、しかしmobileの始まった時の通信速度は有線電話の半分、確か32Kbpsだった。

 そう、今はスマホのギガを使い切った時に行われる”低速”、Softbankの場合は128Kbps、auの場合は256Kbps、思えば相当に早い。当時はネットで動画を見るなど考えられなかった。

 画像も一度で現れるのでは無く、順次見えて来ると言う今では懐かしいが(爆)、その様な事も知られない年代の方が今は多く居られる昔ばなしので今は昔ばなし。

 時代も進みHTML/CSSで出来る事も進化、昔は画像でしか出来なかったバーナーのエッジのR付け、透明化、究極のCSSのみで書かれた「ドラえもん」を見てびっくりした事、その「CSSドラえもん」を携帯の壁紙にした事も懐かしい。

 CSSドラえもん、ブラウザにより見え方が異なる事も面白い。自分は、〇に成らない□のドラえもんを「角えもん」と名付け、多分一番長い事自分の携帯の壁紙に成っていた。

 自分の電話がガラパゴスからスマホに変更に成って、ロック画面は「ドラえもん」、HOME画面は「角えもん」の壁紙、今も是に時々切り替える。この変化が面白い。

 自分のこの歳に成っても「ドラえもん」、やはり「ドラえもん」って凄いと思う。

 その様な事から、画像投稿も文字で!と考え以下の様なテストをした事も有りました(爆)。この時の結果は、画像を文字投稿にしても容量は小さくは成らない。

※ アイコン(画像)をBase64で表示して見る:
 https://m-jun.seesaa.net/article/167866418.html

 其処で、ブログからは殆どの画像を排除してブログを現在の形にして5年、今回、CSSに3か所追加して少しブログの見え方を変えてみました。

 Google先生には直ぐにCSSの圧縮を言われますが、圧縮は元に戻せない、維持するには圧縮前CSSを保管する必要が有る等のデメリットを考え、自分はそのまま、しかも変更が後から判る様に”コメント”を付加しています。

 自分の先生は多くの皆さんの書かれたネット情報、自分も同様に皆さんの参考に成ればと実際を公開。

 殆どの物全て、ネットで探せば方法が公開されています。今の時代は本当に有り難い。

 今回の変更は以下CSSの3ヶ所。

 指示方法に2か所、4か所の違いは色々なテスト跡。指示に0と有るのも同様(普通0なら指示不要、今後のために置いてある)、細かい数字の異なりは、計算機や頭の中に出た数字をそのまま(爆)。”実験結果をそのままブログに利用しているため、自分のCSS内部は汚いです”。下記URLの本体を見ても同様数字です(爆)。

 そう、元のCSSからの改装そのまま。未だCSS内にピクセル指示の所も有るが、関係の無い物はそのまま置いて有る。曰く改装途中、配布する訳でも無いので動けば良いの方式・・・。

 色も、その場のデスクトップに有る色からツールで拾った物で、統一性が有りません(爆)。従って、指示方法のみで、数値などは参考には成りません(爆)。

 ----------

#banner{
background-color:#f1f1f1;/*** バーナー背景に薄い色を追加 ***/
padding:0em 0em 0em 0em;
margin-bottom:0em;
text-align:center;
border-radius: 0.6em 0.6em 0em 0em;/* 上角を丸くする */
text-shadow:0.06em 0.18em 0.18em #513c3c;/* 文字に影を付ける */
}

/***********************/
/* 画像周囲スペース */
#content img{
border: none;
margin-top: 0.312em;
margin-right: 1.000em;
margin-bottom: 0.360em;
margin-left: 0em;
/* 画像周囲白色 */
padding:0.2em;
border:0.063em solid #ccc;
background:#fff;
border-radius: 0.1em;/* 角を丸くする */
box-shadow: 0.063em 0.063em 0.313em rgba(20,20,20,0.2);/* ドロップシャドウ 【横位置 縦位置 ぼかし幅 色】の順に記述 */
}
/***********************/

#footer{
background-color:#f1f1f1;
border-radius: 0em 0em 0.6em 0.6em;/* 下角を丸くする */
text-shadow:0.06em 0.18em 0.18em #513c3c;/* 文字に影を付ける */
clear:both;
}

 ----------

※ このブログのCSS:
 https://m-jun.seesaa.net/styles-index.css
※ ブログに適用指示(rel="lightbox")不要の最新版「lightbox_plus」の設置方法:
 https://m-jun.seesaa.net/article/169264990.html

※ CSS3 ドラえもん - Pure CSS Design:
 https://search.yahoo.co.jp/search?ei=UTF-8&fr=crmas&p=CSS%E3%83%89%E3%83%A9%E3%81%88%E3%82%82%E3%82%93
※ 画像を一切使わずにCSS3だけでドラえもんを描いてみた!:
 https://shopdd.jp/blog-entry-932.html
※ ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!:
 https://shopdd.jp/blog-entry-984.html
※ 画像を使わず、HTMLやCSSで作られた凄い作品のまとめ:
 https://www.nxworld.net/inspiration/html-and-css-only-amazing-artworks.html

   (*^‥^*)」 イヨッ


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

このブログの人気記事 (直近24時間)
    最 新 記 事
    ×

    この広告は180日以上新しい記事の投稿がないブログに表示されております。