はてなブログ、カスタマイズしてみた②（ヘッダ編）
ここまできたらヘッダもなんか編集したい
ヘッダがあるとホムペっぽい。
というわけで、カテゴリボタンをつけていきましょ
「デザイン」>「（レンチマーク）」>「ヘッダ」>「ブログタイトル下」
そこまでいくと、そこにhtmlが記述できるようになってる。
実際にこのサイトで書いてるコードは↓
htmlを書き、styleタグ内に適応させたいcssを書いています。
<div class="nav"> <ul> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/写真"><li>PHOTO</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/バスケ"><li>BASKETBALL</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/ブレイク"><li>BREAK</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/音楽"><li>MUSIC</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/建築"><li>ARCHITECTURE</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/開発"><li>ENGINEERING</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/コーヒー"><li>COFFEE</li></a> <a href="https://nuidarabakeru.hatenablog.jp/archive/category/ビール"><li>BEER</li></a> </ul> </div> <style> .nav ul { padding: 0 2vw; list-style: none; display: flex; overflow-x: none; /*スクロールバー非表示（IE・Edge）*/ -ms-overflow-style: none; /*スクロールバー非表示（Firefox）*/ scrollbar-width: none; } .nav ul ::-webkit-scrollbar { display: none; } .nav ul a{ text-decoration: none; color: #454545; font-weight: bold; } .nav ul li { width: calc(100% / 8); height: 8vw; line-height: 8vw; text-align: center; margin: 0 2vw; font-size: 1.5vw; } </style>
こんな感じ、一般化すると
※（）部分が自分で編集するところ
<div class="nav"> <ul> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> <a href="（飛ばしたいリンク）"><li>（カテゴリ名）</li></a> </ul> </div> <style> .nav ul { padding: 0 2vw; list-style: none; display: flex; overflow-x: none; /*スクロールバー非表示（IE・Edge）*/ -ms-overflow-style: none; /*スクロールバー非表示（Firefox）*/ scrollbar-width: none; } .nav ul ::-webkit-scrollbar { display: none; } .nav ul a{ text-decoration: none; color: #454545; font-weight: bold; } .nav ul li { width: calc(100% / （カテゴリ数）); /* （カテゴリ数）等分になる */ height: 8vw; line-height: 8vw; text-align: center; margin: 0 2vw; font-size: 1.5vw; } </style>
まあこんな感じ。サイズとかはお好みで変えればOKです。
やっぱりヘッダがあるといい感じ。
ぜひつけてみてくだせえ
はてなブログ、カスタマイズしてみた①
はてなブログはカスタマイズできる。
テンプレがあったんですが、それじゃあ自分のブログという感じがしないので、こんなのがいいなあというのをカスタマイズしてみました。 とりあえず今回は、全体のcssを変更する方法を。
かるーく手順を載せておきます。
【手順1】カスタムCSSの記述
はてなブログでは、自分で書いたCSSを適応させることができます。
しかし、そのためにはCSSセレクタ、つまりはてなブログのhtml構造を取得する必要があります。
そこで公開されてるのが、boilerplate.css。
詳細は、下のリンクですが、まあ土台となっているcssがあるわけです。これを変更してカスタマイズします。これは便利。
help.hatenablog.com github.com
しかし、
実際に中身を見るとどこがどこなんだ、、（entry？date？）
.entry-header { padding-bottom: 1em; margin-bottom: 2em; border-bottom: 1px solid #ddd; position: relative; } .date { margin-bottom: .5em; font-size: 1.2rem; } .date a { color: #999; text-decoration: none; }
ということで、対応付けるためブラウザの「開発」「デベロッパツール」を使いましょう。 safariであれば（右クリック）>「要素の詳細を表示」 chromeだと（右クリック）>「検証」
するとこのように要素のclass名をgetすることができます。
また、「command+S（保存）」でブラウザからwebサイトのソースをダウンロードすれば、ローカル環境で、編集したcssをhtmlに適応して何度も試すことができるのでおすすめ。
この調子であとはcssを自分好みに編集していきます。
【手順2】カスタムcssの適応
「ダッシュボード」>「デザイン」>「設定マーク（レンチのマーク）」>「デザインCSS」に進むと、そこにcssを書き込める。
他の方法として、詳細設定からhtmlの
タグを編集できる機能があるんですが、そこに、GoogleドライブやらDropboxにアップロードしたcssファイルの公開リンクをタグから読み込む、というのがあるんですが、ロードにも（若干）時間がかかるんで、別にそんなことしなくても先ほどのところに作ったcssコピペすればいいと思います。コピペが嫌だ、という人は上記の方法でやりましょう。 「ダッシュボード」>「設定」>「詳細設定」>「head内タグ」>「
要素にメタデータを追加」からできます。変更後は「変更を保存する」をお忘れなく。ワイは３回ほどぽしゃしました。
変更後の見た目
記事の角を丸めて、影をつけました。英字フォントも変えたりしています。オリジナティが出ていい感じ。 次回はヘッダ部分のジャンルボタンの作成を解説します。
わいの写真ポートフォリオ2022
2022 1
@Myoko
親と一緒に寒い中撮った時の写真です。
2022 5
@Tonami
砺波チューリップフェアでおデートした時の一枚。テキトーに（画面を見ず）カメラをチューリップの下に突っ込んだらなんかいい感じになりました笑
2022 8
@Naoshima
一人旅中の直島での１枚。誰も来ないこの場所でゆっくりと船が来るのを待ちました。本当に時間がゆっくり流れていた。
2022 9
@Fukui
今年唯一の花火撮影。展望台の整理券を取得し、ベスポジから撮影させていただきました。
2022 9
@Fukuoka
teamLab Forestにて。Forestは、アプリと連動してめちゃくちゃ楽しかった。
2022年個人的ベストアルバム
- 「Love All Serve All」藤井風
- 「BADモード」宇多田ヒカル
- 「Inner Ocean」さらさ
- 「Tokyo State Of Mind」Kan Sano
- 「TIME」Sincere
- 「adieu 3 - EP」adieu
今年１年もいっぱい素敵な音楽との出会いがありました。今年の感想を早いうちに（もう年明けて５日たってるが）残しておきましょう
「Love All Serve All」藤井風
個人的に2022年を象徴する、藤井風待望の2ndアルバム
中でもリード曲「まつり」は、きれ〜なイントロから始まるんですが、例によってまた歌詞が素晴らしい。2022年は、藤井風は「死ぬのがいいわ」が世界中でバイラルヒットを記録した年でもあり、メロディセンスやコードセンスが注目されがちですが、個人的に藤井風の最も魅力的な部分はその歌詞だと思っています。韻を踏む遊び心であったり、あえて方言を用いることでよりリアルになるとともに、そこにグルーブが生まれるなど、奇跡的な歌詞を書きますねえ
その意味で言えば、母語で藤井風の音楽を受容できることがどれだけありがたいか、、
現代人に特によく刺さるメッセージも優しい音に包んで教えてくれます↓
で 一体何がほしいわけ
誰に勝ちたいわけ
なかなか気づけんよね
何もかも既に持ってるのにね
「BADモード」宇多田ヒカル
宇多田ヒカルの３年７か月ぶりにアルバムをリリース。ロンドンを拠点にしっとりとした良質な音が耳を包みます。（それっぽいことを言ってみる）
アルバムタイトルにもなっている「BADモード」は究極のラブソングでしょう。
大好きな人の好きなタイミング、明るい面を捉える曲はいっぱいある一方で、BADモードに陥ってる彼女（ないし彼氏）を、精一杯の愛情で受け入れようとする様が描かれています。
アルバム随所で、宇多田ヒカルの独特な言い回しが見られ、歌詞だけ見ても楽しめます。
「Inner Ocean」さらさ
2022のくれになんとか見つけた１枚
湘南の“海風“を受け自由な発想とユニークな視点を持つ23歳のシンガーソングライター。SOUL、R&B、ROCKなどあらゆるジャンルを内包し、ジャジーでオルタナティブ、どこかアンニュイなメロディと憂いを帯びた歌声は観るものを虜に。学生時代はジャムセッションに明け暮れ、高校3年の時に制服のまま出向いた 元SOIL&“PIMP”SESSIONS 元晴、勢喜 遊（King Gnu）、MELRAWらが主催するセッションにてMVPを獲得したことが自信となり本格的にシンガーを目指す。
2022年には1stEP「ネイルの島」と共に、2枚のEPを出しています。
特にこの「Inner Ocean」は満を持して出せれてる感じがして、「朝」に始まり、「太陽が昇るまで」そして「午後の光」とゆっくりと時間の経過が演出されており、全体を通して「火」という言葉がキーワードとなっており、統一された世界観が感じられます。知らんけど。
「Tokyo State Of Mind」Kan Sano
心機一転アプデもせず20年使ってきたCubaseをLogic Proへと変更したKan Sano。Logic Proで作られる1年半ぶりとなるアルバムはいかほどか。
そんなこんなで１曲目を流したところ、、ああこれは2022ベストアルバムだな、、と６月の時点で確信。そんなアルバム。かっこいい。
「TIME」Sincere
2022の推しと勝手に宣言したのがこのSincere。
このアルバムは全曲すっと入ってきた。ビジュアルもいいので、iriみたく日本のR&Bシーンの中心にいってくれることを期待！
「adieu 3 - EP」adieu
上白石萌歌ことadieu, adieuこと上白石萌歌による３作目のEP。
yaffle、 小袋成彬、澤部渡（スカート）、塩入冬湖（FINLANDS）、柴田聡子、クボタカイ、ヤナセジロウ（betcover!!）といった豪華な楽曲提供陣が姫を囲っています。
どの曲も透き通るように綺麗ですが、２曲目の「夏の限り」は間違いなく自分の再生回数トップソング。途中からシングル版からアルバム版に移行したのに２バージョンともランクインしてた。詞曲は例によって柴田聡子。この人は本当にいい歌詞を書くんですが、
自転車はとっくにあの子のもとに
今はずっともっと遠くに行ける
あなたの背中くっついてたらどこかに着く
この１秒の長さに酔うあちこちあまりにも揺れる
手を離したり 離さなかったり
歌詞だけ聞いても情景が浮かび上がってくる、、そこにどこかムシムシとした夏の終わりを感じさせる音に包まれ、なんだこれ！！！なんだこれ！！となり続けた結果、再生数トップに。
はてなブログ、はじめました。
趣味が多すぎて、何をどんな感じでやっているのか自分で把握できなくなってきたので、まあ見返しても楽しいしここに記録していくことにしました。
基本的に自分用です。
一応人が読む想定で書くことにしますが。
（その前提で書くと、「あーオレの文章わざわざ読むに値しないなあ、オレミーハーだなあ」となりもっと学習できるわけ）
