こんにちは、中瀬です。今日はやるやる詐欺だったブログデザイン改修工事についてのご報告です。
初手、詰み
さあて、ブログデザイン変えますかね!と思い立ったのはもう結構前のこと。
現在のデザイン(ピンク色のころですね)は、何もわからないままコピペで作り上げたので、コードがぐっちゃぐちゃ、ちょっと変えようにもどこも弄れない…完全に詰みの状態でした。
そんな状態から脱するには――イチから作るしかない!(そして冒頭へ戻る)
しかし、決意したはいいものの、まず第一歩目に何をすればいいのかすらわかりません。
ちょっと調べてみたら、はてなブログ側からのマニュアルのようなものが出てきました。
はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。作成したテーマは、テーマストアに投稿して、ほかのはてなブログユーザーに使ってもらうこともできます。
既存のデザインテーマをブログにインストールしたい場合はヘルプ「デザインテーマをインストールする」を参照してください。
・・・?
ああ、最初から何を言っているのかわからない…だからなにをどうすれば?
超初心者ウェブデザイナーには難解すぎて、思考停止に陥りました。
師、曰く
もうちょっとはてなブログのデザイン自作について調べていると、運よく上記のブログ(るいともだよな~)に行きつきました。
ここを読んでようやく全体像が見えてきました。
要するに、まずは下準備が必要なのです。
GitHubでcssを配布しているから、まずはそれをダウンロード。
↓
次にhtmlだけど、これは適当に空のブログを作って、そこから引っ張ってくる。(chromeの場合、右クリック→検証→コード上でCtrl+C。このコピーをすると、冒頭のドキュタイプ宣言が抜けるので、自分で書き足す。)
↓
…というhtml抽出作業を、TOPページ・記事ページ・そのほか必要なページ、それぞれで行う。
↓
引っ張ってきたhtmlファイル内のcssリンクを、GitHubで引っ張ったもの・これから自分が書き足すものに書き換える。
ということらしいです。
ここまでやって、ようやく開発の下準備が完了しました。あとは自由にcssを書き足すだけ。
他人の書いたコードの読みにくさよ…
中瀬さんのウェブデザイナー習熟度は、基本的な操作でとりあえずウェブページっぽいものは作れるかなギリギリで、くらいです。
Java Scriptは一切お勉強しておらず、なんとなくでjQueryが首の皮一枚つながって理解できるくらい。
こんなクソ雑魚ナメクジが、下準備を終えた各ファイルを見たところで、さっぱりぽん分かるはずもなく…
目を凝らして文字列を追いかけて、かろうじて「ここからヘッダーか!」くらい。
…先が思いやられます。
ウェブデザインの勉強をしている間は、コードを読むことは特に苦ではありませんでした。しかし自分の書いたものでないとなると、こうも一気に読めないのかと愕然としました…あはは…特に全く勉強していない未知の言語・Java Scriptが読みにくさに拍車をかけている気がする…
これは完成まで相当な時間がかかりそうです。
中瀬さんの考える最高のブログデザイン
完成までにはまあまあな時間がかかると思いますので、逐一このようなレポートで進捗状況をご報告いたします。
ひとまず、やるやる詐欺回避、ということでよろしくお願いします。
閑話休題、作りたいデザインについて。
記事全文をダラダラ乗せるタイプではなくて、名刺みたいなカードが並ぶ感じにしたいと思ってます。上部に固定のナビゲーションを置いて、カテゴリー別に記事を探しやすくしたり、もちろんスマホからも快適に見られるようにレスポンシブ対応で作る予定です。それから、TwitterやSUZURI、note、ココナラなどなど…中瀬さんの生息域が、ブログ運営当初から比べるとかなり拡大しているので、ブログの外にもアクセスしやすいように誘導したいですな。
そしてなにより、カワイイこと!!!(ドーン)
ふぅ(深呼吸)そう、気分が上がる、バイブス高めの、ぷりちーできゅーとな最強の秘密基地…それがココなのです…!!!!!
超初心者でも、ウェブデザイナー、そう、デザイナーですから、見え方にはめちゃくちゃこだわりたいです。
亀更新になりますが、変わるときは一気に変わりますので、ある日突然違うデザインになりますがURLはこのまま変わらずですので、引き続きご愛顧のほどよろしくお願いいたします。(ゴマすりすり)
ー----------------------
書いた人 中瀬一菜(なかせ・ひいな)
うつ病が原因で退職した元公務員。未婚・アラサー・障害者。
うつ病があっても自立した生活を送るために日々奮闘中。
Twitter https://twitter.com/ebihuraiumeeee
Instagram https://www.instagram.com/utsu.kokuhuku/