はてなブログのテーマを変更して、さらにカスタマイズもしてみたのでまとめてみる

スポンサーリンク

ブログカスタマイズが面白すぎて、記事を書くのを忘れてしまいそうです。

これまでにもたくさんブログをいじくりまわしてきたのですが、ここ数日でさらなる変化を遂げたのでまとめてみます。

開設当初から今までやったことのまとめはこちらの記事からどうぞ。

はてなブログを始めて4ヶ月を過ぎたので開設当初からのまとめ

2015.12.07

ここ数日でとりあえずやったこと

パソコン・スマートフォン共通

  • はてなブログテーマの変更
  • 見出しの変更
  • 引用の変更
  • ブログタイトルをセンターに
  • ブログ用Twitterアカウントの作成とプロフィール画像の作成
  • 独自ドメインの取得
  • カテゴリーの整理

パソコン

  • 画像の浮き出し

スマートフォン

  • Google AdSenseの広告の位置を記事上からブログタイトル下に変更
  • メニューをトグルメニューからグローバルメニューに変更
  • ブログのアイコンを消した
  • ブログの概要を消した

実際のカスタマイズ方法とか

前回のまとめと同じように、それぞれの項目に関して僕が参考にさせていただいたサイト様や、実際に書いた記事等をご紹介していきたいと思います。参考程度にどうぞ。

はてなブログテーマの変更

はてなブログのテーマをFresh Greenからblankに変更しました。

次の項目の「見出しの変更」においてデザインの変更を試みましたが、もともとのCSSとぶつかっているのか、見出しが思った通りに表示されませんでした。力量不足もあり、やむなくテーマの変更を行ったわけです。

色合いなどはFresh Greenの方がツボだったので、その辺は移植しました。

見出しの変更

主に見出しのデザイン変更、また、記事中の見出しが正しく使われているかHTMLでひとつひとつ見直していきました。見出しカスタマイズは「LAZY LOOSE LOG」様からまるっとお借りしました。

見出しの見直しについてはこちらの記事をご覧ください。

はてなブログの見出しが正しく使われているか見直してみた

2015.12.07

引用の変更

文章を引用した場合に表示される「引用デザイン」を変更しました。スマホでは上手く表示されたのですが、パソコンだと右側の「”」が 枠からはみ出てしまっておりました。調整をしてみたのですが上手くいかず、左側の「“」のみで引用デザインとしました。

こちらの記事の「引用枠の表示を変える」の引用デザイン1、引用デザイン2を使用させていただきました。

参考:はてなブログのデザインカスタマイズ方法(簡易版)

ブログタイトルとブログ概要をセンターに

左側に表示していたブログタイトルとブログ概要ですが、デザインをちょこっといじり、センターに配置しました。

こちらも「LAZY LOOSE LOG」様の記事にあったものをお借りし、細かい調整は自分で行いました。

Before

f:id:afrokanchan:20151212115214j:plain

After

f:id:afrokanchan:20151212115251j:plain

ブログ用Twitterアカウントの作成とプロフィール画像の設定

500日前に作成していた未だ使われていないTwitterアカウントがあったので、それをそのままブログ用Twitterアカウントとして使用することにしました。

プロフィール画像の設定も合わせてこちらの記事でまとめております。

500日前に作ったTwitterアカウントをそのままブログ用にしてみた

2015.12.09

カテゴリーの整理

ブログのカテゴリーをわかりやすいように整理しました。カテゴライズをしっかりすることでグローバルメニュー、パンくずリスト等のさらなる効果アップが期待できますね。

メモ帳を使ってブログ記事をカテゴリー整理したらはかどった

2015.12.08

画像の浮き出し(パソコン)

とてもお洒落だったのでこちらも「LAZY LOOSE LOG」様からお借りしました。素敵です。

Google AdSenseの広告の位置を記事上からブログタイトルに変更(スマホ)

ここが一番しんどかった項目です。記事上に設定しているとスマホトップページには表示されないので、タイトル下に位置を変更してみました。

いろいろ調べてやっとたどり着いたのが「太陽がまぶしかったから」様の記事です。やはり困った時はここにいけばなんとかなりますね。助かりました。

参考:はてなブログのアーカイブページやプロフィールページにアドセンス広告を表示させるプラグイン

メニューをトグルメニューからグローバルメニューに変更(スマホ)

Before

f:id:afrokanchan:20151212115347j:plain

After

f:id:afrokanchan:20151212115410j:plain

以前までは「Yukihy Life」様のトグルメニューを使用させていただいておりました。

参考:コピペ1発+αではてなブログスマホ画面にトグルメニューをつけるカスタマイズ

しかし、どうやらアドセンス広告と相性が悪いようで、上手く表示されなかったんですね。そこでトグルメニューからグローバルメニューに変更したわけでございます。

こちらの記事からコードをお借りしました。あとは数字をテキトーにいじって調整です。

参考:はてなブログのスマホ表示にグローバルナビゲーションを設置する

ブログのアイコンと概要を消した(スマホ)

こちらの記事を参考にさせていただきました。ブログのアイコン、概要をごそっと取り除いたおかげでだいぶスッキリしました。

参考:はてなブログのスマートフォン表示から不要な要素を削除する方法

参考にさせていただいたサイト様

「LAZY LOOSE LOG」様

参考:CSSではてなブログをカスタマイズしてみよう

まとめ(追記あり:2016/3/13)

そんなこんなで、またブログをカスタマイズしてしまいました。

ひとつひとつデザインを自分好みにしていくことでブログにも愛着がわきますね。

追記:2016/3/13

僕の2016/3/13現在のカスタマイズはこちらです。「Blooklyn」を使用しています。

【カスタマイズ記事】はてなブログのデザインテーマをレスポンシブ対応の「Brooklyn」に変えてみた

2016.03.06
スポンサーリンク

この記事を書いた人

あめよふれ あめのはっていいます。どうぞよろしく。
「”とり”あえずやっ”てみ”る。略して、とりてみ」がモットーの24歳。ノマドチャリダー。自転車で日本一周してます。アニメ聖地・心霊スポット・世界遺産巡り。趣味はアニメ鑑賞・ベース演奏・旅行・カメラなど。