目次
はじめに
この"おむにバス"は、有料版の「PRO」で書いています。
2年で14,400円の契約ですが、趣味代と割り切っています
（当ブログは収益化していません）。
※自分だけのドメインが欲しかったという拙い動機です笑
今までははてなブログ純正のデザイン（公式テーマ）を使っていましたが、折角PROで色々出来るのだから、触ってみようと思い立ち、カスタマイズに挑戦してみました。
なお、筆者は文系卒で、HTMLやCSS等についてはごくごく基本的な部分のうち一部を浅く知っている程度です。
（段落って<p></p>の間に文字記載すればよかったんだよな…？というくらいのレベルです）.
そんな筆者でも、とりあえず見れる程度のページは作れた、ということを最初に述べておきます。
①まずテーマをどうするか？
1.テーマストア
はてなブログは、管理画面から「デザイン」を選ぶと、公式テーマが左側にずらっと並んで、その中から選択できるような形になっています。
しかし、一番末尾までスクロールすると"テーマストアで探す"という選択肢が出てきます。
テーマストアという名前ですが、無料のテーマも存在します。
2."minimalism" を選択
様々ありますが、筆者が選んだのは"minimalism" です。
シンプル・イズ・ザ・ベストを体現したような、まっしろなテーマです。
癖がないため好みを選ばないことや、デザインの調整幅が広いためだと思われますが、テーマストアでDL数ナンバーワンとのことです。
また、スマホ＆PCの画面幅変化に自動対応してくれる"レスポンシブデザイン"を採用。
②とりあえずシェアボタンとナビを入れてみる
さあ何から手をつけようか、というところですが、とりあえず上記記事で作成者様がオススメされていた、シェアボタンとナビを入れてみました。
これについては、作成者様が手順を書いてくださっているので、その通りやれば大丈夫でしょう。
③見出しを入れてみる
今まで見出しも設定していませんでしたが、上記記事で作成者様がオススメされていたこちらのページから、見出しを使わせていただきました。
作業については、デザイン→カスタムcssの部分に、以下ページからコピーさせていただいたコードをそのまま貼り付けるだけです。
注意点としては、このような記事ページに見出しを設定する場合、「大見出し」が「h1」ではなく「h3」に対応している事でしょう。
当初、「大」「中」「小」を「h1」「h2」「h3」と考えて設定して、ブログタイトルが「h1」の見出しになってしまいました。
20分くらい悩んで改めて調べ直して、やっと気づきました。
なお、このブログは最終的に「h3」「h4」のみ設定としました。
小見出しを使う機会があれば追加を検討するかもしれません。
④カテゴリを整理する
はてなブログは、記事公開の際にカテゴリを選択することが出来ますが、通常機能だと、カテゴリを複数重ねることが出来ません。
例えば「食レポ」カテゴリを作っても、「食レポ」のうち、さらに「ラーメン」「スタバ」など細分化したい場合があると思います。
しかし、通常機能は対応していません。
以下の画像のように、複数重ねるのには、特殊な設定が必要でした。
設定については、
こちらを参考にさせていただきました。
作業方法は丁寧に記載されているので、引っかかることもなかったです。
強いて言えば、何十記事を全部一からカテゴリ分類し直す作業が結構大変だったことくらいです。
（逆に言うと、カテゴリ分けは記事数が増えすぎない前にやっておくべきだと強く思いました。
このくらいの記事数だったから1時間かかりませんでしたが、何百何千記事とあればそれこそ泥作業になりそうです）
⑤読者になるボタンを復活させる（ボタンじゃないけど）
前まであったような気がしていましたが、いつの間にかなくなっていました。
折角はてなブログをやっているからには、はてなブロガーの皆様との繋がりは大事にしたいので、"読者になる"ボタンを復活させようと…しましたが、デザイン管理画面のどこを見ても設定が見当たらない…。
結局、調べた結果以下の記事にたどり着きました。
上の記事を参考にしつつ、とりあえずボタンまでは良いかなと思い、文字を大きく書いてリンクを貼る形で記事下に復活させました。
⑥トップページを作る
1.方法
アクセス数の多い方のページは華やかでありながら目の動線がよく考えられていて、憧れでした。
一方、自分のものはブログ名をクリックすると記事一覧が表示されるような、如何にもブログらしいブログでした。
良い悪いではないですが、自分は"ブログ"というより"ページ"を作ってみたいと思っていたので、調べて挑戦してみました。
方法は色々あるようですが、自分は、以下の記事を参照＆コードを使用させてさせていただいて、固定ページでトップページを作り、トップページのURLをその固定ページにリダイレクト（自動転送）する設定で作成しました。
もう少し具体的に説明すると、
omni-bus.infoが本来のトップページのURLですが、新たにトップページとして使いたいページのデザインを「omni-bus.info/top」というURLで、固定ページとして作りました。
そのうえで、omni-bus.info にアクセスした場合、自動的にomni-bus.info/topに移動するよう設定した、ということです。
2.デザイン
これは非常に難しかったですし、見ていただければ言うまでもないですが、現状まだ改善の余地が大いにあります。
余地があることを認めつつ、時間の問題でとりあえず完結させました。
参考にさせていただいたのは、こちらのページです。
また、上のページからリンクしている以下のページも参考にさせていただき、コードを使用させていただきました。
ただ、前述のとおりまだ改善の余地しかないので、今後時間をかけて作り変えていけたらなと思います。
⑦フッターを入れる
以下の記事に刺激を受けて、とりあえず記事上に入れたナビボタンにコピーライトを追加し、掲載してみました。
ちょっと存在感が無さすぎるので、今後変えるかもしれません。
⑧サイドバー・プロフィールの復活とアバウトページ
サイドバー、見た目が雑多になるような気がして、今までは「カテゴリ」のみの使用でした。
しかし、"筆者"を明確化したほうが良いかなと考えたため、プロフィールを復活させました。
併せて、プロフィール画像からリンクしているアバウトページを記載。
⑨Twitterを貼る
TwitterのTLをブログ下に貼ることで、Twitter→ブログ、ブログ→Twitterの連携をはっきりさせられるかなと考え、貼ってみました。
こちらのページを参考にさせていただいて、貼ってみたのですが、何故か縦に異様に長くなりました。
多分自分の、なんらかの設定ミスだと思います。
最終的に、以下を参考にさせていただいて、ツイート数のリミットを3としたら、程よい表示となりました。
⑩お問い合わせフォーム
Minimalism で作成者様が推奨されていたナビに、コンタクトの文言があったため、以下のページを参考にさせていただいて、作ってみました。
おわりに
良い時代なもので、インターネットで情報は簡単かつ無料で膨大に入手できます。
ごく浅くしかhtmlやcssについて知識を持たない文系でも、皆さんの知識や技術をお借りして、とりあえずのものを作ることが出来ました。
ここに御礼申し上げます。
なお、かなり膨大なサイトを閲覧させていただいているので、此処に紹介させて頂いたのはそのうちのごくわずかです。
少なくともコードや手順を使わせていただいたページについては全て紹介させていただいたと思いますが、万一抜けがありましたら、誠に申し訳ありません。
御一報いただければ、追記等いたします。
また、万一掲載内容等に問題がある場合につきましても、誠に申し訳ございませんが、御連絡お願い申し上げます。