ミライヲラシク!

つまづいてばかりのこれまでを「変えていく」足跡ブログ

【ミライヲラシク!版】はてなブログのカスタマイズまとめ

f:id:yu-eagles:20171114181837j:plain

当ブログ『ミライヲラシク!』を開設してからまもなく1周年を迎えます。パチパチ。

まっさらな更地だった場所に一つずつ記事を投稿して、ブログカスタマイズを施してきました。「1年やってこれかよ!」ってツッコミが飛んできそうですが、ゆっくり続けられたことが嬉しいんですよね。兎と亀ならぼくは亀。

この機会に当ブログで行ってきた「ブログカスタマイズ」をまとめておきます。これからはてなブログを始める方に参考にしてもらえるように書いていきます!

 

 

はじめに

今回紹介するのは「はてなブログ」のカスタマイズ。

僕にはHTMLやCSSの知識がほとんど無いので、他の先輩ブロガーさんが残してくれたカスタマイズ方法を利用してブログを形成しています。

なお、私ははてなブログProを使っています。無料版ではカスタマイズに制限があるため今回ご紹介する内容が利用できない場合があります。無料版を利用する人は「はてなブログ カスタマイズ 無料」で検索してみると参考になる記事が見つかりますよ!

ブログ全体

今回の記事は「これからはてなブログを始める人」がターゲット。まずはデザインカスタマイズの前にブログを始める前にやっておくと便利なものをご紹介します。

プロフィールアイコン

「自分の顔」としてブログ上に表示させるプロフィールアイコンはすごく大事です。

顔出ししたい人であれば自分の写真でいいですが、ほとんどの場合は代わりになるアイコンが必要。僕の場合はココナライラストレーターの方に描いていただいたアイコンを使用しています。

500円から依頼できる点がポイント。今度はヘッダー画像を書いてもらいたいなって考えていたりします。

サムネイルの作成はスマホアプリで

サムネイルやタイトルなど画像に文字を入れてブログに使用するときには、スマホアプリの「Phonto」を使用しています。

スマホに写真を取り込んで文字を入力するだけ。たくさんのフォントが用意されていて直感的に操作できるがいい。Phontoを使って記事サムネイルをいつも5分程で作成しています。

Phonto 写真文字入れ
Phonto 写真文字入れ
開発元:youthhr
無料
posted with アプリーチ

写真素材

自分で撮影した写真のほかにフリー写真素材サイトの「ぱくたそ」を使用しています。

www.pakutaso.com

パソコンテーマ「ZENO-TEAL」

f:id:yu-eagles:20171114175314p:plain

orefolder(id:c-miya)さんが作成された『ZENO-TEAL』を使用しています。

ZENO-TEAL - テーマ ストア

トップページをカード型(サムネイルが整列して大きく表示)にしたかった。そこで見つけたのがこのデザインテーマ。かなり人気のようで周りのブロガーさんも利用されている方が多い印象です。

 ヘッダー

タイトル画像は自作。よこ1000px、たて200pxで作成。

ヘッダー下のメニューはZENO-TEALの公式ブログを参考にしています。

zeno-teal.hatenablog.com

記事上:シェアボタン

f:id:yu-eagles:20171114162252j:plain

ゆきひーさん(id:ftmaccho)さんのデザインを使用させていただいています。

アクセスを増やすために重要なのがシェアボタンの設置。シンプルでわかりやすいデザインで気に入っています。

www.yukihy.com

見出しデザイン

f:id:yu-eagles:20171114171346j:plain

つばささん(id:tsubasa123)のデザインを参考にしています。

見出しデザインを変更するだけで文章の読みやすさが格段に上がります。

www.tsubasa-note.blog

記事下:アイキャッチ&フォローボタン

f:id:yu-eagles:20171114162534j:plain

orefolderさん(id:c-miya)さんのデザインを参考にしています。

とてもおしゃれで気に入ってます。サムネイルに力を入れないといけないなと思わせてくれるほどデザインが素敵。

www.foxism.jp

サイドバー

f:id:yu-eagles:20171114162621p:plain

ゆきひーさんのデザインを利用させていただいています。

読者登録やツイッターのフォローにつながる部分なので目立つ位置に配置してます。

www.yukihy.com

カエレバ・ヨメレバ

f:id:yu-eagles:20171114162750j:plain

こちらもゆきひーさんのデザインを導入しています。

www.yukihy.com

関連記事へのリンク

f:id:yu-eagles:20171114163015j:plain

シロマ(id:shiromatakumi)さんのデザインを参考にしました。

開設してから先日まで記事末にリンクを設置していなかったんです。まだ設置していないという方はすぐに設置することをオススメします。回遊率アップ!

www.notitle-weblog.com

問い合わせフォーム

Googleが提供しているサービス「Google フォーム」を導入しています。

Google フォーム - アンケートを作成、分析できる無料サービス

読者からメッセージを送ってもらうときに必要ですが、その他にもAmazonアソシエイトを利用しているならば設置は必須と言っていいはず。

設置する方法については、てつさん(id:mutant-tetsu)さんの記事がすごくわかりやすいです。

www.mutant-tetsu.com 

スマートフォンテーマ

f:id:yu-eagles:20171114175256p:plain

『ひつじの雑記帳』こどみすさんを参考に

スマートフォン版のカスタマイズはこどみすさん(id:codomisu)のデザインを参考にさせていただいています。

hitsuzi.hatenablog.com

これまでお世話になったデザインテーマ

1年間でお世話になったデザインテーマを感謝を込めてご紹介します。どのテーマも個性があって使いやすいものばかり。こんなに素敵なテーマが揃っているはてなブロガーは幸せものです。

Minimalism

こどみすさん作成のテーマ。シンプル!なのにおしゃれ!このテーマでいつかエッセイブログとか書いてみたい。

Minimalism - テーマ ストア

Innocent

半月さん(id:waitingmoon)作成のテーマ。落ち着いたデザインがとても好き。初心者ブロガーさんにオススメしたいテーマの一つ。

Innocent - テーマ ストア

これからの課題とまとめ

以上、ミライヲラシク!のブログカスタマイズまとめでした。

1年間だらだら更新してきて、もっと早くカスタマイズしておけばよかったと今は後悔してます。次の1年はもう少し前のめりでブログに取り組めればいいかなと。

今回ご紹介したカスタマイズ方法を発信してくださっているみなさま、本当にありがとうございます。みなさんのおかげでHTMLやCSSに知識のない僕がブログを続けてこれました。

これから先の課題としてデザインやHTML、CSSの学習もブログ更新と並行してやっていきたいですね。スマホデザインももう少し手を入れてみたい。

最後まで読んでいただきありがとうございました。

この記事が気に入りましたらシェア&フォローお願いします!