BIアナリストの雑記ワークダイアリー

20代後半。平日はサラリーマンとして働きながら、週末にビジネス・アナリストとして副業活動してます。お仕事ネタ系、自己啓発系中心ネタを発信しています。

超初心者がはてなブログProでCSSデザインに初挑戦(スマホ)

スポンサーリンク

f:id:zakkiworkdiary:20161112140112p:plain

本ブログを開設してから1ヶ月とうとう我慢できなくなって、はてなProへアップグレードしました。

やっと念願のスマホのデザインがいじれるとの事なので、昨晩2〜3時間ほどかけて一変にやっていました。

本エントリーでは、そんなブログ超初心者の私が、具体的に行ったこと(ほぼ100%コピペ)などをご紹介します。

前提条件

下記私の前提条件です。

  • はてなブログ歴1ヶ月
  • 今回スマホデザインしかいじってない
  • HTMLの知識は多少あるが、CSS・Javascriptは一切なし
  • 他の言語はCやPythonを数値解析でちょっと使うぐらい

そんなんでほぼGoogle先生を、様々なはてなブログお先輩方のエントリーを参考にしながらひたすらコピペをしておりました。


最初に全体の完成イメージと色を決める

まず色々いじってみる前に、完成イメージをある程度想像しました。

イメージとしては自分が読みやすくていいなーと思っているメディアの形などを参考に、それに近づけるような方にします。

ちなみに私がイメージの参考にしたのは、下記のEntrepreneurという海外のスタートアップ系ビジネスサイトのスマホ版です。

参考サイト: Entrepreneur - Start, run and grow your business.

また、カラーイメージも上記を参考にしました。

下記Adobe Kulerというカラーのコンビネーションサイトを参考に、背景色、強調色のHEXをメモ帳に書き留めていきます。

参考サイト: Adobe Color CC


はてなスマホデザインから不要なものを全て取り除く

主にタイトルバー、広告、タイトルの丸いアイコン、開発ブログなどへのリンクを下記サイトを参考にして取り除きました。

参考サイト: はてなブログのスマートフォン表示から不要な要素を削除する方法 - またろぐ


メニューバーを追加

f:id:zakkiworkdiary:20161112141739p:plain:w300

本サイトの一番最初にある、クリックするとニューと出て来る、メニューバーを下記サイトを参考に作成しました。

参考サイト: http://www.yukihy.com/entry/improvement-toggle-menu


一覧記事のデザインを変更

f:id:zakkiworkdiary:20161112142010p:plain:w300

記事一覧のブログカード(?)も、日付などを消して、できるだけ見やすくするために下記サイトを参考させていただきました。

参考サイト: はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - LITERALLY


見出しのデザインを編集

f:id:zakkiworkdiary:20161112144557p:plain:w300

見出しについては、Proになったら一番にやりたいことでした。

下記サイトを参考に、シンプルで一番自分の気に入ったチョイスを、h3とh4にそれぞれ使わせていただきました。

参考サイト: シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld


目次を最初は隠しておき、クリックすると表示するようにする

f:id:zakkiworkdiary:20161112143445p:plain:w300

私目次大好きなんですが、あまりにも長すぎるとちょっと見づらくなってしまいます。

そこで、またもや下記サイト参考に目次を最初に隠しておき、クリックすると表示するような形にしました。

参考サイト: http://www.yukihy.com/entry/hatenablog-table-of-contents-custom


あわせて読みたいを記事下に表示

f:id:zakkiworkdiary:20161112143652p:plain:w300

ついで今まで記事に自分で記事の中に同様のトピックスの記事を手動で入れてたのですが、それを自動でやってくれるよう記事下にあわせて読みたい記事を表示させるようにしました。

参考サイト: はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから


パンくずの挿入

f:id:zakkiworkdiary:20161112143844p:plain:w300

最後に、Google先生に大変喜ばれると言われるパンくずリストを記事下に挿入しました。

参考サイト: はてなブログにパンくずリストをつけてみた - 明日こそ、定時

最後に

こうしてみると、全部先人の方々が苦労して築いてきた作業のコピペ作業です。

上記参考にさせていただいたブログの作者様方には感謝の意でいっぱいでございます!!ありがとうございます!!

今後も更にご参考にさせていただくこともあるかと思いますが、よろしくお願いします。

私も自身も勉強しなくては、、、