はてなブログをカスタマイズ!拡張性の高いテーマやおしゃれなデザインまとめ【レスポンシブ対応】|アツメタイズブログはてなブログをカスタマイズ!拡張性の高いテーマやおしゃれなデザインまとめ【レスポンシブ対応】2018-06-13スポンサーリンクどうも!Sokabeです。ここ数日はブログのデザインをカスタマイズしておりました。記事の質も大事ですが、やはりブログがダサかったりごちゃごちゃしていると読者も何度も見に来てくれないだろうと思ったのです。今回、いろいろ改造した結果、かなり自分の思い通りのレイアウトに仕上げることができました。今までと比べてだいぶ印象が変わったんじゃないでしょうか?ブログの改良できる箇所はいくつもあり、それをすべて一から調べて変更するのは大変だと思うので、この記事では僕が参考にさせてもらったテーマやデザインをまとめてみました。これであなたのブログも生まれ変わらせてみてください。上に戻るボタンテーマ「Minimalism」これまでよりもシンプルなデザインにしたかったので、「最小限のデザインで最大限の「美」を引き出す」テーマ、「Minimalism」を使わせていただきました。「Minimalism(ミニマリズム)」はひつじさんが作成、デザインしたテーマになります。シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。ひつじの雑記帳レスポンシブ対応なので、一度PCで設定すればスマホでもカスタマイズした同じパーツが使用できます。見出しのデザイン変更Minimalismはそのままの状態では大見出しも中見出しもただ文字が大きいか小さいかくらいの差しかないシンプルな状態です。見出しのデザインはたくさんあるので、公開されているものから好きなものを選び取ってデザインCSSに入れると変更が可能です。参考にしたブログはこちら。saruwakakun.comおしゃれな見出しデザインがいっぱいです。なかにはあこがれのブロガーさんが使用しているものまであります。見出しのデザイン次第で書いてある文章の印象はガラリと変わると思うので、自分の構想にピッタリ合ったデザインを見つけ出してみてください。更新日時の追加これから記事のリライトも頑張っていこうと思ったので、せっかくならリライトしたことを読者にも知ってもらいたい!、ということで記事の投稿日の隣に更新日時も追加しました。つばさのーと採用してるテーマ次第では更新日時とカテゴリがスマホ表示の時に被ってしまうことがあるので、お気をつけください。自分が1番凝ったところです。ブログ全体に何が書いてあるかすぐにわかる部分がグローバルメニューなので、できるだけこだわりたかったのです。参考にしたサイトはこちらwww.yukihy.com手順をかんたんに説明しておくとcss設定(あとから改造するためWordにでもコピペ)タイトル下に入れるHTMLコード設定(後から改造するためWordにでもコピペ)入れたいカテゴリのURLとカテゴリ名を入力(HTMLのほうに)グローバルメニューの色など好きなところをカスタマイズ(cssのほうに)デザインcss、タイトル下にそれぞれコードを貼るコードを書き換える作業が必要になるので、あらかじめ必要なところを変更してから貼り付けるようにしましょう。僕は貼り付けてから改造したのでえらく手間がかかりましたカテゴリの階層化カテゴリは今まで直感的に設定していたのでかなりとっ散らかっていました。はてなブログでもカテゴリを階層化する方法があると知ったので早速実行。カテゴリ階層化の方法はこちらのページを参考にしました。blog.wackwack.netリンク先に飛ぶ前に簡単なプロセスを書いておくと公式のパンくずリストをオンにするカテゴリを階層化させる(記事編集ページのカテゴリ設定から「カテゴリ1」「カテゴリ1-カテゴリ2」「カテゴリ1-カテゴリ2-カテゴリ3」というふうにカテゴリを繋げていく。すると「トップ>カテゴリ1>カテゴリ2>カテゴリ」というようにカテゴリがパンくずリストで階層化されるカテゴリーをアルファベット順に表示するよう設定するスクリプトの設定(コードを貼る)スタイルシートの設定(コードを貼る)カテゴリは設定するときに階層化したいものから選んでいかないといけないので注意してください。上の画像は読書感想よりもボードゲームについて語る要素が強いため、ボードゲームカテゴリを先に持ってきて読書カテゴリより先に置いています。タイトル画像自作ブログ名を変えるにあたってブログタイトル画像も変更しました。今回、シンプルなテーマに変更したのでタイトル画像もさわやかめにしました。実際は背景から青を抜いて、文字だけだと殺風景なので枠を左上と右下に描いただけです。文字を縁取ろうとしたら線がめちゃくちゃでまともに縁取りできなかったので、みなさんはフォントをイラストで自作するときは線をキレイに書きましょう。シェアボタンシェアボタンが配置されていると記事全体としてのデザインがグッと引き締まるので設置。参考にしたブログはこちらです。www.yukihy.comやることは簡単で記事下にコードを張るデザインCSSにコードを張るシェアボタンを設置したい「記事上」か「記事下」にコードを張り付けるという感じになります。上に戻るボタンやはり長文な記事があったり、トップページに最新記事が7つ表示されたり、カテゴリ一覧がサイトの下にある場合は何度もページの上に戻りたくなります。そんな僕のブログの不便さを解決すべく設置したのが上に戻るボタン。ワンクリックでページ上まで登ってユーザーの負担を軽減してくれます。参考にしたブログはこちらazanaerunawano5to4.hatenablog.com後からアイコンの形や表示の仕方を変更できます。コメントをキャンセルメールアドレスが公開されることはありません。32ブログ内検索Sokabeボドゲと伝説対決が好きな大学生。全てのゲームそこそこ上手い人になりたい。収集もカスタマイズも好きなのでブログ「アツメタイズ」始めました。