今夜はロールバック!

プログラミングよりも写真が好きです。

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

f:id:momogaaaa:20170513180959p:plain

どうもももがです!

今月から念願のはてなブログをスタートしました!はてなブログのよいところはWordPressのようにブログをスタートしてからプラグインを入れたり〜ということはせずにいきなり記事をかけることではないでしょうか。初心者にうれしいです!昔WordPressでは苦労をしたものでして。。

とはいっても一番最初のデフォルトのデザインじゃちょっと物足りないということでデザインを少しだけ変更しました。ちょっとだけではあるのですがはてなブログ初心者の自分は色々と調べながらだったので結局1〜2時間使っちゃいました。(^^;

この記事では自分がはてなブログは始めて最初にやったことをメモとして残しておきます!

 

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

はてなブログではWordPressと同じようにテーマを適用することができます。はてなブログのデフォルトのテーマだとちょっとはてなブログぽさが全開だったのでテーマは変更することに。こちらからテーマを選ぶことができます。

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

僕が今回使用したテーマはこちらです。

Blank - テーマ ストア

 

hタグを装飾する

デフォルトだとhタグ(見出し)が太字のみで味気ないのでCSSをカスタマイズして見出しを装飾しました。CSSはこちらのを使わさせてもらっています。

www.nxworld.net

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

www.color-sample.com

 

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

hタグ同様サイドバーの見出しもかっこよく変更しました。こちらのサイトを参考にさせてもらいました。

nelog.jp

 

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

olタグのリストもデフォルトだと味気ないのでこちらを参考にカスタマイズしました。ulタグも一緒に変更しようとしたら目次が崩れてしまって今はolタグのみに適用しています。ulタグにも反映させるにはちょっと工夫が必要ですね。今のところはスキップで。

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

 

スマホ用デザインを作る

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

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

高校生の方が書いたとのことでビックリです(@@)

hitsuzi.hatenablog.com

 

ヘッダー画像の設置

ヘッダー画像はGIMPで作成しました。参考にしたのはコチラのサイトです。シンプルな画像なので10分程度で作りおえました。またどこかで手の凝った画像も作ってみたいです。ファビコンもこのタイミングで作成しました!

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」へ変更します。

 

トップへ戻るを入れる

この機能って読む側からすると必須の機能ですよね。こちらのサイトを参考にしながら作成しました。jQueryのバージョンが少し低いのでお好みで3系にアップしてみてください。僕は3系へアップしましたが正常に動きました。

www.colmin.xyz

 

初めての記事投稿

はてなブログでブログを書くとデフォルトだと記事URLが日付になるので、自分で好きなURLパスを決めます。多分SEO的にはこっちのほうがよいのでしょうか?よくわかりませんがWordPressを今まで使ってきた僕はURLパスはわかりやすい方が好きです。Googleアナリティクスでも読みやすいですし。

happylife-tsubuyaki.hatenablog.com

 

はてなブログProへ変更

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

www.mutant-tetsu.com

 

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

はてなブログ初心者の僕は最初なにをすればよいのかがまったくわからなかったのでオフィシャルでこういうTODOリストのようなものがでているというのは嬉しいですね。最初は大人しくこのリストに沿って作業を進めていきます。

blog.hatena.ne.jp

 

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

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

 

akiueo.hatenablog.com

実際に使うHTMLとCSSはこちらを使わさせてもらおうと思っています。

www.yukihy.com

 

さいごに

デザイン的にはまだまだかもしれませんが、まあ何とか読めるレベルまでにななったので満足しています。 もう少し記事が充実してきたらデザインにも凝っていきたいところですね。デザインばかり先行するのもちょっと・・って感じなので。

とはいっても何とかはてなブログをスタートすることができました!これで日々のことを記録していきたいところです。とりあえずはテーマは決めずに自分の好きなことややったことをバリバリ書いていきます。半年後くらいにどんなブログになっているのか自分でも楽しみですね。

それでは!