はてなブログのパンくずリストをカスタマイズ!導入方法とCSSデザインをご紹介!
パンくずリストを導入する
パンくずリストをカスタマイズしてみる
少し注意事項です。
表示しているパンくずリストは画像です。このブログには、画像に影をつけているので、サンプルが立体的に見えますが実際には影がついていなくフラットなデザインです。
基本的なデザイン
span.breadcrumb-child::before {
content: "›";
font-size: 20px;
line-height: 15px;
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
記号を変える
点にしてみる
span.breadcrumb-child::before {
content: "•";
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
棒にしてみる
span.breadcrumb-child::before {
content: "|";
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
スラッシュにしてみる
span.breadcrumb-child::before {
content: "/";
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
色をつける
これらのパンくずリストをカスタマイズしていきます。要素ごと説明していきます。
文字を変える
.breadcrumb {
color: #9c9c9c;
}
背景を変える
div#top-box {
padding: 12px 0;
background-color: #fff;
padding-left: 10px;
}
アイコンを加えてみる
.breadcrumb::before {
content: "home";
float: left;
font-family: "Material Icons";
font-size: 21px;
padding: 0 4px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
.breadcrumb::before {
content: "home";
font-family: blogicon;
float: left;
font-family: "Material Icons";
font-size: 21px;
padding: 0 4px;
}
さいごに
どーでしたか?こういうちょっとしたデザインもブログパーツとして、とても重要です。はてなブログの方も、はてなブログじゃない方もこんなデザインがあるんだよってことを知ってもらえたら嬉しいです。では、また。
聴くだけで気持ちいい?おすすめのASMR動画をYoutubeの中から8個集めてみた!
ASMRって聞いたことありますか?今はたくさんのYouTuberがASMR動画を投稿しています。似たようなものに音フェチ動画がありますが、音フェチ動画は聞いているとなんだか心地よい、心が落ち着くような癒し効果がありますよね。
では、ASMRはどうなんでしょうか。
ASMRとは
人が聴覚や視覚への刺激によって感じる、心地よい、頭がゾワゾワするといった反応・感覚。
なるほど、音フェチは音だけだけど、ASMRは音だけではなく見ているものまで刺激になるんですね。だからYouTubeという動画が適してるわけですか。
そして、ASMRを引き起こす要因は、トリガーと呼ばれていて、Youtubeには数多くのASMRトリガーの音が投稿されています。
それでは、ASMRを知ったところで僕な好きなものから代表的なものまで、オススメしたいASMRトリガーをYouTubeの中から紹介します。
脳がとろけてしまうほど気持ちいいYouTubeでよく見るおすすめのASMR
ゾクゾクするASMR
こちらは、数多くの気持ちいい、ゾクゾクするようなASMR動画をアップロードしているはとむぎさん(hatomugi ASMR)です。この動画は綿棒、炭酸水を始め、コルクを耳かき棒でひっかくなど、10種類のASMRトリガーを収録しています。
イヤフォン推奨です。
あ~ゾワゾワしてくるこの感じ、言葉に表せません!
美味しそうなASMR
カサカサ、コソコソっとした音だけでなく、ジュージュー、ザクザクといったお肉を焼く音や野菜を切る音など料理ならではの音が聞けるASMR動画です。料理している時の音はじっくり聞いてみると、音の種類がたくさんあって面白いですね。
肉食いてえ...
そんな見てるだけでお腹が空いてくるほど美味しそうな料理ASMR動画を投稿しているチョコレートカカオさん( Chocolate Cacao チョコレートカカオ )でした。
タイピング音
カチカチっと、PCで仕事する人、PCゲーマーならキーボードの音は日常的に聞いていると思いますが、一度手を休めてこれを聴いまたはどうでしょうか。
しかも、このキーボードはゲーミングキーボードです。暗い部屋に映えていて、綺麗ですね。ゲーマーとしてはかなりポイント高いです。
一度作業から離れて、手を休めることで、キーボードの音でイライラするなんてことはないのではないでしょうか。
リラックスができる自然のASMR
自然界には多くの心地よい音が多く溢れています。自然の音というのは「1/fゆらぎ」と呼ばれる規則的、不規則的な音が混じったゆらぎが存在しているのです。
武者利光(東京理科大学教授、 東京工業大学名誉教授)の研究で、自然界の1/fゆらぎ音を聴くと脳内がα波の状態になり、人間の生体にリラクゼーション効果をもたらすと発表されている。ヒーリング・ミュージックの効能の説明にも使われる言葉であり、規則正しい音とランダムで規則性がない音との中間の音で、音響振動数のゆらぎが生体リズムのゆらぎと同じ音楽は 人に快適感やヒーリング効果を与えると考えられる。
自然は僕らに住む環境を与え、一緒に育ってきました。普段気づかなかった、いつもだったら気にしていなかった自然の音を聴いてみて、癒やしとともに、自然のあり方を考えてみてはいかがでしょうか。
たくさんの水の音
水の音というのは島国である日本において、とても身近に感じる音ではないでしょうか。
その一つに海があり、海は様々な姿を僕たちに見せてくれます。ザーザーと繰り返して広がっていく、落ち着きのある波の音だけでなく、終わりが見えない壮大な海、永遠に繰り返される波を見て、僕たちは海の美しさを感じることができます。
この時代はインターネットが広く普及していてYouTubeやInstagramで様々な海の姿は外に出ずとも見れるようになりました。僕は海が好きでよくInstagramで海の写真を見ます。夕焼けの海、全世界の海が見れるので、まるで一つの海になっているようです。しかし、画面という壁を挟んで見るよりも、生の海に訪れることで、リラックスとともに、海を感じることができます。
海を感じるのはどういうことか、と思うかもしれません。人間には五感があります。インターネットがが普及したおかげで、見たり、聞いたりするのは当たり前のようにできます。でも、海水に浸かることや砂浜を歩くことでわかる触覚、海独特な匂いを感じる嗅覚、しょっぱいと思えるのは味覚のおかげ。これらは、海を訪れることでしか感じることができないのです。
長くなりましたが、まとめると海は様々な姿があり、訪れることにより五感で感じることができる素敵な場所です。
そうはいうものの、忙しくて行けれない、海が遠いというなどの事情はあると思います。インターネットがあれば、海に行かずとも、見たり、聴いたりして、海でリラックスすることが出来ます。そこが良い特徴で、ASMRが流行したのも、インターネットに適していたからだと思います。
海のことを語っていたら、1記事書けそうなので、やっとですが、水のASMRをご紹介します(笑)
水が流れる音と鹿おどしと雨の音です。
流れる水の音
鹿おどしの音
雨の音
焚き火の音
火というのは見ているだけで温かさがあり、なんだか心が落ち着くような気がします。焚き火の音を聴いてぼーっとするのもいいですし、そのまま眠ってしまってもいいです。頭の中は空っぽにして、リラックスしましょう。
まとめ
以上聴いてるだけで気持ちよくなるASMR動画の紹介でした。Youtube上には他にもたくさんのASMEがあります。たくさん聴いてみると面白いですよ!
僕が自信を持っておすすめできる便利な拡張機能 超厳選7選【Google Chrome】
Google Chromeはとてもたくさんの拡張機能を利用することができます。僕たちのブラウジングを高速化する便利なアプリや、今までデスクトップアプリでしかできなかった作業が、ブラウザ上で完結してしまうほど高機能・高品質なアプリがボタン一つで導入できます。
その中で、ブラウジングライフがちょっとでも豊かになる、僕が使っていてほんとうにおすすめな拡張機能を厳選して紹介します。
- 拡張機能はたくさんいらない
- Google翻訳
- Save to Pocket
- Evernote Web Clipper
- Checker Plus for Gmail
- Session Buddy
- LastPass: Free Password Manager
- Adblock Plus
拡張機能はたくさんいらない
拡張機能の紹介の前に、少しお話します。拡張機能はとても便利で簡単に導入できます。ですが、その簡単さがゆえにいつの間にか非常に多くのアプリが入っている事態になる可能性があります。多すぎるとChromeの動作が遅くなる原因になってしまいます。
おすすめの拡張機能はすべて試してほしいのですが、使わなくなった、または、自分に合わないという不要なアプリは解除することをおすすめします。
Google翻訳
ちょっとした文章、単語を翻訳したいときに、マウスで選択するだけ、ちょちょいのちょいで翻訳してくれます。使い方は、アイコン翻訳したい文章を選択すると、翻訳アイコンが出てきます。それをクリックすると、翻訳された文章がポップアップで表示されます。Google翻訳のページに飛ぶこともできます。
Google Translate - Chrome Web Store
Save to Pocket
ボタンを押してPocketの、簡単操作。
でも、それがいいんです。
Save to Pocket - Chrome ウェブストア
Evernote Web Clipper
Evernoteで開いているページをクリップします。クリップの形式が5つあり、記事の部分を保存する記事、記事の部分をさらに簡素にした簡易版の記事、ページ全体を保存するページ全体、ページのリンクを作成するブックマーク、ページをスクリーンショットでき、範囲選択可能なスクリーンショットです。その他、保存先を指定できます。
Evernote Web Clipper - Chrome Web Store
Checker Plus for Gmail
GoogleのGmail拡張機能のようなメール数表示機能のほか、Gmailの通知をデスクトップ通知で、しかもサウンド付きで受け取るようにできます。Chromeを開いていなくても通知してくれるバックグラウンド通知や通知音の変更、オンオフなど様々な設定ができます。
Checker Plus for Gmail™ - Chrome ウェブストア
Session Buddy
Google Chromeでは標準で最後に閉じたページの復元機能はありますが、その機能で自分が思っていたタブが復元されないことや、一つのウィンドウしか復元されないことってありますよね?
そこで、現在のタブを自分の好きなタイミングで保存することができる拡張機能Session Buddyの出番です。自分で指定したページ、いつも使っているページをまとめて保存・復元可能です。2つ以上のウィンドウの復元も可能になります。
Session Buddy - Chrome Web Store
LastPass: Free Password Manager
これは、神すぎて神以上の言葉が見つからなくて困っているほど神な拡張機能です。様々なサイトのパスワードを保管し、ログイン時に表示してくれます。
使い方は簡単です。まずは、LASTPASSログインのためのマスターパスワードを設定します。そして、パスワードを保管したいサイトのログイン画面でパスワードを入力します。
すると自動でパスワードを保存するかのポップアップが表示されます。保存し、再度ログインするとき、入力欄にLASTPASSアイコン(複数保存されているとその数だけ表示される)が表示されているので、それをクリックすると、パスワードが入力されます。
さらに設定から自動的にログイン情報を入力してくれる設定があるので、オンにすれば完全に自動化ができます。
OPEN MY VAULTから管理画面を開くことができます。ここではサイトの呼び出し、パスワードの編集ができます。
注意としてマスターパズワードは保管することはできませんので、忘れないようにしてください。再発行は可能です。
いつもサイトログイン時にお世話になっております。僕は依存しすぎてこれが無いと発狂するレベルです。特に多くのサイトに登録している場合はとても重宝するので、とても便利でなかなか手放せないアプリケーションです。ぜひお使いくださいませ。
LastPass: Free Password Manager - Chrome Web Store
Adblock Plus
インターネットには広告が溢れています。Adblock Plusはその広告のほとんどを消します。意図しないページに誘導する悪意のある広告をブロックすることはもちろん、Youtubeなど様々なサイトの広告を非表示にします。webサイトでは、とてもスッキリして見やすくなり、Youtubeでは、広告を待つことがなくなり、すぐに動画が見始めることができます。
ただ、僕の個人的な見解ですが、僕ら広告を見てほしい側からすると、あまり使ってほしくないものであるのと、Adblockを一度はずしていたことがあるのですが、その際、Youtubeでたまたま面白い広告が流れてきました。ちなみに吉野家のアレです(笑)こうした、クスっとできる、魅了される広告に出会えなくなるのは寂しいことでもあります。
とは言いつつも、僕はAdblock Plusを使っているので、結局は広告が好きじゃないです(笑)悪意のあるページに誘導する広告に悩まされた方は特におすすめです。再発防止のためお使いください。
【厳選】cities skylines 都市発展の高速化!便利なMOD おすすめ18選!
今回は便利なおすすめMODの紹介です。
僕がcities skylinesで街を作る上で、便利で、しかも、もっと早くから入れておけばよかったなと思ったMODがほとんどです。
言語系
日本語化MOD
タイル系
All Spaces Unlockable
81 Tiles (Fixed for C:S 1.2+)
システム系
Loading Screen Mod
Improved Content Manager
Improved Asset Icons
Find It!
軽いチート系
Unlock All + Wonders & Landmarks
Not So Unique Buildings
Ploppable RICO
環境系
Unlimited Trees Mod
No Tree Brush Slope Limit
Extra Landscaping Tools
- 植林
- 鉱石・石油・肥沃な土地をブラシで設置
- 土地造成
- 水源の設置
Surface Painter
おすすめ度◎
Automatic Bulldoze v2
プロップ系
More Beautification
Prop & Tree Anarchy
Extended Building Information
Steam
さいごに
SteamのゲームのMODはサブスクライブするだけで、導入できるので楽ですね!
また、MODを紹介したいと思うので、随時更新したいと思います。
では!
cities skylines ゴミが溢れなくする方法は?ゴミ問題を解決!初心者必見シリーズ第3歩
原因その1 渋滞により収集車が行き届いていない
原因その2 ゴミ処理施設が不足している
- ペット禁止
- リサイクル
ペット禁止 | ゴミ蓄積量10%減少 | 幸福5ポイント減少 |
リサイクル | ゴミ蓄積量15%減少 | 税収5%減少 |
原因その3 ゴミ処理施設を一箇所に固めている。
まとめ
-
ゴミ処理施設は都市から離れた場所に置く
- 焼却炉を上手く使う
- 条例を使う
- ゴミ処理施設は固めない
cities skylines 工業特区は稼げるの?工業特区の特徴と作り方 初心者必見シリーズ【第二歩】
工業特区指定の仕方
Step1 工業特区を作る場所を決める
Step2 地区設定
Step3 土地にあった工業を指定
工業特区って稼げるの?
税収が大きく入るのは石油業ですが、資源が有限で枯渇がとても早いので、これで稼ぐのは厳しいです。長い目で見れば林業、農業がいいと思います。
僕の都市では、一番の収入源である住宅区画の土地に対して、半分くらいの税収でした。
ただ、僕の計測方法はてきとーで目分量と独自の計算方式を使っているので、目安くらいに思ってくれればいいです。
全く稼げないわけではないです。広い土地を使えば、大きな収入を得られます。ですが、その分の渋滞対策は必須です。
工業特区の説明
業種 | 税収 | 資源 | 雇用枠 |
---|---|---|---|
林業 | わずかに増加 | 無限 | 無教養 |
農業 | わずかに増加 | 無限 | 無教養 |
鉱業 | 中程度増加 | 有限 | 初等教育 |
石油業 | 大きく増加 | 有限 | 初等教育 |
全体的に工業は教育レベルの低い人を求めるので、小学校を置くだけでも厳しいです。人手不足が発生して、廃業に追いやられます。
学校のない住宅地区を作ることをおすすめします。
詳しい工業特区の解説
林業
農業
鉱業
石油業
まとめ
Cities:Skylines 初心者必見!都市の発展のための街づくり【第一歩】Cities:Skylines攻略
cities skylinesにハマっているやっさんです!
突如9月14日にニンテンドースイッチ版のcities skylinesが出て、新しく始めた人が増えたと思うんですよ。初めてやる人が多くだと思うのですが、最初にどうしていいか分からない!って方いると思います。
僕もそうでした...
switch版とPS4版は同じですが、PC版とは見た目や操作方法は違います。ですが、基本的には同じでMODはいれていないので、安心してお読みください。
都市を作成しよう
高速道路から街を繋げよう
日にちの進行を止めることで、お金の減りを止めることができます。左下に日付が進んでいるバーがあるので一時停止にしておくことで、街づくりに夢中になって資金がなくなっているということがなくなります。
街を作ろう
水道網
電気網
街を広げる
住宅区だけがあっても発展しないので、商業区・工業区を設定し市民を仕事に就かせましょう。
商業区は特にトラックなどの車が多く行き交うので、高速道路と近いと良いです。
工業区はしばらくすると地面が汚染され、市民が病気になります。なので、住宅地から離れたところに置いてください。
市長の思い通りの街へ
立派な村になる前に小さな集落があるんですけど、撮り忘れましたw
というように、cities skylinesでは人口が増えていくとできることが増えていきます。
それに伴って様々な問題も増えていきますが、問題を解決していき、大きくなった街を眺めるのはとても面白いです。
みなさんも良きcities skylinesライフを!
※記事中全ての画像はcities skylinesからの引用です。
|