今夜はロールバック!

毎週火曜に1冊、オススメ小説を紹介していきます。

TOP

はてなブログを始めて最初にやったことのまとめ

f:id:momogaaaa:20170513180959p:plain

はてなブログを始めて最初にやっていったことをまとめておく。

 

 

 

テーマ(テンプレート)を決める

はてなブログではWordPressと同じようにテーマを適用することができるのでイメージにあったテーマを適用していこう。

テーマ ストア - はてなブログ

 

今回使用したテーマはこちら。

Blank - テーマ ストア

 

hタグを装飾する

デフォルトだとhタグ(見出し)が太字のみで味気ないのでCSSをカスタマイズして見出しを装飾した。

www.nxworld.net

配色はこちらのサイトを参考に。

www.color-sample.com

 

サイドバーの見出しも装飾する

hタグ同様サイドバーの見出しもかっこよく変更した。

nelog.jp

 

リスト(olタグ)を装飾する

olタグのリストもデフォルトだと味気ないのでこちらを参考にカスタマイズ。

コピペで使えるリストデザイン例34選:CSSでおしゃれな箇条書きを作ろう

 

スマホ用デザインを作る

最初はレスポンシブデザインのテーマをそのまま使っていたのだが、スマホで見た時にあまりいけていなかったのでスマホのデザインはPCとは別の方法で作成することに。

すごく有名なブログだが非常に有益な情報ばかり。

しかも高校生の方が書いたとのことでビックリ。

hitsuzi.hatenablog.com

 

ヘッダー画像の設置

ヘッダー画像はGIMPで作成。参考にしたのはコチラのサイト。

synclogue-navi.com

synclogue-navi.com

 

ヘッダー画像自体の作成とはてなブログへの設置自体は簡単にできたのだが、設置してみて確認してみたらPCだと問題なかったのだがスマホで見たら画像がそのままの大きさで表示されていた。。こちらのサイトを参考に解決。

blog.z0i.net

 

吹き出しを作る

こんな吹き出しをつくってみた。

 

shiromatakumi.hatenablog.com

 

カテゴリのデザインを変更

このページで紹介されているデザインを適用することに。

www.nxworld.net

CSSのul liの部分を「.hatena-module-category .hatena-urllist li」へ変更して下さい。「ul」だけの部分は「.hatena-module-category .hatena-urllist」へ変更。

 

トップへ戻るを入れる

この機能って読む側からすると必須の機能。

www.colmin.xyz

 

初めての記事投稿

はてなブログでブログを書くとデフォルトだと記事URLが日付になるので、自分で好きなURLパスを決めることに。

happylife-tsubuyaki.hatenablog.com

 

はてなブログProへ変更

ブログが3日坊主にならないようにという願いをこめて最初のタイミングではてなブログProへ移行。せっかくなので独自ドメインも設定することに。

www.mutant-tetsu.com

 

ブログ初心者には嬉しいTODOリスト

はてなブログ初心者には嬉しいTODOリスト

blog.hatena.ne.jp

 

今ヘッダーナビゲーターの設置

ヘッダのメニューの作り方。

 

akiueo.hatenablog.com

 

www.yukihy.com

 

さいごに

実はこの記事を書いた後でテーマを変更したので多少勝っては違ってきているが、それでも当時何をやったかということを忘れないためにもこの記事は残しておこうと思う。