はてなブログ カスタマイズまとめ

今回は、はてなブログ カスタマイズ記事のまとめです。

 

これまでに紹介してきたレイアウトやデザインカスタマイズ系の記事が増えてきたため、一覧ページを作ってみることにしました。

実際の動作と合わせて紹介していくので、取り入れたい記事を探してみてください。

もくじ

はじめに

 

今回紹介する内容は「はてなブログカスタマイズの記事一覧」について。

 

当ブログでは、はてなブログで使える「html」「css」「JavaScript」のコードについて紹介してきました。

紹介していくうち、記事が増えてきたため任意のカスタマイズを探しにくくなっているかもしれません。

 

そこで、カスタマイズの実装例と合わせてまとめたので、順番に紹介していきます。

かなり長い記事になってしまったので、目次を利用しつつ気になった記事を探してみてください。

 

Point
はてなブログのカスタマイズまとめ!

 

WordPressからはてなブログに移転して良かったこと・悪かったこと

 

WordPressとはてなブログの両方を使って、それぞれの良い点・悪い点をまとめてみました。

 

 

スマホ版のデザインCSSをカスタマイズする方法

 

はてなブログでは「レスポンシブデザイン」のほかに、PCとスマホで別々のCSSを使うことができます。

ただし、スマホのカスタマイズページに「デザインCSS」という項目はありません。

 

はてなブログのスマホデザインカスタマイズページ

 

はてなブログでスマホ版CSSを用意する場合htmlの中に記述する必要があるんです。

ちょっと変わった書き方になるので参考にしてみてください。

 

 

グローバルナビゲーションを設置する!

 

はてなブログにグローバルナビゲーションを設置してみました。

 

ブログの上の方に表示される「カテゴリ」や「トップページへのリンク」だね
読者の回遊率にもつながるので設置した方が良いかも
はてなブログ グローバルナビゲーション

html内に記述することで、表示したいカテゴリとリンクをカスタマイズできるようになっています。

 

 

グローバルナビゲーションをドロップダウン形式にする

 

ヘッダーメニューに表示したいカテゴリーが多い場合は「ドロップダウンのグローバルナビゲーション」がオススメです。

マウスカーソルを乗せることで、子カテゴリーを表示できるので見た目をスッキリできます。

 

ドロップダウン グローバールナビゲーション

 

こんな感じで、カテゴリーをまとめることができました。

 

 

また、上の方法で設置したドロップダウンメニューを「タブレット対応」にさせる方法はこちらもどうぞ。

 

 

クリックで表示・非表示にしてみました。

 

会話形式の吹き出しを使う

 

こういう感じの吹き出しを追加できるよ!

画像のURLやCSSはそれぞれ変わってくるので注意してね!

 

記事内で紹介している「htmlのテンプレート」をコピペし、必要な部分を書き換えることで「会話形式の吹き出し」として追加できました。

会話形式で組み立てると記事が見やすいですし、コンテンツの増加にもつながります。

 

 

ぜひ活用してみてください。

 

1行で書ける会話形式つくってみた

 

上で紹介したコードは、画像URLを設定する必要がありました。

簡易版の吹き出しは「画像をあらかじめ設定」しておくことで、コードの行数を減らすことができました。

 

動作や見た目は基本的な吹き出しと同じ。

 

会話形式の見出し

 

1行で書けるので、比較的楽に導入できると思います。

 

 

トップページの先頭に表示される記事を選ぶ

 

サイトのトップページに「任意の記事」を表示できます。

オススメの記事や流行っている記事がある方は、トップページの先頭に表示してみましょう。

 

 

コード不要で、はてなブログの設定ページから簡単にカスタマイズできるので試してみてください。

 

はてなブログ トップページの先頭に表示

 

全記事の最初にアイキャッチ画像を追加する

 

記事の冒頭部分にアイキャッチ画像を表示します。

コードは「jQuery」を使用しているのですが、基本コピペで実装できます。

 

記事タイトルとサムネイル

 

こんな感じで自動で画像を表示できました。

CSSから見た目を調整することで、アイキャッチ画像をより目立たせられるのでチェックしてみてください。

 

 

背景をアイキャッチ画像にする

 

記事の背景をアイキャッチ画像にするカスタマイズです。

 

背景をアイキャッチ画像

 

こんな感じで、記事ごとに別々の背景を使用できます。

アイキャッチ画像によって記事の雰囲気が大きく変わるので試してみてください。

 

 

コピペOKです。

 

目次を全記事中の見出し前に自動で設置する

 

記事内の最初の見出し前に「目次」を設置するよ!

 

jQueryを使用して、記事内の見出し(h2)を探し出し、2つ以上の見出しがあった場合のみ「目次」を設置するようにしています。

設置した目次のデザインはこんな感じ。

 

htmlで設置した目次

 

見出しのテキストは自動で取得されます。

また、見出しをクリックすることで「リンクした見出しの位置」まで自動スクロールさせるようになっています。

 

 

目次のh3を一段下げて表示する

 

こちらは、先ほどの記事で紹介した目次を設置している前提です。

記事内で使用する見出しタグが「h2(中見出し)」だけとは限りませんよね。

 

h2とh3の目次

 

目次に「h2とh3が混在」している場合は、階層を表示できるようにしました。

 

一段下がっているのが「<h3>」だね

 

h2同様、クリックすると自動で見出しの位置までスクロールします。

目次のテキストには「1.1」「1.2」というように、どの見出しの階層なのかわかりやすいようにしてみました。

 

 

目次を開閉式にカスタマイズする

 

上の方法で設置した「目次」を開閉式にするカスタマイズです。

 

クリックで表示・非表示を切り替える!

 

非表示の目次

表示した目次

 

右側の「^ボタン」を押すことで表示・非表示を切り替えるようになっています。

見出しの数が多い場合、読者の方がコンテンツにたどり着くまで大変ですよね。

 

 

記事内で紹介しているコードを応用して、デフォルトで非表示にしておくのもオススメです。

縦に長すぎる目次になってしまうのを防止できました。

 

 

開閉式コンテンツ(アコーディオンパネル)を作る

 

記事内で「ネタバレ」や「ホラー系のコンテンツ」を載せる場合、任意の部分までをデフォルトで非表示にすることができます。

 

アコーディオンパネルとかって読んだりするやつですね

 

 

クリックしたら表示・再度クリックで非表示と切り替えられるので、不意のネタバレや不快なコンテンツを防ぐことができるはず。

ざっくり言うと<divタグ>で囲むだけなので、比較的簡単に実装できると思います。

 

 

記事の途中まで飛ばすアンカーリンクを設置する

 

記事内に設置したリンクをクリックすると、任意の位置まで自動でスクロールする「アンカーリンク」を作ることができます。

 

 

記事ごとに設定できるのはもちろん、設定方法もとても簡単なので参考にしてみてください。

〇〇まで進む >> みたいな使い方がオススメです。

 

自動スクロールを滑らかにする

 

上で紹介した「記事の途中に飛ばすアンカーリンク」のようなスクロールを滑らかにすることができます。

 

 

スムーススクロールと呼ばれている機能ですね。

jQueryを使うことで実装できるので参考にしてみてください。

 

 

蛍光ペンのようなアンダーラインを引く方法

 

選択したテキストの背景に色を付けることで「蛍光ペン」のような見た目にしてみました。

 

よりスムーズに追加できるよう、iタグを蛍光ペンに変化させています。

そうすることで、記事編集欄から1クリックで設定できるようにしました。

 

はてなブログ 編集

 

基本コピペOKです。

 

 

蛍光ペンっぽいカラーのまとめも合わせて紹介しているのでチェックしてみてください。

 

 

アンダーラインを波線・二重線・点線にする

 

はてなブログで設定した「アンダーライン」の見た目を調整する方法です。

基本CSSで一括指定できるので簡単でした。

 

 

cssは「text-decoration」を使用。

上の記事では「波線」「二重線」「点線」にする方法を紹介しています。

 

 

記事内のテキストを縁取りする方法

 

記事内のテキストを「縁取り」するCSSを紹介しています。

テキストを目立たせたいときや、より細かい装飾がしたいときの参考にしてみてください。

 

 

テキスト 縁取り CSS

 

テキストにグラデーションをかけるCSS

 

縁取りと同じ感じで「テキストにグラデーション」をかけるCSSも紹介しています。

 

CSS テキスト グラデーション

 

こんな感じで、徐々に色の変わるテキストに装飾できます。

ブログのデザインやコンセプトカラーに合わせて設定してみてください。

 

 

引用元を右寄せで表示する方法

 

はてなブログで設置した「引用」のテキストを右寄せで表示できます。

簡単なコードだけで実装でき、任意の部分のみを右寄せにすることができるので試してみてください。

 

 

はてなブログ 引用 右寄せ

 

CSSの見出しカスタマイズ例55種 + α

 

<h2>や<h3>などの見出しは大きく目立たせた方が読みやすくなりますよね。

この記事では、3回に分けて「はてなブログの見出しカスタマイズ例」について紹介しました。

 

 

 

大体60個近いデザインを用意してみたのでブログに合う見出しを探してみてください。

 

 

箇条書き(リスト)のカスタマイズ例13種

 

はてなブログで設置した「リスト(li)」の見た目をカスタマイズします。

13種類ほど用意してみたので、ブログのデザインに合わせてカスタマイズしてみてください。

 

 

お問い合わせフォームを設置する方法

 

はてなブログにお問い合わせフォームを設置する方法について紹介しています。

コメントや質問、レビュー依頼などがもらえる機会が増えるので、ぜひ設置してみてください。

 

 

設置には「Googleフォーム」を利用しました。

 

プロフィールにお問い合わせページへのリンクを追加

 

上の方法で設置したお問い合わせフォームへのリンクを「プロフィール内」に追加します。

サイドバーに表示できるので、読者やサイトを訪れてくれた方の目に留まりやすくなると思います。

 

 

記事内のYoutube動画を後から読み込みさせる方法

 

YouTubeの埋め込みのように、読み込みに時間がかかるコンテンツを後から読み込みさせる方法について紹介しています。

 

 

あらかじめ適当な画像(サムネなど)を用意しておき、画像をクリックしたタイミングで「YouTubeの埋め込み動画」を読み込むという内容になっています。

1記事にたくさんの埋め込み動画を使っているような場合に試してみてください。

 

 

読了時間(この記事は〇分で読めます)を設置する

 

はてなブログの「記事タイトル下」に以下のようなテキストを追加します。

 

読了時間

 

何文字読んだら1分というように設定しています。

文字数の値は各自で設定可能。

 

一般的には、1分間に「400~600」文字らしい

 

読了時間を追加することで「滞在時間が伸びる」こともあるらしいので、ぜひ設置してみてください。

 

 

記事の一番上まで自動スクロールするボタンを作る

 

クリックすることで、ページの一番上まで自動スクロールするボタンを設置します。

 

20190329175038

 

記事が長いときに上まで戻るのは大変ですよね。

そんなときは「トップへ戻るボタン」をクリックすれば、一気に上まで戻ることができます。

 

 

...が…に変換されるのを防ぐ方法

 

はてなブログのMarkdownモードで「...」と入力しようとすると、自動で「…」に書き換えられてしまうことがありました。

そういったときの対処法について紹介しています。

 

 

SNSシェアボタンを記事下に設置する

 

TwitterやFacebook・はてなブックマークなどのシェアボタンを記事下に設置するよ!

 

はてなブログにデフォルトで用意された「ソーシャルパーツ」ではなく、htmlとcssで独自のシェアボタンを設置しました。

htmlのコードを書き換えることで、Google+は非表示というような設置方法もできるようになっています。

 

Point
Google+の個人ユーザー向けアカウントは【2019/4/2にサービスを終了】しています

 

また、ページ読み込み速度に影響する「シェア数の表示」をOFFにする方法も一緒に紹介しているので、自分のブログレイアウトと相談しながらカスタマイズしてみてください。

記事内で紹介しているCSSを適用させると、以下のようなシェアボタンが設置できました。

 

横並びのSNSシェアボタン

 

 

シェアボタンのカスタマイズ例まとめ

 

先ほど紹介した「記事下シェアボタン」の見た目を調整するCSSを作ってみました。

シンプルタイプ・バイラルタイプ・アイコンタイプなど、いくつかのデザインを用意しているのでお好みで使い分けてみてください。

 

Point
記事内でも紹介していますが、アイコンタイプの場合「シェア数」は表示できないので注意

 

 

CSSのデザイン例はこんな感じ

 

シンプルなSNSシェアボタン

バイラルタイプのSNSシェアボタン

バイラル白タイプのSNSシェアボタン

アイコンタイプのSNSシェアボタン

アイコン白タイプのSNSシェアボタン

シェア数とSNSシェアボタン

 

気に入った見た目があったらCSSを調整してみてください。

 

PCの横にSNSシェアボタンを追従させる

 

PC表示の場合、「記事の横にSNSシェアボタン」を追従させます。

常に横に表示されるので、いつでもツイートやはてブができるようにしてみました。

 

記事上の追従ボックス

記事下の追従ボックス

 

ページ下までスクロールしても、シェアボタンが追従しているのがわかると思います。

追従ボックスに設置するシェアボタンは「アイコンタイプ」がオススメです。

 

 

スマホの画面下にSNSシェアボタンを追従させる

 

先ほどのコードを用いて設置したシェアボタンを「画面下に追従」させてみました。

スクロールしても常に画面の下に表示され続けるので、読者の方が離脱するタイミングでついでにシェアしてもらえる可能性がアップします。

 

追従するSNSシェアボタン

 

追従させるシェアボタンは【アイコン】がオススメ

 

 

ツイートが失敗する原因はタイトルかも

 

上の方法を使って設置したシェアボタンが、以下のように失敗することがありました。

 

失敗したツイートウィンドウ

 

こんな感じでツイートのウィンドウを読み込めない場合、タイトルが原因の可能性があります。

記事タイトルに「縦棒( | )」が入っているとうまくいかないので、対処法を確認しておいてください。

 

 

場合によっては、過去に公開した記事を書き換えておくと良いと思います。

 

ツイートされたら通知が来るようにする

 

はてなブログ内に設置したシェアボタンを通してツイートされた場合、自分にメンションを送るようにカスタマイズします。

 

Twitterのツイート画面

 

ツイートの最後に「@自分のID」を追加することで、疑似的にメンションを送った感じにできました。

シェアされたツイートをいち早く確認できるので参考にしてみてください。

 

 

記事下にサムネ付きのフォローボタンを設置

 

記事下に「この記事が気に入ったら...」というようなフォローボタンを設置する方法です。

 

サムネ付きフォローボックス

 

こんな感じで、ただのフォローボタンより目立たせることができました。

CSSは「PCとスマホで別々の物」と使っています。

 

 

サイドバーにTwitterのタイムラインを表示

 

この方法を使うことで、はてなブログのサイドバーに「Twitterのタイムライン」を表示できます。

ウィジェットを活用して、コピペだけで実装できるので簡単でした。

 

 

重くなるという注意点はありますが、フォロー・リツイートの機会が増えるので参考にしてみてください。

 

トップページにアドセンスを表示(全文形式)

 

はてなブログのトップページにアドセンスを設置する方法です。

 

https://abc.com みたいなページだね。

 

はてなブログ トップページの広告

 

記事と記事の間に設置もできるので、より自然な形で広告を表示できると思います。

トップページにアドセンスを設置する場合、はてなブログの「表示形式」によって方法が異なるので注意してください。

 

はてなブログ トップページの表示形式

 

以下は「全文形式」の場合。

 

 

トップページにアドセンスを表示(一覧形式)

 

トップページが一覧形式の方はこちら!!

 

こちらはトップページの表示形式が「一覧形式」の場合です。

基本的な流れは「全文形式」と同じ。

 

 

指定するクラス名が変わるだけなので、全文形式同様、記事と記事の間にも広告を表示できると思います。

 

記事と記事の間に広告を表示させる

 

上の記事とちょっと似ているんですが、トップページの記事と記事の間にアドセンスを設置するコードについて紹介しています。

全文形式、一覧形式両方のコードを紹介しているので参考にしてみてください。

 

トップページのアドセンス

 

コードを書き換えることで「n番目とn番目の間」という命令を出せるので、より自由にアドセンスを設置できると思います。

 

 

タイトルの上にアドセンスを表示する

 

記事内の「タイトル上」にアドセンスを表示する方法について紹介しています。

 

はてなブログ アドセンス タイトル上

 

画像のように、記事タイトルとパンくずリストの間にアドセンスを表示できるようになります。

アドセンスの規約に関する注意点なども紹介しているので、合わせてチェックしておくようにしてください。

 

 

関連コンテンツの見た目をカスタマイズする

 

Googleアドセンスの「関連コンテンツ」をカスタマイズする方法です。

関連記事の数を設定できるので、よりサイトになじむ見た目にできると思います。

 

関連コンテンツ

 

 

特定の記事でアドセンスを非表示にする

 

jQueryやCSSと組み合わせていくと「特定のカテゴリーではアドセンスを非表示」という処理が追加できます。

この記事で追加したカテゴリーは「noads

 

右に余白が開いている

 

noadsボタン

 

できるだけ自分でわかりやすいものにしましょう。

 

 

アドセンスからの警告「お客様の広告コードは~~~」の対処法

 

はてなブログでGoogleアドセンスを使っていると、以下のような警告が来ました。

 

Point
「お客様の広告コードは、過去 7 日間で、所有していないサイトに何回も表示されています」

 

この警告はどんなものなのか。

対策は必要なのか、について紹介しています。

 

 

プレビューページではアドセンスを非表示にする

 

先ほど紹介したアドセンスの警告が来ないようにするためのカスタマイズです。

 

Check
「お客様の広告コードは、過去 7 日間で、所有していないサイトに何回も表示されています」

 

はてなブログのプレビューページではアドセンスを表示させないようにしました。

記事確認時の誤クリック防止としても便利なので、ぜひ導入してみてください。

 

 

トップページやカテゴリページでだけ適用されるCSSを書く

 

CSSは「特定の要素に対して」スタイルを設定することができます。

トップページやカテゴリーページなど、特定のページでだけCSSを適用させたいときに確認してみてください。

 

トップページのスタイル

記事ページのスタイル

 

記事では、ページごとに指定するクラス名も紹介してあります。

アーカイブページや検索結果・Aboutページなんかも限定できるので要チェックです。

 

 

トップページや記事ページ、アーカイブページなどのまとめはこちらをどうぞ。

 

 

カテゴリーの表示数を制限する

 

はてなブログは「WordPress」などと違い、タグという構造が存在しません。

すべてカテゴリーとして分類されるため、気づいたら大量に増えていたなんてことがあると思います。

 

はてなブログ カテゴリーモジュール

 

カテゴリーの表示順を「記事が多い順」にし、コードからn番目以降のカテゴリーを非表示にすることで「あまり使わないカテゴリーは非表示」にさせることができました。

 

 

同じように、記事内に表示される「カテゴリーリスト」のn番目以降を非表示にする記事も公開しています。

 

 

特定のカテゴリーだけを表示する

 

カテゴリーモジュールではなく「リンクモジュール」を使うことで、特定のカテゴリーだけを表示させることができます。

 

リンクモジュール

 

メインとなるカテゴリーがある場合に使ってみてください。

カテゴリーを個別に非表示にするより簡単で、管理もしやすくなるのでオススメです。

 

 

通常のカテゴリーモジュールとは違い、表示されるテキストも自由に変更できるので便利ですね。

 

noindexを特定の記事に1クリックで追加する

 

noindexというのは「Googleに記事を評価させない」という意味を持ちます。

たとえば、自分用のメモ記事のようにコンテンツが少ない記事の場合、Googleから低評価を受ける可能性があります。

 

 

そういったときに、あらかじめ「記事を評価しないで!」と伝えることができるということですね。

ただし、noindexは「悪いコンテンツ」だけでなく「良いコンテンツ」も評価しなくなるため、基本的にはnoindexは使わない方が良いと思います。

 

 

私も、明らかにコンテンツ不足な記事にだけ追加しました。

 

上の記事では、noindexを追加するために「カテゴリを利用」しています。

noindexにしたい記事に「noindexというカテゴリ」を追加するだけで、自動的にnoindexタグを挿入するようにしてみました。

 

noindexカテゴリー

noindexタグ

 

1クリックで簡単に実装できるのでオススメです

 

display:noneってSEO的に使わない方がいいの?

 

CSSでコンテンツを非表示にする「display:none」というコードがあります。

これはSEOの観点ではあまり使わない方が良いといわれているようで、実際に調べてみました。

 

 

SEOに関する完璧な情報は公開されていませんが、display:noneが追加されたコンテンツはGoogleから評価されないようです。

 

他の人が使っているテーマを調べる

 

はてなブログは「テーマ」を使うことで、簡単に見た目をカスタマイズできます。

こちらは、好きなブログがどんなテーマを使っているか調べる方法について。

 

 

サイドバーの関連記事を記事下に移動させる

 

はてなブログで「サイドバーに設置した関連記事を記事下に移動」させています。

 

はてなブログ 関連記事

 

JavaScriptで移動させることで、デフォルトの関連記事より柔軟にカスタマイズできるようになります。

jQueryは移動させているだけなので、記事下以外に設置もできると思います。

 

 

関連記事の設置場所のカスタマイズ例 10種

 

はてなブログの関連記事を設置する場所の例について紹介しています。

設置場所は以下の10種。

 

  1. パンくず上
  2. パンくず下
  3. タイトル下
  4. 最初の見出しの上
  5. 最後の見出しの上
  6. 記事直下
  7. シェアボタンの下
  8. コメントボックスの下
  9. ページャー(次の記事, 前の記事) の下
  10. フッター

 

設置する場所によって記述する内容も変わってくるので参考にしてみてください。

 

 

読者になるボタンを画像にしてみた

 

はてなブログの読者になるボタンはシンプルなものですが、実は「画像」を設定することもできるんです。

 

お金と罠 いらすとや

 

目立つ読者登録ボタンになるね

 

このような画像のリンクに読者登録用リンクを適用させればOK

変わった画像や写真を読者登録ボタンにできるのでチェックしてみてください。

 

 

読者登録ボタンを動画にする方法

 

はてなブログの「読者登録ボタン」を動画にしてみました。

 

ビデオコンバーター

 

動画をGIFに変換することで、比較的簡単に設定できたのでチェックしてみてください。

 

 

プロフィール画像を動画にする方法

 

GIF画像を使って「プロフィール」に表示される画像を「動画」にしてみました。

短くループする画像を作ることで、より目立つプロフィール画像を作成できるので試してみてください。

 

はてなブログ プロフィール

 

記事では「動画をGIF画像に変換する方法」も合わせて紹介しています。

 

 

ページャーにトップへ戻るを表示

 

はてなブログのデフォルトテーマでは、前の記事がないときに「ページャー」が表示されなくなります。

部分的に見た目が悪くなるため、代わりに「トップへ戻るリンク」を設置しました。

 

ページャー 次の記事

ページャーにHOMEへ戻るを追加

 

これならレイアウトが崩れる心配もないですね

 

 

同様に、「トップページ」や「カテゴリーページ」にもページャーを追加しました。

トップページの場合は、トップへのリンクではなく「読者になるリンク」を設置するのがオススメです。

 

 

記事を予約投稿に戻す

 

はてなブログで書いた記事を「予約投稿」しようと思っていたのですが、誤って「公開」ボタンを押してしまいました。

そんな時に記事を予約投稿に戻すことができたので紹介しています。

 

 

ただし、予約投稿に戻してから公開すると「また通知がいく」ので悪用厳禁です。

 

読者に通知しないで記事を公開する

 

メモ書き程度のコンテンツが少ない記事があったとします。

読者登録をしてくれている方に、コンテンツ不足の通知が行ってしまうのはよくないですよね。

 

そこで、読者へ通知を送らず記事を公開する方法について紹介します。

 

 

記事下にコメント時の注意点を追加

 

はてなブログのコメント欄に「コメント時の注意点」という記事へのリンクを追加しました。

 

コメント時の注意点

 

このようにすることで、コメント時の注意喚起や返信時の通知など、あらかじめ伝えておきたいことを記事にして紹介できます。

基本的な設置方法は「コメントの下」という感じなので、他のカスタマイズでも応用できそうです。

 

 

コメントスパム対策としても使えると思います。

 

 

画像を縁取りして目立たせる

 

記事内に設置した画像を「縁取り」する方法です。

背景と同じ色の画像の場合、記事となじみすぎて目立たなくなってしまうので、縁取りしてハッキリさせてみました。

 

画像を縁取り

 

過去に追加した画像にも「一括でカスタマイズ可能」です。

CSSだけでコピペOK。

 

 

特定の画像にだけCSSを指定するセレクタ

 

特定の画像にだけ適用されるCSSについて紹介しています。

 

 

srcが〇〇の画像」や「.pngで終わる画像」という条件で分岐したいときに試してみてください。

 

投稿内の画像を中央寄せにする方法

 

はてなブログの画像を「中央寄せ」にすることで、左右に均等な余白を作ることができます。

 

左右の余白が均等な画像

 

バランスが取れた感じになるね

 

記事内のすべての画像」と「記事内の特定の画像」の2パターンを用意しました。

 

 

中央寄せの記事を書く方法

 

画像だけでなく、記事のテキストを「中央寄せ」にすることもできます。

 

中央寄せにしたテキスト

 

こんな感じでテキストを部分的に中央寄せにできるので、左右の余白を均等にしたり、中央寄せの画像の下に表示されるテキストを作ったりできます。

 

 

アドセンス広告を中央寄せにする

 

はてなブログでは、画像・記事だけでなく「アドセンス広告」も中央寄せにできます。

 

左寄せ(設定なし)

左寄せのボックス

 

中央寄せ

中央寄せのボックス

 

アドセンスを中央寄せにしたことで見やすくなりました。

上で紹介した中央寄せと比較すると、最も実用的かもしれませんね。

 

 

マークダウンで画像の横幅・高さを設定する

 

マークダウンモードで設置した画像の「横幅」と「高さ」を設定する方法について紹介しています。

画像タグに「w」や「h」を追加することで、直接画像のサイズを指定できました。

 

 

極端な値を設定すると、画像のレイアウトが崩れるので注意してください。

 

はてブの通知が来る拡張機能がオススメ

 

はてなブログで運営していると「はてブ(はてなブックマーク)」をもらえることがあります。

そのようなときに見逃さないために「はてブの拡張機能」を追加してみました。

 

はてなのお知らせ

 

ブラウザの右上に追加され、クリックすると「最近の通知」をチェックできます。

また、新しくはてブやスターがついたらアイコンに通知が表示されるので、見逃すことはほぼなくなりました。

 

 

はてブの通知をIFTTTで受け取る

 

IFTTTというサービスを利用して、はてなブックマークの「新着エントリー」に自分のサイトが追加されたらメールが来るようにしました。

新着エントリーは「はてブが3つ」くらいで追加されるのですが、メールで通知することでより管理しやすくなると思います。

 

IFTTT メール

 

メールの内容はある程度自由に設定できるので、日本語化はもちろん、自分で見てわかりやすいものにできます。

 

 

はてなブログとPush7をリンクさせる

 

はてなブログには「読者」という機能がありますが、それとは別に「Push7」と使った読者登録を導入してみました。

Push7に自分のサイトを登録することで、はてなの読者登録ボタンとは別に「Push7の読者登録ボタン」を設置できるのでチェックしてみてください。

 

Push7 管理画面

Push7の読者登録ボタン

 

読者になってもらうと、記事の更新時にプッシュ通知が来るようになります。

 

 

Googleタグマネージャで記事がどこまで読まれたかを調べる

 

Googleタグマネージャの「イベント」を使って、記事がどこまで読まれたかを「Googleアナリティクス」に記録することができます。

 

Googleタグマネージャ

スクロール イベント

 

記事の離脱ポイントに関連記事を表示したり最後まで読まれていない記事をリライトしたりといった目安になるので試してみてください。

 

 

サイドバーに追従するメモ帳を作る

 

はてなブログのサイドバーに「メモ帳」を作成してみました。

読者の方がちょっとしたメモ書きを追加できるので、How to系の記事で活用できるかもしれませんね。

 

はてなブログ 追従するメモ帳

 

 

はてなProは解約したら何時に切れる?

 

はてなブログには有料モード「はてなPro」という要素があります。

はてなProの契約が切れるタイミング(時刻)がわからなかったので「サポート」に直接聞いてみました。

 

 

はてなProの更新をしたり、ブログを移転した後のために覚えておくと良いかもしれませんね。

 

Amazonの画像に著作権はあるの?ブログでの使用はOK?

 

Amazonの商品ページに掲載されている画像は「ブログで使ってよいのか」サポートに問い合わせてみました。

 

 

Amazonの商品紹介などを行っている方はチェックしてみてください。

 

まとめ

 

今回は、過去に公開した「はてなブログカスタマイズ」系の記事をまとめました。

ある程度関連したジャンル順で表示してあるので、興味のあるカスタマイズが見つかったらぜひ試してみてください。

 

 

今後も、はてなブログに関する記事を執筆し次第、追加でまとめていこうと思います。

ではまた。

過去にレビューしたアイテム