チコちゃんに叱られないブログ

人生は雑多なのです😋

役に立たないブログが役に立っている風な記事を書くんじゃないよ😎

2022年2月23日 

 

拝、灰、廃、獰猛どうもうです。

中高年の星☆爺婆の太陽 の静吉プレゼンツでございます😍

f:id:i-shizukichi:20211124102007g:plain

他の方のブログなんてほとんど興味がないのですけどねえ、それでもCSSなどを実装したいときなどには参考になるブログを探して閲覧するのですけど、まあ役に立たないたたないこと甚だしい。

 

いささかその役立たしさに頭にきてこの記事を書いています。

CSSとはいわゆるスタイルシートのことです。

 

CSSCascading Style Sheets の略なんですけど、そんな情報だって ああた 欲しいと思いますか?

 

いらんよね。

 

要するに CSS は HTML の見かけを修飾しゅうしょくするもので訴求力を高めるための飾り付けです。CSS じゃなくても文字の大きさを変えたり色を付けたりHTML でもできますけど、それ以上のことが CSS では出来るのです。

 

HTMLってなにってときは、ブログ編集でHTML編集ってのがあるので見て下さい。もしくはウェブページを右クリックしてHTMLソースを表示してみて下さい。つまりはブラウザで文書を表示し、その文書に画像を呼び出し表示したりリンク先に移動できる仕組みになっているものです。この文章の下にある罫線は画像なので、この画像は呼び出して表示しているわけです。

f:id:i-shizukichi:20211222160356p:plain

 

HTML自体はマークアップ言語(タグで囲まれた記述)によって出来上がったテキストです。

 

ブロガーの多くはシステムエンジニアになろうとも、Webデザイナーになろうとも思っていなくて、記事が書ければよいだけの人が99.99%だろうと思います。

 

CSSを知らなくても記事は書けますが、どうしたって我ら凡人の書く記事などしれていているので、そこに何らかの工夫を入れて、少しでも記事に目を引きたいとCSSを使ってみようかなって思います。

 

つまりCSSをブログに実装したいだけで、スタイルシートの理屈などどうでもいいのです。画像にドロップシャドウを付けたければドロップシャドウのCSSを提供してくれればありがたいのです。

 

そこに細かい説明は不要なんです。

 

細かい説明は要らないから、即使えるCSSをここここに貼り付ければOKですよでいいのです。

コピペですぐに実装出来る。

これです。

 

実はなぜCSSで役に立たないブログって思ったのかがですね、やつがれのブログカードの記事の中の画像のバックが白いので、記事と画像との境界が分かりにくいので画像にドロップシャドウを落としたくて検索で調べて、コピペですぐに使えるCSSの記事が見つからなかったからなのです。

 

i-shizukichi.hatenablog.com

 

いや、「はてなブログ」「画像にドロップシャドウ」で検索すればたくさんサイトがヒットします。

 

それらのブログを丁寧に読めば実装方法も分かるでしょうけど、記事を読ませるために何々をしてなになだからとスタイルシートを語りから始められちゃうのは…我慢ができません。

 

  1. だって目的はコピペしてすぐに使えるCSSが欲しいだけなんだもの。
  2. 生活の役にも立たないCSSを記述していく能書きなんかどうでもいい。
  3. ぼく、難しいことわかんなくても生きていけるんだもん😵

 

 


これコピペしてね❤


 

が、欲しいだけ🥰

 

そんなわけで10サイトぐらい巡ったけど、画像のドロップシャドウをコピペで済みそうなサイトは見つからなかった。

  1. もち、何処かにはあると思います。
  2. が、見て回るほど時間はない。
  3. ブログに対し昔ほど情熱かけてないし😅

 

それらなば画像に枠線をと探したけど、これもコピペ出来るサイトは見つからなかったので、画像になっている記述を手書きで写し完成させた。

 

<!-- 画像に枠線 -->
<style>
.entry-content img {
  border : 1px solid #00ff00 ;
    box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;}
</style>

 

というわけで画像に囲み線を入れたい場合は上記CSSでできます。

 

  1. というふうに使いたいCSSを記述してあったら、そのブログ主は神様です。
  2. CSSを実装するに当たってはスタイルシートテキストのリンク呼び出しもダメですよ。消えるブログが多いのだからその時に肝心のスタイルシートテキストが亡くなっちゃったら肝心のCSSが役立たずになる。
  3. CSSはブログのパーツであってCSSがなんちゃらは要らない。

まあ、極論ですけどね😅

 

実装は薄緑の中のCSSをコピーし、はてなブログ設定詳細設定で「<head>要素にメタデータを追加」に貼り付けるだけでOKです。

 

  1. border : 1px solid #00ff00 ; の太字部分は枠の色を変える事ができます。
  2. box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;} の太字を含め数字部分を変更することで、画像枠が細くなったり太くなったりします…試してないけど多分😅

 

CSSだけ貼り付けちゃうと、後でこれはなんだったかと悩むと思いますので <!-- 画像に枠線 -->コメントアウトしておくと良いでしょう。

<!-- なんちゃら --> のように記述すると <!--  --> タグ間の文字列はブラウザには表示されません。複数行に渡っても可能です。

<!--

なんたらかんたら

ほんじゃらほいほいごきぶりほい

-->

ブラウザに表示されなくても、ソース表示でコメントアウトした文章は見ることができますので、知られたくないことは書かないように注意しませう😮

 

 

 

役に立たないブログが役に立っている風な記事を書くんじゃないよ😎

 

なんてタイトルにしたけど、それでも実際はまあなんとかこの記事を書くほどに役に立ったので、各ブログを参考にさせていただきありがとうございましたと、心から感謝の意を評したい😜😜

 

f:id:i-shizukichi:20211124102007g:plain

この記事は 中高年の星☆爺婆の太陽 静吉がお届けしました😎 

 

◇◇◇◇◇

 

 

YouTube チャンネル登録

  

Amazon.co.jpアソシエイト

ミニショルダー

スマホ

日常は非日常時代へ

持とう・ミラーレス一眼

パソコン

Amazon Prime お得♡

パナソニックミラーレス一眼

 

f:id:i-shizukichi:20200621012743j:plain