random my note

半分気楽に半分まじめに(*´ω`*)

ブログのデザインのついて

この記事をシェアする

最近ひさしぶりに、はてなブログを開いてみたら、デザインや文字フォントやブログの構成などが汚かったので、このブログのデザインを一新し、改良しました。

まずはじめに

今まではてなブログでは「見たまま」で文章を書いていましたが、「Markdown」の方が慣れてきたのでMarkdownで書くようになりました。ソースコードの挿入やリンクの埋め込みであったり。文章や文章の強調などが非常にしやすいので、今ではMarkdown一つになりました。良く利用するLatex(Wordみたいなやつ)やREADMEを書く際に非常に便利なので、何だかんだMarkdownを利用するようになってしまいました...

また、「見たまま」では文字フォントなどが崩れてしまっていて結局HTMLを見直したりしていたので、Markdownの方が大分便利に感じます。

Markdownの書き方については ↓ のサイトを参考にすると書きやすいと思います。

以降、本記事ではブログを一新した際に参考にしたサイトを紹介していきたいと思います。はてなブログで文章を書く際の参考にしてもらえたらと思います。

参考サイト

はてなブログのテーマについて

はてなブログのテーマ機能は非常に便利で助かるばかりです... 自分でひな形を作らなくても誰かが作成したものを利用できるため便利です。私は「Silence」というテーマを利用させて頂きました。ホームページが綺麗なのに加えて、PCとSmartphoneの両方で綺麗に見えるレスポンシブ対応であり、さらにグローバルナビやフォローボタンの設置に関しても比較的簡単にできたので良いテーマだと感じました。

色について

上のサイトでは日本の伝統色について、楽しく実際の色が分かりやすいので非常に便利です。ついついボタンをポコポコ押したくなってしまいます。 下のサイトでは色の配色について理解しておくといいことが多いので。。。このページは自分でPower Pointで見やすい資料を作る際にも便利だと思います。

文字フォントと文字間隔について

自分が書いているブログの文字フォントや文字間隔などはこの二つのサイトを参考にして決めました。個人的には見やすく、そこそこ綺麗な文字になっていると思っています。 デザインCSSの

<p>example</p>

の部分でフォントなどをいじることができます。

見出しのデザインについて

このサイトは少し重いのでリンクだけ。 Markdown, HTMLでいう

# example      <---->   <h1>example</h1>
## example    <---->   <h1>example</h1>
### example  <---->  <h1>example</h1> 

の部分をいじる際に上のサイトを参考にしました。ささっとできます。


これらで大分改善できました。ブログを書く際にはブログのデザインは重要な部分だと思うので参考程度にしてもらえたらと思います。また、自身が新しいブログをはじめようとする際にも利用できる部分なので、しっかり理解しておいても良いと思います。 自分だけのデザインができるのは楽しいですね。

にほんブログ村 大学生日記ブログへ
ブログランキング・にほんブログ村へ