ひびわれたまご

読者です 読者をやめる 読者になる 読者になる

ひびわれたまご

大人の発達障害(ADHD)当事者のイラストレーター・志乃が、生きづらさや”楽”について考えるブログ。

はてなブログのデザインカスタマイズのためにやった11つ、やらなかった2つ【リニューアルしました】

お役立ち系 お知らせ はてなブログ・カスタマイズ
広告

ひびわれたまご ADHD当事者ママが楽を考えるブログコミック志乃家 子育て絵日記ブログ 

お世話様です。志乃です。

スマホ&PC版ともに、ブログデザインを大幅リニューアルしました。

アクセス解析をチェックしたところ、90%のユーザーがスマホで御覧になっているということなので、スマホ表示に特化したデザインに変更しました。

以下に、やったことや参考サイトをメモしたいと思います。殆ど自分用のメモで、ある程度、HTMLやCSSなどカスタマイズに関する知識がある方向けの記事にはなっておりますが、基本的にはコピペでOKなものばかりです。

はてなブログを運営中の方の参考になれば幸いです。

はてなデザインテーマを「Innocent」に変更

Innocent - テーマ ストア

レスポンシブデザイン対応のデザインテーマを、公式ストアからダウンロード&インストールします。

管理画面→デザイン→左のメニューを一番下までスクロール→「テーマストアでテーマを探す」→「Innocent」を選択(人気のテーマにあると思います)→プレビューしてインストール

メニューバーを追加&色変更

moonnote.hateblo.jp

この記事に沿ってメニューバーを追加。色変更のため、RGBの参考にしたサイト。

www.colordic.org

色の名前とカラーコード、RGB、CMYKの一覧表

カスタマイズ→デザインCSSに↓を記述。

.main-navigation,
.main-navigation ul ul {
background-color: #(変えたい色のコードを入れる);
}

タイトル画像の変更

デザイン→カスタマイズ(スパナのマーク)→背景画像をアップロード

bg-patterns.com

こちらの素材サイトからお借りしました。

カスタマイズ→ヘッダ→タイトル画像→アップロード「ファイルを選択」。

 

f:id:shinoegg:20161206084716p:plain

f:id:shinoegg:20161206095553p:plain

背景は透明のPNGを作成→画像をアップロード「ファイルを選択」をクリック。

※透過PNGは重くなる場合があります。サイズに注意してください。

タイトル画像の余白の調整

www.underpowermotors.com

タイトル画像まわりの余白を調整。上のはてなメニューバーのせいか、余白が足りなかったり、下に余白ができすぎたりしたため処置(てきとう)。

上記サイトを参考に↓を、カスタマイズ→「デザインCSS」に。

#blog-title{
height:180px;
padding: 20px 0;
margin: 0px;
}

はてなブログトップページを最新記事一覧に

powerbombkun.hatenablog.jp

参考にさせていただきました。ありがとうございます。

Googleアドセンス広告の位置調整(記事中に自動で表示)

はてなブログにGoogleアドセンス広告を設置する方法

affiliate-hatekun.hatenablog.com

uxlayman.hatenablog.com

chipspd.hatenadiary.jp

「記事下」で、シェアボタンのすぐ上(記事中のラスト)に表示する方法

カスタマイズ→記事→「記事下」に以下をコピペ

<div id="my-footer">

※ここに書いたものが全記事のラスト(シェアボタンより上)に表示されるようになる

</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!--  ここまで記事-->

参考:【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常

Amazon&楽天リンクボタンのデザイン変更

便利なブログパーツ、ヨメレバカエレバを使っています。

www.yukihy.com

こちらを参考にさせていただきました。ありがとうございます。

サイドメニュー(サイドバー)のカスタマイズ

「レスポンシブデザイン」にした場合、スマホでは記事の下に並びます。

カスタマイズ→サイドバー→プロフィール編集。

はてなブログで画像を横並びにする方法(HTML編集)

ツイッターfacebook公式ページお問い合わせインスタグラムRSS

アイコン画像や、バナー画像などを用意→「はてなフォトライフ」からアップロード

<a href="リンク先URL"><img src="アイコン画像URL①"></a><a href="リンク先URL"><img src="アイコン画像URL②"></a>…

 

…改行タグ<br>を挟まないで続けて書いているだけ…。もっといい方法があるよって方、教えていただけると助かります…。

記事の幅いっぱいに画像を横に2つ並べる方法

imgタグに width="50%" を入れると半々の大きさで画像が並ぶ。

<a href="リンク先URL"><img src="左に置くバナー画像URL" width="50%"></a><a href="リンク先URL"><img src="右に置くバナー画像URL" width="50%"></a>

 

ひびわれたまご ADHD当事者ママが楽を考えるブログコミック志乃家 子育て絵日記ブログ 

aboutページの編集 

はてなブログで少し前に、aboutページが編集できるようになりました。

HTMLの知識があれば、結構好きなようにできるみたいです。

help.hatenablog.com

はてな記法の目次を利用しています。

staff.hatenablog.com

目次のデザインをカスタマイズ

powerbombkun.hatenablog.jp

 

「読者になるボタン」をCSSでスタイリッシュにカスタマイズ

somegoro.hatenablog.com

試したもののやめたやつ

記事下「あわせて読みたい」の設置

www.jimpei.net

corp.shisuh.com

Milliardを設置してみましたが、デザインテーマ「Innocent」なら、サイドバーの調整で「関連記事」を持ってきた方がスマート(フレームが邪魔臭い)。

スマホでは、記事のすぐ下にPCサイドバー一番上のモジュールがきますので「関連記事」を持ってくれば解決。私はバナーなど「プロフィール」を一番上に持ってきてみました。

普段、記事中に載せている関連記事は、はてなブログ関連記事ジェネレータを使わせていただいています。

d.hatena.ne.jp

SNSシェアボタンのデザイン変更

忍者おまとめボタンが便利で簡単です。

www.ninja.co.jp

が、かなりページが重たくなるので、あまりお勧めしません…。

デフォルトのシェアボタンのデザインはいまいちですが、トップページの記事一覧でも表示されたり、メリットも大きいんですよね…。

公式のシェアボタンのデザインを選べるようになればいいですね。 

 

その他にも色々やったような、やってないような。

試行錯誤を繰り返しているので、もはや何がなんだか分かるなくなるため、後々のために今回やったことをまとめてみました。何か参考になれば幸いです。

参考にさせていただいたサイトの管理人様方に、心より感謝申し上げます。

現場からは以上です。

関連記事(このブログ内)