無印良品大好きフネの悩めるシンプル生活

無印良品大好きフネの悩めるシンプル生活

無印良品大好き40年!子供3人、非ミニマリストフネの真似すりゃできるシンプル生活

【サイトマップ】読みたい記事はコチラからひとっ飛び

【祝!フネ2歳】より読みやすいブログを目指して~カスタマイズのためのhtml&cssの勉強と今後の野望

こんにちは!いつの間にか2周年を迎えた非ミニマリスト フネです。

はじめての方はどうぞこちらも磯野家の紹介

f:id:funenoblog:20200519163759j:plain

早い。

歳を重ねると1年が早いというけれど、それにしても早くて早くて、思っていることが何も出来てなくて、自分が小さいころから言われていた「フネちゃんは何をするのも遅いねぇ」に輪をかけたようでしょんぼり(´・ω・`)

2年たっても良くも悪くも変わらない。いや、輪っかがどんどんかかっていくのだろうなー。

 

2年前の記念すべき1本目の記事はコチラです↓ 

www.muji-fune.com

どんどん変わっていく日常の中で変わらないブログを変えようと、フネ立ち上がりました。よっこらしょ。←カラダは変わっていきます

そう、ブログのカスタマイズです。もう1年前から思っていて。←のんびり

いつもうまくいかず挫折するカスタマイズと、最近(半年くらい)気になっている自動広告の多さをなんとかしたいのです。

今回はまずブログのカスタマイズについてお伝えします。

【祝!フネ2歳】より読みやすいブログを目指して~カスタマイズのためのhtml&cssの勉強と今後の野望

【1】カスタマイズができない悩み

「はてなブログカスタマイズ、コピペでOK」

そんなタイトルのブログを幾度見て、試しただろうか。

そして2~3時間、時によっては2~3日格闘した挙句見事に崩れたブログの画面に「ひぇぇぇぇっ(/TДT)/」

となり「変更を保存せずに戻る」の繰り返しなのです。

 

「コピペで一発って言ったのに…」

 

誰も悪くないので誰にも当たれずがっかり感だけが募り、ついにフネ奮起。

「そうだ、CSS、学ぼう٩( ᐛ )وキラーンッ

【2】2019年年間売上1位のWEBデザイン入門講座本を購入

f:id:funenoblog:20200519174624j:plain

カスタマイズするときに、今のCSSやhtmlコードをコピーしておくのは必要重要作業です。でも中にはもう必要のないコードも入っているかもしれない。でも何が何のコードだかわからない。だから消せない。

それがとてもイヤだったんです。自分のサイトを自分がわからないことが。

 

とりあえずコードを印刷して分析しようと思ったらコピー用紙が切れていて、ドラッグストアも欠品していて仕方なくイオンに行ったら、文具と同じ階に本屋があったのです。

で、フラリと入りそこに売っていた唯一のWEBデザインの本がコレ↑。

Amazonで調べてもベストセラーだったので即購入。本を買ったのは久しぶりです。

2,260円税別です。分厚いです。

初心者にもわかりやすく、イマ風なオシャレなデザインが例で示されているという口コミも決め手。

今までなんとなく手探りでわかってきたところもありますが、htmlやCSSの何がどういう意味なのかをずっと知りたかったので、とにかく自分のサイトで使われているコードの意味を調べて「へーなるほどねぇ、そういうことだったのかいなー」と納得。

f:id:funenoblog:20200519183602j:plain

小さいころから原理を知りたいというタイプ。だから目に見える事柄を説明できる物理も好きでした。物理っていいよね平等で!誰が球落としても忖度なく同じように落ちるんだよん(*゚∀゚*)

ちなみに目に見えない化学は苦手。暗記無ー理ー。

f:id:funenoblog:20200519180739p:plain

とにかく、コードを「自分で作る」のは無理ですが、「これが何をデザインしているのか」くらいわかるようになると変更や応用が出来るようになるので、少しずつ学んでみます。

【3】とりあえず変えたシェアボタンとフォローボタン

▶ビフォー

f:id:funenoblog:20200519222713p:plain

ビフォーだってコピペで一発の記事を見ながらやったものです。ポインターを置くとボタンの色が変わる優れもの。スッキリデザインが気に入りました。

▶アフター

f:id:funenoblog:20200519222723p:plain

四角から丸くしてみました。参考にしたのはコチラのブログ。

【カスタマイズ】コピペで簡単!フォローボタンを可愛く - まほろば暮らし

コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG

 

ね、どっちも「コピペで簡単」と謳っています。←基本うまくいきます

だがしかし、CSSの場所によってはうまくいきません。実際にはじめシェアボタンが「え、ちっちゃ!!」な貧相なマルになりましたが、CSSの場所を変えたら(貼り付ける場所を上のほうに持ってくる)なんとかうまく表示されました。

良かった良かった。

 

今回はとにかく軽くしたかったので、ブクマの数の表示やボタンの色が変わるような機能は省いてシンプルにボタンだけにしました。

【4】今後の野望はグローバルメニューの設置

グローバルメニューとは

f:id:funenoblog:20200520021552p:plain

こういうやつです。ただし、ドロップダウンメニュー付き。

グローバルメニューはたくさんの方が設置していて憧れていましたが、なんせカテゴリーが多い当ブログ。横にずらずらと30㎝くらいになりそうで諦めていました。

ドロップダウンがあれば、カテゴリーも大きく少なく分けられ(大カテゴリー)目的の記事に素早くアクセスできる(小カテゴリー)ので、これしかないと。

 

参考にしたのは、カスタマイズの記事といえばこの方!カスタマイズ記事を書いている大勢がお世話になっているゆきひーさんのコチラの記事です。

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

ありがとうございます!!まだ成功したことないけどねっ(;∀;) 

グローバルメニューに立ちはだかる壁 

本当は「2周年記念にブログリニューアルしました」にしたかったのですが、問題山積でした。で、まだ非公開のテストサイトで実験中。

このテストサイト、実はもう半年前から作ってます。うまくいかず先月また別のテーマでつくったり。今のテーマは一番人気の「minimalism」です。

 

問題1:まず、このカスタマイズをコピペするとトップ画面の文字がガタガタになります。本文の見出しの色カタチもおかしくなります。

なぜかわからーん!

勉強します。。。

 

問題2:はてなブログのカテゴリーが階層化されていないので、今までのカテゴリー分けをそのまま当てはめられない。

理想は「無印良品」カテゴリーの記事の中でも「収納」「情報」「買ったもの」とかに分けたい、そのためのドロップダウンメニューなのです。

しかしはてなブログはカテゴリーの複数検索機能がないのです。多分、調べたけど。

「無印良品+収納」でひとつの小カテゴリにしたいのに、「無印良品」か「(無印良品以外も含む)収納」でしか分けてくれない。

f:id:funenoblog:20200520180342j:plain

↑カテゴリーまとめてみた図

 

ということは、記事をひとつひとつ「無印良品の収納」と「(それ以外の)収納」に割り振りなおせということかい?

え、めんどくさ。いくつあるのよ記事。

カテゴリーが多すぎる説とはてなさんへのお便り

それにしてもこんなに多岐にわたる雑記だったのかと自分でビックリしました。無印良品から水素自動車まで。先ほどのメモ、裏までまだ続いてます…。

もし奇跡的にブログの体裁が整っても、肝心のカテゴリごとのURLで割り振りが出来ないので、さていかがしたものかと思案中です。

とりあえずはてなブログにお願いメール(問い合わせ)を送りました。初めてです。

複数のカテゴリでの検索を可能にしてねと。無理ならいい代替案はないかいな、と。

 

回答があればまたお伝えします。

【5】それ以外にやりたいカスタマイズ

  • 見出しのカスタマイズ
  • 下線をペンみたいにしているカスタマイズ
  • 目次のカスタマイズ
  • 記事の「トップへ戻る」や「目次へ戻る」ボタンの設置

きっとやればすぐできる系なんでしょうけど、のんびりやります。

見ていただけることに感謝し、少しでも見やすいブログにしていきたいと思います。

あと、検索が多いので余計なもん(←余談多めなもんで)要らんわ、という人がとっとと目的のところにたどり着けるように…。

まとめとご挨拶

【祝!フネ2歳】より読みやすいブログを目指して~カスタマイズのためのhtml&cssの勉強と今後の野望

【1】カスタマイズができない悩み

【2】2019年年間売上1位のWEBデザイン入門講座本を購入

【3】とりあえず変えたのはシェアボタンとフォローボタン

【4】今後の野望はグローバルメニューの設置

【5】それ以外にやりたいカスタマイズ 

 

ともかくなんとなく始めたブログがこうして続いているので人生は面白いなぁと思います。それに、この先の人生の楽しみのひとつになりそうで嬉しいです。

でもやっぱり楽しいのははてなブロガーさんたちとの交流です(^∀^)

「会ったことはないのに他人ではない親近感」

会えた方もいますしね ♪

現実世界では知り合えなかった人達と交流できるはてなブログで良かったと思います、つくづく。自分だけでは思い巡らなかったいろんな意見や、自分とは違う得意分野を持った方たちの記事で世界と知識が広がります。

 

皆さま、今後もよろしくお願いします\(^.^)/♪