はてなブログのテーマを【Brooklyn】に変更してやったこと。
こんにちはサンクマです。
はてなブログのテーマを【minimalism】から【Blooklyn】に変更いたしました。
CSSなどカスタマイズした部分を、備忘録的に描いていきます。
基本は他の方々の紹介記事などをコードをコピペしただけです。
この記事は、私がはてなブログのテーマ【Blooklyn】のテーマを導入するにあたりやったことを、書いています。
SHIROMAさんが作られているテーマです。
私がブログに求めるデザインは【シンプル】で【モノトーン】な物です。
【Blooklyn】はまさにピッタリ!!です。
テーマのカスタマイズはSHIROMAさんのページに詳しく書かれていますので参考にしてみてください。
はてなブログを始めたての方や、初心者の方は【minimalism】から【Blooklyn】などの人気のテーマを使うと、参考記事がたくさんあるのでわかりやすいと思います。
ブログのヘッダー画像を作成。
使ったもの
【adobe spark post】
その中の【adobe spark post】でヘッダーを制作いたしました。
【adobe spark post】は直感的に操作できるので、初心者の方でも気軽にお洒落なデザインが制作できると思います。
私は【Adobe creative cloud】に加入しています。
【Adobe creative cloud】には【Photoshop】や【Illustrator】の他、動画編集ソフトの【Premier Pro】、【After Effects】 など沢山のソフトがバンドルされています。
私はYouTubeのために【Premier Pro】【Photoshop】が欲しかったのですが、単体購入するよりも、【Adobe creative cloud】を全部購入した方が安かったので、全部入りのAdobe creative cloud】を購入しました。
購入元は【ヒューマンアカデミー通信講座「たのまな」】経由で購入しました。
裏技的な方法ですが【ヒューマンアカデミー通信講座「たのまな」】の通信講座経由で購入することにより、学生価格で購入するすることができます。
また、ソフトだけでなく。ストリーミングの動画講座がついているので、初心者の方にはお得だと思います。
グローバルナビゲーションバーを設置
▼ヘッダー画像下にあるカテゴリにジャンプできるバーです。
FontAwsomeでアイコンを追加
▼家の形をしたアイコンです。
記事内のデザインCSSの変更
蛍光ペンで文字を強調する。
こんな感じです。
枠線のCSSを追加
▼例えばこんな感じです。
こんなのとか。
こんなのです。
文字の大きさの変更
記事内の文字の大きさを変更しています。私は現在17pxにしています。
サイドバーにツイッターのタイムラインを埋め込む
この記事は現在進行形です。
今テーマを切り替えて、デザインを試している最中ですので。
新しい内容が出たら、また追記していきたいと思います。
この記事は随時変更していきます!