はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

大谷選手地区優勝!

大谷選手、やっと次のステージに進むことができましたね。

エンゼルスではずっと優勝争いから遠かったけど、やっぱりドジャースは強かった。

www.instagram.com

アメリカのプロ野球のシステムはよくわからないけど、地区優勝の先に総合優勝まではまだ2つ乗り越える壁があるのかな?

レギュラーシーズンの先に、大谷劇場が続いていくのがうれしいですね。

今年は移籍騒ぎのあとに結婚、水原さんの事件とほんとにいろいろあったけど、野球の成績だけ見れば最高の1年になりました。

ピッチャーとして投げられてないというのは本人としては物足りない部分かもしれないけど、打者としての能力を存分に発揮するとこうなるんだ、というすごさを見ることができました。

移籍1年目で優勝となるとそれ以上の目標がなくなってモチベーションが下がらないのかな、ってふつうなら心配するところですが、大谷選手はとにかく野球することが好きという強い思いを感じるから安心できます。

強豪チームでいきいきと活躍する大谷選手はほんとに楽しそうですよね。

すごい選手なのに、ずっと野球少年に見えてしまう。

やりたいことを仕事にして、それをとことん追求して楽しむ。

理想の人生の在り方だなあと思いました。

今シーズンは大谷選手の歴史の輝かしい1ページになることは、もはや間違いないですね!

新総裁が石破さんに決定

岸田さんの次の総理大臣が石破茂さんに決まりましたね。

高市さんになりそうな空気だったのでちょっと意外でした。

 

石破ショック

株式市場の先物がすごいことになってます。

 

石破さんはもともと金融所得、いわゆる株で得た利益に対する課税強化や法人税所得税の負担を引き上げたいという発言をしていました。

当然市場にとってはものすごい逆風です。

岸田さんが「貯蓄から投資へ」とさんざん誘導しておきながら、そこに課税強化するのか!という空気もあるでしょう。

ただ、今はNISAの非課税枠が1800万円分あるので、お金持ち以外は今まで通りこつこつ投資を続けていけばよいのではないかと思っています。

 

夫婦別姓について

選択的夫婦別姓については高市さんが反対だったのに対して、石破さんは前向きでした。

これについては選択肢を増やすだけで誰も困らないのになんでやらないのかが不思議なテーマですよね。

古いしきたりをただ守ろうとして、不便を強いているだけのように思います。

これに関しては、高市さんは女性だけど男性以上に古くてかたい考えの持ち主な感じでした。

石破さんにしても、前向きとはいっても「絶対実現する」とまではいってないので微妙ですが。

岸田さんの時のように検討だけで終わらないことを祈ります。

 

外交について

外交はこれからますます重要で、しかも難しくなっていくでしょう。

アメリカの大統領がもしまたトランプになったら無理難題を吹っかけてきそうだし、ロシアとウクライナの戦争はまだ終わらないし、中国は意地悪だし。

そういえば韓国との軋轢は最近少ない気がしますね。

ユン大統領になって空気が変わった気がします。

トップの意思表示は重要ですね。

 

これからは石破さんが日本の顔になるわけですから、責任は重大です。

とりあえず週明けの株式市場は大きく値下がりしそうですが、そんな一瞬の現象よりもこれから先の日本のかじ取りがどうなっていくのか、新しい風に期待したいところです。

おしゃれな囲み枠 その3 2重線外枠つき

今回も見出しに使えそうなおしゃれな囲み枠を使ってみます。

参考にした記事はこちら!

 

maysun53.com

囲み枠2重線 文字黒

枠は2重線、文字は黒です。

<div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div>

 

このコードをHTML編集画面に貼り付けるとこうなります。↓

ここに文章を入力します

 

#F7F7F7が背景色、#A1A1A1が線の色ですね。

box-shadowで枠の外側の色を指定できるんですね。

「0 0 0 10px」は外側の太さかと思います。

これを変更していくつかカラーバリエーションを作ってみます。

 

・ピンク系

<div style="background: #ffefff; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #ffefff; padding: 10px;">ここに文章を入力します</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに文章を入力します

 

 

文章の長さに合わせる場合はこちら。

<div style="display: inline-block; background: #ffefff; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #ffefff; padding: 10px;">ここに文章を入力します</div>

ここに文章を入力します

 

 

・黄色系

<div style="background: #ffffef; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #ffffef; padding: 10px;">ここに文章を入力します</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに文章を入力します

 

 

枠の色を変えてみたバージョンはこちら。

<div style="background: #ffffef; border: 4px double #ffc489; box-shadow: 0 0 0 10px #ffffef; padding: 10px;">ここに文章を入力します</div>

ここに文章を入力します

 

 

・緑系

<div style="background: #f4fff9; border: 4px double #99ffcc; box-shadow: 0 0 0 10px #f4fff9; padding: 10px;">ここに文章を入力します</div>

ここに文章を入力します

 

・水色系

<div style="background: #f4ffff; border: 4px double #93ffff; box-shadow: 0 0 0 10px #f4ffff; padding: 10px;">ここに文章を入力します</div>

ここに文章を入力します

 

・紫系

<div style="background: #f9f4ff; border: 4px double #c184ff; box-shadow: 0 0 0 10px #f9f4ff; padding: 10px;">ここに文章を入力します</div>

ここに文章を入力します

 

枠の外にも枠がある感じで、より目立ちそうですね!

borderの線の種類を変えればさらにいろいろ作れそうです!

 

囲い枠作り基本 備忘録

今回は囲い枠作りの基本をまとめたいと思います。

基本の枠

1.直線の四角い枠
<div style="padding: 10px; border: 3px solid #e3acae; background: #fef9fb;">ここに文章</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

 
ここに文章
 
  • padding: 10px 余白
  • border: 3px solid #e3acae 線の太さ、種類、色
  • background: #f8f4e6 背景の色
 
◆線の種類
1本線  solid
2本線       double
破線         dashed
線なし     none

 

 

2.角を丸くする

border-radius:を追加

 

<div style="padding: 10px; border-radius: 5px; border: 3px dashed #f0908d; background: #fdeff2;">ここに文章</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

 

ここに文章

 

 border-radius: 5px 数字が大きいほど角が丸くなる

 

3.文章の長さに枠を合わせる

display:inline-block;を追加

 

<div style="display:inline-block; padding: 10px; border-radius: 5px; border: 3px dashed #f0908d; background: #fdeff2;">ここに文章</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

 

ここに文章

 

4.枠の一部だけ色を変える

  • border-top 枠の上辺
  • border-bottom 枠の下辺
  • border-left 枠の左辺
  • border-right 枠の右辺
<div style="display:inline-block; padding: 10px; border-left: 5px solid #f0908d; background: #fdeff2;">ここに文章</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

 

ここに文章
 
 
要点まとめ

基本の枠<div style=""></div>

  • 直線の四角い枠padding border backgroundの設定
  • 角を丸くするborder-radius:
  • 文章の長さに枠を合わせるdisplay:inline-block;
  • 枠の一部だけ色を変えるborder-top,border-bottom,border-left,border-right

 

トヨエツの迫力がすごすぎる!:地面師たち

今話題のネットフリックス配信中のドラマ、「地面師たち」を見ました!

「面白い」という噂は聞いてたけど「詐欺師の話かあ・・・」となんとなく見てなかったんですが、見始めたら面白くて一気に見てしまいました。

 

 

実際にあった事件をモデルにしている

「地面師たち」は実際にあった事件をモデルにしています。

こんなドラマのような事件が本当にあったのか!ということに驚きますね。

詐欺師側が主人公として描かれていて、詐欺がうまくいくのかはらはらしながら見守ることになります。

実際に起きた事件であることから、いろいろなピンチに陥りながらも最終的に詐欺が成功することがわかっているので、その点では歴史ものをみているような安心感を持ってみていられます。

積水ハウス地面師詐欺事件
・2017年積水ハウスが地面師グループに55億5千万を
だまし取られた事件。
・舞台は東京都品川区、山手線五反田駅から徒歩3分の
旅館「海喜館」。
・最終的に15人が逮捕されたが不起訴になる容疑者も
多く、真相は今も謎に包まれている。

 

 

トヨエツの悪者ぶりが秀逸

常軌を逸した豊川悦司演じるハリソン山中の悪役ぶりがとにかく秀逸。

穏やかに笑みを浮かべながら平然と人を殺していく。

立ち上る悪のオーラはトヨエツならでは。

ものすごく悪いやつなんだけど引き込まれる魅力があって、最後まで目が離せません。

 


www.youtube.com

 

 

子どもには見せられない場面多数

悪の世界を描いているためか、えぐい場面がけっこうあります。

殺しの場面や性的描写など・・・

正直わたしは苦手なほうで、目を背けるシーンも多かったですね。

ギリギリ耐えられるラインというところでした。

 

詐欺は成功するけれど、やはり悪は悪。

気分爽快な結末とはいいがたい。

「もう一度見たい!」とは思わないけど、見始めると最後までやめられない。

そんな不思議な魅力のつまった作品です。

 

背景 グラデーション+立体

今回はグラデーション+立体の背景を使ってみたいと思います。

参考にした記事はこちら!

www.moca-memo.com

 

グラデーション+立体の背景

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;"> ここに本文を入れます♪ </div>

 
このコードをHTML編集画面に貼り付けるとこうなります。↓
ここに本文を入れます♪

 

色を変えてバリエーションを作ってみます。

 

 

オレンジ系

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #ffc68e inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #ffc68e inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #ffc68e inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

水色系

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #99ffff inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #99ffff inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #99ffff inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

緑系

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #9eff9e inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #9eff9e inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #9eff9e inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

 

紫系

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #cc99ff inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #cc99ff inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #cc99ff inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>

 

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに本文を入れます♪

 

ちょっと凝った感じの背景になりますね!

 

箇条書きデザインをカスタマイズ

今回は箇条書きデザインをカスタマイズしてみたいと思います。

参考にした記事はこちら↓

design-work.tatsublo.net

 

◆目次◆

 

 

箇条書きのカスタマイズ

箇条書きで並べるだけだとこんな感じであまり目立ちません。↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

デフォルトの「箇条書き設定」だと頭に●がつくだけ、という感じですが、カスタマイズで目立つ感じにすることができます。

 

メモ

ちなみに、デザインCSSの一番下に貼り付けたらなぜか反映されませんでした。

もともとあるCSSのコードのすぐ下に貼るのがよさそうです。

 

 

シンプルな箇条書き

.entry-content ul{
background-color: rgb(240, 240, 240);
border: 1px dotted rgb(56, 56, 56);
padding: 10px 30px;
}

 

このコードを「カスタマイズ」→「デザイン」→「デザインCSS」にはりつけるとこうなります↓

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

 

シンプルなほうが使いやすそうだなと思いました。

色を変えてバリエーションを作ってみます。

 

ピンク系

.entry-content ul{
background-color: #ffefff;
border: 1px dotted #f19ca7;
padding: 10px 30px;
}

このコードをデザインCSSに貼り付けると雰囲気はこんな感じ↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

オレンジ系

.entry-content ul{
background-color: #fff7ef;
border: 1px dotted #f7b977;
padding: 10px 30px;
}

このコードをデザインCSSに貼り付けると雰囲気はこんな感じ↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

緑系

.entry-content ul{
background-color: #efffef;
border: 1px dotted #a7d28d;
padding: 10px 30px;
}

 

このコードをデザインCSSに貼り付けると雰囲気はこんな感じ↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

水色系

.entry-content ul{
background-color: #efffff;
border: 1px dotted #88bfbf;
padding: 10px 30px;
}

 

このコードをデザインCSSに貼り付けると雰囲気はこんな感じになります↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

おしゃれなのもちょっと使ってみたいと思います。

 

 

ステッチ風箇条書き

.entry-content ol{ background-color: #ecea8d; box-shadow: 0px 0px 0px 5px #ecea8d; border: dashed 2px #fff; padding: 10px 30px; }

 

#ecea8dの部分が背景の色、#fffが線の色ですね。

このコードをデザインCSSに貼り付けるとこんな感じになります↓

  ・サンプル1

  ・サンプル2

  ・サンプル3

  ・サンプル4

 

色を変えてバリエーションを作ってみます。

 

ピンク系

.entry-content ol{ background-color: #fdeff2; box-shadow: 0px 0px 0px 5px #fdeff2; border: dashed 2px #fff; padding: 10px 30px; }

 

このコードをデザインCSSに貼り付けるとこんな感じになります↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

オレンジ系

.entry-content ol{ background-color: #fff2e5; box-shadow: 0px 0px 0px 5px #fff2e5; border: dashed 2px #fff; padding: 10px 30px; }

 

このコードをデザインCSSに貼り付けるとこんな感じになります↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

緑系

.entry-content ol{ background-color: #e5ffe5; box-shadow: 0px 0px 0px 5px #e5ffe5; border: dashed 2px white; padding: 10px 30px; }

 

このコードをデザインCSSに貼り付けるとこんな感じになります↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

 

水色系

.entry-content ol{ background-color: #dbffff; box-shadow: 0px 0px 0px 5px #dbffff; border: dashed 2px white; padding: 10px 30px; }

 

このコードをデザインCSSに貼り付けるとこんな感じになります↓

・サンプル1

・サンプル2

・サンプル3

・サンプル4

 

箇条書き用に一個、枠を設定しておくと便利そうですね!

箇条書きに設定しましたが、目次にも反映されてるような気がします!