【はてなブログ】サブブログの作り方とメリット・デメリット紹介

管理人

今回は「はてなブログ」のサブブログネタとなります！

だいふく

メリット・デメリットも要チェックだニャ！

サブブログ紹介

管理人

まずは、当ブログのサブブログから紹介したいと思います。

サブブログは、「こわいものみたさ～シネマ館～」を運営しています。以前は映画レビューも当ブログで書いていましたのですが多くなってきたので、映画レビューのみを記事にしているサブブログを立ち上げました。

まだ映画レビュー記事は、本ブログよりも少ないですが、定期的に更新していますので、よろしければサブブログも見てもらえると喜びます！

サブブログの作り方

管理人

サブブログの作り方を詳しく紹介します。

作れるブログ数

はてなブログで作れるブログの数は決まっております。通常はメインブログと合わせて最大3ブログまで、有償プランのはてなブログPROになると、メインブログと合わせて最大10ブログまで作れます。

無償プランでも複数ブログ作れること、知らない方も多いようです。有償プランで10ブログは、そこまで作っている方は余りいないかもですね。

サブブログの作り方

サブブログの作り方は簡単です！まずは、ブログ管理画面のダッシュボードを開いてください。そうすると画像のようにマイブログ一覧が表示されます。

「はてなブログ」ダッシュボード

マイブログ一覧の下に、「＋新しいブログを作成」がありますのでそこを押すと新しいブログを作る手順に移ります。

ちなみに情報ですが、画像のマイブログに映っている、「こわいものみたさBackup」は、本ブログを複製したブログを作っています。万が一ブログが消えた時やブログテーマを変えるときのお試し用、CSSをいじりすぎて戻せなくなった時のバックアップ用等の用途で作っています。ブログBackupの仕方は、ブログテーマを変えた時の記事に書いておりますので、そちらも参考にしてみてください。

管理人

それでは、サブブログ作成に戻りましょう。

「＋新しいブログを作成」を押すと画像のように「かんたんブログ作成」画面になります。その画面でサブブログの必要な情報を入力してください。

かんたんブログ作成

必要な情報を入力してブログを作成後、ダッシュボードを再びみてみると、画像のように新しいブログが増えていることが確認できます。あとは、メインブログを作ったと同じく、デザインを決めブログの設定やCSSなどを入れれば、ブログの完成です！

サブブログ追加後のダッシュボード

メインとサブブログの入れ替え

メインブログとサブブログの入れ替えもできます。

仮に「こわいものみたさ～シネマ館～」をメインブログにするとしましょう！ダッシュボードのマイブログのシネマ館のブログにある、「・・・」というアイコンを押してみると、メニューが出てきます。

ダッシュボードの「・・・」

「・・・」のメニュー

メニューの中にメインブログにするがありますね！これを押すと、画像のようにメインブログに変更するかどうかを聞かれる画面になります。

メインブログに切り替え

「メインブログにする」を押すと無事「こわいものみたさ～シネマ館～」がメインブログになりました。ダッシュボードからメインブログに変わっていることが確認できます。

ダッシュボードでメインブログ確認

サブブログメリット・デメリット

サブブログの作り方とメインブログとサブブログの切り替えを紹介しましたが、それではサブブログを作るメリットとデメリットは何でしょう？

メリット

①はてなアカウント1つで管理するので楽
アカウント１つで管理できるので、複数ブログ同じ管理画面で管理することができます。もし、新しいブログをサブではなく新しく作るには、はてなアカウントを新しく作る必要がありますし、ブログ管理画面もいちいち、ログアウト⇔ログインをやる必要がありますので、１つのアカウントで管理することはとても楽です。

②サブブログもはてなPRO扱い
もし有償プランのはてなブログPROに入っていた場合、サブブログもPRO扱いとなります。金額も変わることがありません。万が一アカウントを別でブログを作ってしまい、 はてなブログPROに入りたい場合は、アカウント別のため新規で契約が必要となり２倍の金額がかかるため、サブブログはお財布にも優しいです。

③Google Adsence審査通りやすい？
これはあくまでも噂だけの話です。メインブログがGoogle Adsenceを通過しておりある程度実績がある場合、サブブログでのGoogle Adsenceは通過しやすいようです。

実際にサブブログの方が簡単に審査通過した実例はよくあるようです。当ブログのサブブログである「こわいものみたさ～シネマ館～」も１発合格しかも申請して次の日に合格でした。メインブログは通過するまで３回落選し1ヵ月くらいかかったので、噂は本当かもしれません。すでに実績がある管理人が運営している事などもあるからでしょうか？

デメリット

①同じ運営者と分かる
アカウントが１つのため、メインブログとサブブログの管理者は同じということは分かってしまうので、もしメインブログとサブブログが同じ人が運営していると分かると都合が悪い場合は、サブブログは向いていません。

②はてな経由のアクセス数が通常より低い
はてなブログの良い所は、読者登録とスターを付けることができ、ブログアクセス数も一定数望まれます。しかしサブブログはその恩恵が少し減ります。こちらが他のブログに読者登録してもスターを付けてもアカウントは１つのため、他のブログの管理人さんが、読者やスターをたどってもメインブログのみへのアクセスとなります。

例えば、当ブログの場合は、サブブログ「こわいものみたさ～シネマ館～」は、ブログテーマが映画です。なので気に入った他の映画ブログをみつけて、読者やスターをつけても、相手の方は、こちらがつけた読者やスターをたどっていってもメインブログにアクセスされるという感じです。

サブブログ自体にももちろん読者登録やスターもつけてもらえますが、こちらから他のブログ様に付けた後のお返し登録やスターは見込まれなくなります。

以上、サブブログのメリット・デメリットでした！

皆様もメインブログに加えてサブブログを作ってみるのはいかがでしょう！？

だいふく

「こわいものみたさ～シネマ館」もよろしくだニャ！

【はてなブログカスタマイズ 】ブログテーマを変えデザインリニューアル実行手順！

管理人

1年以上続けていた、はてなブログテーマを変えデザインリニューアルを行いました。結構面倒な作業なのですが、当ブログで実施したブログリニューアル手順を紹介したいとおもいます。

だいふく

前のデザインも良かったけど、今回はスタイリッシュになり良い感じだニャ！

デザインリニューアル結果

まず手順の紹介前にデザインをどう変更したかを簡単ですが紹介します。当ブログのテーマはデザインリニューアルするまでは「Minimalism」を利用していましたが、デザインを思い切って「マテリアルぽっぷ」に変更しました。ブログも1年以上たったので、気分転換したいのがリニューアルの理由でしたが、結果とても可愛らしく見やすいデザインは気に入ってます。

1年ちょっと運営していた懐かしき旧デザインのトップページも記念に画像で残しておきます。

旧デザインの「こわいものみたさ」

デザインリニューアル準備

管理人

それではデザインリニューアル手順の紹介をしたいと思いますが、まずは前準備から！

準備と言っても、ブログのバックアップを取っておくことになります。やはりデザインをいじるので、万が一うまくいかなかったときの事を考えてバックアップは確実に取っておきたいですよね。バックアップの仕方として、全く同じブログを複製する方法をとりました。

手順１：ブログを新しく作る

バックアップの仕方として、はてなブログの複数ブログ作成を利用しました。はてなブログでは 1 つのアカウントで最大3つ、有料プランの「はてなブログPRO」の場合は、最大10個まで作れますので、はてなブログユーザーは誰でもできます！

はてなブログのページから、「ダッシュボード」→「新しいブログを作成」で新しいブログを作成することができます。写真ではすでに複数のブログが作られている状態です。注意点としては、バックアップブログに使うので、新しいブログは限定公開設定で作るようにしてください。

新しいブログを作成

手順２：ブログをエクスポート

新しいブログが完成しますが、まっさらのブログなのでどうやってバックアップブログにするの？という疑問が出ると思いますが、ブログのエクスポートとインポートを使いました。

まずは、現在のブログのエクスポートです。はてなブログの「設定」→「詳細設定」→「記事のバックアップと製本サービス」というようにリンクをたどっていくと、画像のようなエクスポート画面になります。

ブログエクスポート

「自分のブログ名をエクスポートする」というボタンがありますのでそれを押すと、エクスポートが完了しますので、次に「ダウンロードする」をえらぶと、拡張子が.exportのファイルが作成されます。

手順３：ブログをインポート

次は、ブログのインポート手順です。手順１にて新しく作成したまっさらのブログに、手順２でエクスポートしたファイルを使ってインポートするだけです。はてなブログの「インポート」を選んでください。画像はインポート画面になりますが、すでにインポートしたことある場合は、「これまでのインポート」という表示がされます。

はてなブログインポート画面

「新しくインポートをはじめる」から、ブログデータをアップロードにて、「ファイルを選択」し、手順２で作成した.exportファイルを選択します。その後、「文字コード選択へ進む」というリンクを押すと、「文字コードを指定」画面が出ますので、指示通りにサンプルが適切に表示されている文字コードを選んで、「インポートする」を押すと、エクスポートの時のブログ記事が全部インポートされます。

手順４：デザインページをコピー

手順３までで、ブログ記事はすべて新しく作成したバックアップブログにコピーできましたが、いままで設定した、CSSやHTML設定は引き継がれていませんのでブログのデザインがまっさらのままです。残念ながら、エクスポートで引き継がれないので、すべて手動でコピペをするしかありません。

はてなブログの「デザイン」→「カスタマイズ」より、これまで設定してきた設定やソースコード、デザインCSSなどをすべて、今までのブログからコピーして、新しく作ったバックアップブログに地道に貼り付けを行ってください。

この手順をすべて完了すると、バックアップブログとして、全く同じブログが複製できました。バックアップブログを作っておくと、新しくデザインリニューアルを試しても、うまくいかなかった場合でも、安心ですね。

デザインリニューアル実行

デザインリニューアルを実行するときも慎重に進めたいですので、その手順やリニューアル時の苦労を紹介しておきます。

手順１：ブログテーマを選ぶ

はてなブログの「デザイン」→「デザインテーマ」より、自分好みのブログテーマを見つけましょう！ここで気を付けないといけないのは、今までのブログそのままだと、恐らくどこかデザイン崩れが起きてしまうということです。なので、ブログテーマを決めた後でも、すぐに本番ブログに反映しないようにし、変更したいブログテーマだけを決めておくだけにしましょう。

手順２：お試しブログを作る

デザインリニューアル準備と同じ手順で、ブログをもう一つ複製しましょう！え～、またブログ複製するの？っと面倒に感じると思いますが、非常に大事です。

もう一つ複製したブログの用途は、デザインリニューアルを検討するためのブログに使います。新しく選んだブログテーマを、複製したお試しブログにまずは反映してみましょう。

手順３：デザインを綺麗にする

新しくブログテーマを反映したブログのデザインは、どこか崩れていないでしょうか？崩れていなければ、問題ないですが、ベースのデザインが変わるので、どこかはおかしくなっているはず。その場合は、はてなブログの「デザイン」→「カスタマイズ」にて、設定やコード、デザインCSSを修正してください。

修正箇所は、個人それぞれになりますので、どこを編集ってことは言えませんが、当ブログでデザインがおかしくなって崩れ修正した事は以下でした。

当ブログ修正箇所

・トップページのアイキャッチ画像サイズ変更
・ヘッダのナビゲーションメニューCSS変更
・サイドメニュー作り直し
・記事中に使う吹き出しCSS変更

そして、同時に今回のリニューアルで当ブログでこだわって対応したことが2つありますので紹介しておきます。

1つ目はtable（表の事）レスポンシブ対応です。当ブログは映画情報やグルメ店舗をtableをつかって情報を記載していますが、PCではいいのですがスマホで見た時に改行がおかしかったりと見にくいので、レスポンシブ対応にしました。画像左がスマホで見た時の昔のtable表記で右が対策後の表記です。もちろん、PCで観た時は横長な表になってます！

レスポンシブ対応させた表

もう1つのこだわりは、PCの時のフッターを充実させました！こちらは一目瞭然なので、PCの時のフッター写真を貼っておきますが、レスポンシブ対応しているので、スマホ画面の時は消しています。

PC時のフッター

以上が、新しいこだわりポイントとなります。両者のカスタマイズの方法は、今回は割愛して、また後日改めて紹介できればいいなと思っています。

リニューアル終わった？

実は、デザインリニューアルはまだ完全に終わっていないのです。こだわってしまった分、今まで書いたすべての記事を修正しないといけなくなってます。状況は以下の記事に書いています。

新しい記事や人気の記事から順番に少しづつ修正しているところですが、さすがに100記事以上ありますので、全部はまだ終わり切れてません。古い記事は見苦しいデザインになっているものもありますが、記事が読めないほどではないので、焦らずゆっくり直していきたいと思いますので、温かく見守っていてください！

だいふく

早くなおしてニャ！

管理人

ご、ごめんなさい（汗）

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜レスポンシブなナビゲーションメニューを設置＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞

＜サイドメニューを工夫して回遊率アップを目指す！＞

【はてなブログカスタマイズ 】オリジナルの404 Not foundページを作る！

管理人

今回はブログカスタマイズ紹介記事です。カスタマイズ場所は404 Not foundページになります。エラーページからもカスタマイズして集客を目指しましょう！

だいふく

ん？そもそも404 Not foundってなんだニャ？

HTTP 404ってなに？

ブログでよくあるのは記事をUPしたあとに、改めて該当記事のURLを更新したことがある方も居るかと思います。そうすると旧URLにアクセスするともちろんURLは変更されているので、ページが見つからないと思います。

そういう時は、エラーメッセージが出てNot found（見つからない）となりますが、まさにこの症状がHTTP 404といいます。

なんで404と言うかは、HTTPを使って通信を行うとき、応答には数値によるステータスコードが含まれています。ステータスコード404とは、最初の「4」がクライアント側エラーを表し、後ろの「04」がエラーの種類を示しているからなのです。

なぜエラーページをカスタマイズするの？

一度ウェブサイトにページをUPしたら、Googleなどの検索エンジンに登録されますよね。登録後に該当ページのURLを更新（カテゴリー更新なども同じ）すると、古いURLのページはウェブサイトの世界からは見つからないって言われてしまします。

もし、誰かが検索エンジンから自分のブログを見つけてくれて、アクセスしたらそれは古いURLでアクセスしてもページが見つからなかったら、折角来ていただいたのに申し訳ないですし、離脱してしまい機会損失にもつながりますよね。

そういったことを無くすために、Not foundになるのはもちろん、しょうがない事なのですが、Not foundページ自体をカスタマイズすることで、少しでも他の記事を見てもらおう！っということなんです。

企業の公式サイトなんかも、なにげにやっており個性的な面白いページが見れますので少し紹介しておきますね。リンクをクリックすると該当のNot foundページに飛びます！

面白い404エラーのサイト

郵便局
日本コカコーラ株式会社
Amazon

カスタマイズ方法

管理人

まず当ブログの404 Not foundページを見てください。

当ブログのNot foundページ

https://www.daifuku.blog/404

見て頂いたら分かりますが、エラーコメントを編集して他の記事を案内するようなメッセージを入れています。そしておすすめ記事一覧を掲載しています。これにより折角きてくださった方を、他の記事に誘導しようという作戦です！

準備

カスタマイズするまえに準備としてやることは、Not foundページに書く文章を考えておきましょう！真面目なコメントでも、思わずクスッと笑ってしまうコメントでも何でもよいと思いますので、ご自身のブログの個性に合わせて考えるのが良いと思います。

考えたコメントは、後述するコードで使います。

JavaScript設定

管理人

それでは、具体的にコードを書いていきましょう！

ヘッダー画像の登録方法は、「デザイン設定」→「カスタマイズ」→「ヘッダ」→「タイトル下」に以下のコードを書き込みます。

<!--404エラー-->

<script>

  document.addEventListener('DOMContentLoaded', function() {

    if(document.querySelector('#main-inner').getElementsByClassName('no-entry').length === 0){

      return;

    }

    var ec = document.querySelector('.entry-content');

    if(!ec){

      return;

    }

    var h1s = ec.getElementsByTagName('h1');

    var ps = ec.getElementsByTagName('p');

    h1 = h1s && h1s[0];

    p = ps && ps[0];

    if(!(h1 && p)){

      return;

    }



    h1.innerText = 'Not Found  \nお探しの記事を見つけられませんでした';

    p.innerText = 'ここに何かコメントを入れる \n ←を入れると改行になります。';



    var h2 = document.createElement('h2');

    h2.appendChild(document.createTextNode("おすすめ記事"));

    ec.appendChild(h2);



    var hatena_module = document.createElement('div');

    hatena_module.setAttribute('class', 'hatena-module hatena-module-entries-access-ranking');

    hatena_module.setAttribute('data-count', '10');

    hatena_module.setAttribute('data-display_entry_category', '1');

    hatena_module.setAttribute('data-display_entry_image', '1');

    hatena_module.setAttribute('data-display_entry_image_size_width', '150');

    hatena_module.setAttribute('data-display_entry_image_size_height', '150');

    hatena_module.setAttribute('data-display_entry_body_length', '0');

    hatena_module.setAttribute('data-display_entry_date', '1');

    hatena_module.setAttribute('data-display_bookmark_count', '0');

    hatena_module.setAttribute('data-source', 'access');



    var hatena_module_body = document.createElement('div');

    hatena_module_body.setAttribute('class', 'hatena-module-body');

    hatena_module.appendChild(hatena_module_body);



    ec.appendChild(hatena_module);

    

    var footer = document.createElement('p');

    footer.appendChild(document.createTextNode("今後ともよろしくお願い致します。"));

    ec.appendChild(footer);

  });
</script>

修正箇所

このままコメントを変えて貼り付けるでもいいですが、修正しても良い箇所を書いておきます。

修正箇所

準備で考えたコメント記載：18～19行目
おすすめ記事を掲載する数：25行目
カテゴリー：26行目（1：表示、0：非表示）
記事画像：27行目（1：表示、0：非表示）
記事画像サイズ：28～29行目
投稿日：31行目（1：表示、0：非表示）
ブックマーク数：32行目（1：表示、0：非表示）

以上で、404 Not foundページが完成しました！

些細なことではありますし、ほぼ見られることもないので自己満足なカスタマイズの紹介でした！

だいふく

すごく勉強になったニャ！エラーページでも集客できるんだニャ！

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜レスポンシブなナビゲーションメニューを設置＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞

＜サイドメニューを工夫して回遊率アップを目指す！＞

【はてなブログカスタマイズ 】当ブログのカスタマイズまとめ：パート①

だいふく

久しぶりのカスタマイズ記事だニャ！

ブログ「こわいものみたさ」を開設してちょうど1年たちました。この1年色々とブログのカスタマイズも実施してきましたので、当ブログで実施してきたブログカスタマイズのまとめ記事を書きたいと思います。1記事に書くと結構多くなってしまうので、パート1（ヘッダ部、トップページ部、サイドメニュー部）とパート2（共通部、記事部、フッター部）と2部構成にして紹介したいと思います。

ブログ1周年に書いて記事も是非一緒に読んでみてください！

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

ヘッダー部カスタマイズ

最初はヘッダー部分のカスタマイズをまとめてみました。下の画像の黄色枠部分のカスタマイズです。タイトル部分もヘッダーとして含めて書いてしまいます。

ヘッダーにオリジナル画像設定

当ブログの一番上のこわいものみたさという文字と猫と大福の画像のカスタマイズです。やっぱりブログの一番最初に見るものなので、特徴的にしたいですよね。猫のだいふくアイコンと、だいふく餅を入れてみました！カスタマイズ方法はブログ記事でアップしていますので該当の記事を参考にしてみてください。

レスポンシブなナビゲーションメニュー

タイトル画像下のHOMEやABOUT等のナビゲーションメニューのカスタマイズです。PCの時とスマホの時で見え方を変えています。こちらのカスタマイズ方法もブログ記事でアップしていますので、該当の記事を参考にしてください。

トップページ部カスタマイズ

次はブログの顔と言えるトップページ部のカスタマイズの紹介となります。下の画像の黄色枠部分の紹介となります。

ヘッダ下におすすめ記事を横並び

トップページのヘッダ画像の下にお勧め記事を4つ横並びで掲載しています。今は大体1週間に1回程度お勧め記事を更新しています。やっぱり古くなったけど読んでもらいたい記事を目立たせるにはトップの上の方に掲載するのが一番です！このカスタマイズのやり方は、Minimal Green様のブログを参考にさせて頂きましたのでリンクを貼っておきます。

カード型トップメニュー

当ブログはトップページの記事一覧をカード型に設定しています。この方法を行うには前提条件があり、ブログトップを一覧形式にする必要がありますが、はてなブログは有料会員でないとできないため、「はてなブログPRO」でないとできません。

カスタマイズの仕方に関しては、当ブログで記事を書いていますので、参考にしてください。この記事アクセス数が多く、結構真似されていらっしゃるブログが多くなってきましたが、当ブログも参考にさせてもらったものを微調整しただけですので、ご自由に使ってもらえればと思います。やっぱりカード型にするとスタイリッシュで見栄えが良いです！

サイドメニュー部カスタマイズ

次はサイドメニュー部のカスタマイズ方法です。サイドメニューは回遊率をアップするのにも重要ですよね！下の画像の黄色枠部分の紹介となります。

プロフィール変更

はてなブログのデフォルトのプロフィールって嫌だったので、結構自分好みに変えています。当ブログの設定を紹介してみます。なお、プロフィールは「記事の管理」→「デザイン」→「カスタマイズ」→「サイドバー」→「プロフィールモジュールの編集」をすると、以下のようなモジュール編集画面に行きます。

プロフィール編集画面

当ブログは、まずすべてのチェックマークを外しています。その理由ははてなが用意したものを表示させたくなかったからです。そして、注目はプロフィールの自己紹介の部分です。こちら文字でなくHTMLが書けるのです！え、HTMLと言っても書けないよ！って方、全然大丈夫です。

普通にブログの新規記事を立ち上げて、編集方法見たまま設定で、普通にブログを書くように自分の自己紹介を作ってください。この時にはてな読者ボタンやSNSシェアボタンを自分好みに設定するのもいいですね！SNSシェアボタンのデザインは色んな所で紹介されているので、探してみると良いかと思います！

自己紹介が完成したら、HTMLを丸々コピーして置いて、プロフィールの自己紹介に貼り付けるだけでOKです！

サイドバーメニューをタブ形式

サイドバーに色々掲載したいけど、縦長になるのは防ぎたいという方向けの設定です。はてなブログ設定のサイドバーで表示させたいメニューが多い方に向けとなります。カスタマイズ方法は記事にしていますので、参考にしてください。

カテゴリーの階層化

カテゴリーを階層化したいと思ったので、カスタマイズしています。カテゴリー階層化することでサイドメニューが縦長にならず見栄えが良くなります。ただし2階層目は▶ボタンをクリックすると見れるようになるため、クリックされやすさは落ちてしまいますので要注意です。

こちらのカスタマイズ方法も記事にしています。上述したサイドバーメニューをタブ形式に掲載している「サイドメニューを工夫して回遊率アップを目指す！」記事に一緒に書かれていますので参考にしてください。

サイドメニューで目次固定（PCのみ）

サイドメニューに目次を表示できるようにして、記事スクロールした時に目次だけ固定して表示しっぱなしになる設定です。記事を読んでいるとかなり下にスクロールされると思いますが、目次が固定されるので上部の目次に戻れるといった便利な仕様です。

固定はPCのみで、スマホの時はサイドメニューがブログの下部に表示されるので、下部に目次が表示されるだけです。

こちらのカスタマイズ方法も記事にしています。上述したサイドバーメニューをタブ形式に掲載している「サイドメニューを工夫して回遊率アップを目指す！」記事に一緒に書かれていますので参考にしてください。

まとめとパート②予告

パート①では、当ブログのヘッダー部、トップページ部、サイドメニュー部のカスタマイズを赤裸々に紹介しました！デフォルトのままで使うのもいいのですが、やっぱり自分好みで個性的なブログを目指すのもいいと思いますので、カスタマイズあまりやられていないって方は是非試してみてください。なお当ブログと同じようにしてもらっても全然問題ないですが、他のカスタマイズ紹介とかも探してもらって、自分好みのカスタマイズを色々混ぜていくことをお勧めします！

だいふく

裸を見られたみたいではずかしぃにゃ！

さて、パート②は、共通部、記事部、フッター部を紹介したいと思います。何気にリンク切れとかに出る、Not Foundページにお勧め記事が出るようなカスタマイズ入れたりしています＜NoT Found見る＞ので、その辺も紹介できればと思いますのでお楽しみに！

【はてなブログカスタマイズ 】サイドメニューを工夫して回遊率アップを目指す！

「はてなブログ」の当ブログカスタマイズ紹介シリーズです。今回はサイドメニューを見やすく変更する方法を紹介します。

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

前回のトップページ一覧形式をカード型に変更する記事はこちら。

サイドバーメニューをタブ形式に

サイドバーに色々掲載したいけど、縦長になるのは防ぎたいという方向けの設定です。はてなブログ設定のサイドバーで表示させたいメニューが多い方に向け。設定の仕方は以下のサイト様を参考にさせていただきました。ありがとうございます。

さて、実際に当サイトでのカスタマイズを見てみましょう。まずは、ブログの管理ページからデザイン設定→カスタマイズ→サイドメニューから、モジュールの追加より、表示したいサイドバーを選びました。4つ選んでます。さらにもう一つ、HTMLのモジュールを選び、以下のコードを記載しました。記載する言葉はご自身で選択したモジュール順番に記載ください。

<div class="hatena-module-title2">
<span class="tab active">人気順</span>
<span class="tab">最新順</span>
<span class="tab">月別</span>
<span class="tab">コメント</span>
</div>

サイドメニューの順番は、HTMLのモジュールを一番上に、そしてタブで左から右へと並べたい順番に配置します！

ここからの設定は、Yukihy Life様のブログの、手順３タブメニューのjQueryを参考に設定ください。

最後にCSS設定となります。こちらもYukihy Life様のブログの手順４CSSでデザインするで確認できますが、当ブログの設定を念のため記載しておきます！

/* サイドメニュータブ */
.tab{
    display: inline-block;
    padding: 8px 15px 5px 15px;
    background: #f0f0f0; / *反応していないタブの背景色* /
    border-radius: 5px 5px 0 0;
    font-size: 12px; / *文字サイズ* /
    cursor: pointer;
}
.active{
    color: white;
    background: black; / *反応しているタブの背景色* /
    border-radius: 5px 5px 0 0;
}
.hatena-module-title2{
    border-bottom: 3px solid black; / *タブの下線* /
}
/* サイドメニュータブ完 */

以上の設定で当ブログのように、サイドメニューがタブ化されます。（なお現在は、コメントのタブを、お友達リンクに変更してます）

カテゴリーの階層化

次にカテゴリーを階層化するカスタマイズを紹介します。こちらは、以下のブログ様を参考にさせてもらいました。ありがとうございます。

このカスタマイズについては、小さな星がほらひとつ様のそのまんまの設定を適用していますので、改めて当ブログでコードを書いてもと思いますので、該当のブログ様を参考にしてみてください！以下が当ブログの設定後です。

サイドメニューで目次を固定（PCのみ）

次は、サイドメニューに目次を表示できるようにして、記事スクロールした時に目次だけ固定して表示しっぱなしになる設定です。固定はPCのみで、スマホの時はサイドメニューがブログの下部に表示されるので、下部に目次が表示されるだけです。

やり方は以下のブログ様を参考にさせていただきました。ありがとうございます。全く同じ設定をしただけですので当ブログでの設定の仕方は記載しませんので、該当のブログ様を参考にしていただければと思います！

当ブログで設定した結果です。目次なのでリンクとなっておりそのリンクをクリックすると、そこの記事まで飛んで行ってくれますし、いま表示している場所の目次に色が付きます！当ブログはHTMLの下に、 「A8.net」の広告も挿入しています。（グーグルアドセンスの広告は固定して表示させるのはNGのようです）

その他の小技

SNSフォローボタンカスタマイズ

当ブログのProfileの下部にあるフォローをするボタンのカスタマイズです。はてなブログ自体にSNSフォローボタンあるのですがカッコ悪いので、四角いボタン式にしてます。こちらのやり方は、またまたYukify Life様のブログで紹介いただいたやり方を導入してますので、参考にしてみてください！

当ブログの設置画像となります。マウスを乗せるとボタンのように凹むところがお気に入りです！

サイドメニュータイトルデザインカスタマイズ

サイドメニューのタイトルデザインを変えてみました。変更の仕方は、Minimal Green様のブログに色々掲載されていますので、是非参考にしてみてください！

当ブログと同じデザインと色合いにしたい場合は、以下のCSS参照ください！サンプル画像は、SNSフォローボタンカスタマイズのProfileのメニューデザインを参照ください！

/* サイドバーデザイン */
.hatena-module-title {
    color: #555;
    font-size: 120%;/* 文字サイズ */
    padding: .5em 0 .5em .75em;
    border-left: 7px solid  #d0576b;/* 左横ボーダー */
    background-color:#fdeff2;
    margin-bottom: 12px;/* 下余白 */
}
/* サイドバーデザイン完 */

以上、当ブログのサイドメニューカスタマイズの紹介でした。

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜レスポンシブなナビゲーションメニューを設置＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞

【はてなブログカスタマイズ 】トップページ一覧形式をカード型にしてスタイリッシュに！

管理人

本日はブログカスタマイズ紹介です。はてなブログのトップページの一覧形式をカード型に変えるカスタマイズの紹介です。

だいふく

カード型は見た目もよくてカッコイイニャ！

カスタマイズの前提条件

今回のカスタマイズは、前提条件がありまして、そもそもトップページを一覧形式にするには、はてなブログでは、「はてなブログPRO」を契約していないとできませんので、ご了承ください。

また、本記事で紹介しているブログテーマは「Minimalism」での紹介となります。他のテーマでは、試していませんので、同様のカスタマイズができないこともあります。

カスタマイズ方法

管理人

それでは、さっそくカスタマイズ方法を紹介していきましょう。

トップページを一覧形式に変更

まずは、設定をおこないます。「はてなブログPRO」に登録している方であれば、「記事の管理」→「設定」→「詳細設定」→「トップページの表示形式」の設定を、「一覧形式」に変更します。

はてなブログを一覧形式に変更

実際に、ブログをみると、一覧形式に変更されていると思いますので、これで準備は終わりです。

トップページが一覧表示に

カード形式に変更のCSS

管理人

それでは、実際にカード形式に変更させるCSSの紹介です。

今回紹介しているのは、スマホ画面の時は一覧形式のままにし、PC画面のみカード形式にしています。この切替は、「Minimal Green」様のレスポンシブ部分だけコードを使わせてもらいました。ありがとうございます。

カード型デザインは。「スキナコトワークス」様で紹介しているコードを使わせていただきました。コードに説明を詳細に書いてくれているのでとても分かりやすく、自分好みにカスタマイズしやすかったです。ありがとうございます。

CSS設定

参考にさせてもらったものに、さらに微調整するために修正を入れたコードを以下に記載しておきます。

/* PCのみトップページカード型 */
@media (min-width: 768px){
.page-index .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
  /*カード*/
.page-index .archive-entry{
  background :#ffffff;   /*カードの背景色*/
  width: 46%;   /*横幅（２カラム）*/
  padding-top:210px;   /* 上間隔（アイキャッチ画像分空ける） */
  padding-left:7px;    /* 左間隔 */
  padding-right:7px;   /* 右間隔 */
  padding-bottom:10px; /* 下間隔 */
  position: relative;
  box-shadow: 1px 1px 4px #cccccc;
  transition: .3s;
  border-radius: 4px;
}
/* アイキャッチのサムネイル */
.page-index .entry-thumb {
  width: 100%;   /* アイキャッチサムネイル横幅 */
  height: 200px;   /* アイキャッチサムネイル縦幅 */
  background-position: center center;
}
.entry-thumb-link:hover {
  opacity:0.7;
}
/* アイキャッチ */
.page-index .entry-thumb-link{
  display: block;
  width: 100%;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px 4px 0 0;
}
/* 記事タイトル */
.page-index .entry-title{
  padding : 5px 0px 0px 5px;  /* タイトル上下に間隔 */
}
/* 記事の概要 */
.page-index .entry-description{
  display : none;
}
/* 日付 */
.page-index .date{
  padding-top:2px;  /*上間隔 */
  padding-left:7px; /* 左間隔 */
}
/* カテゴリ */
.page-index .archive-entries .categories {
  position :absolute;
  top:4px;      /* 上間隔 */
  left:4px;     /* 左間隔 */
  z-index:1;  /* アイキャッチの上に配置 */
}
/* カテゴリラベル色(記事) */
.categories a {
    background: #ffc0cb;
    color: #000;
    border-radius: 0.2em;
}
/* カテゴリラベル色(archive) */
.page-archive .categories a {
    background: #ffc0cb;
    color: #000;
    border-radius: 0.2em;
}
/* はてなスター */
.star-container {
  display : none;
}
}
/* PCのみトップページカード型完 */

修正箇所

このまま貼り付けてもよいですが、自分好みに調整できる箇所をを記入しておきます。

カスタマイズ場所

アイキャッチサムネイルサイズ：26～27行目
記事タイトル上下間隔：46行目
日付配置間隔：54～55行目
カテゴリ配置間隔：60～61行目
カテゴリラベル記事の色：66～67行目
カテゴリラベルアーカイブ色：72～73行目
はてなスター表示する：76～79行目を消去

修正すると、自分好みのカード型デザインに変更できますね。

カスタマイズ前後比較

以上、トップページ一覧形式がカード型に変更できました！

一覧記事をカード型にするだけで、とってもスタイリッシュでイケてるブログ感が出ますよね。

だいふく

トップページはブログの顔だから印象は大事ニャ！

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜レスポンシブなナビゲーションメニューを設置＞

＜サイドメニューを工夫して回遊率アップを目指す！＞

【はてなブログカスタマイズ 】Font Awesome使用し、レスポンシブなナビゲーションメニューを設置

「はてなブログ」の当ブログカスタマイズ紹介シリーズ、今回はナビゲーションメニューを紹介します。スマホの画面の時は、ドグルメニューになるようなレスポンシブな設定になっています。

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

前回のヘッダー（タイトル）に画像挿入の記事はこちら。

Font Awesomeを使う

だいふく

Font Awesomeで楽にかわいいアイコン入手できるニャ

事前設定

当ブログでは、単純に文字のメニュー作るだけだと特徴が無いので、Font Awesomeのアイコンを使用しています。ウェブサイトやブログでアイコンフォントを利用できるサービスで無料でもかなりの多くのアイコンが使えます。Font Awesomeもバージョンが上がっておりバージョン5になってますので、使用するための準備をまずは紹介します。

Font Awesomeのサイトはこちらになります。英語のサイトです。

アイコンを使う方法として、アイコン全てをダウンロードして使う方法とCDNを使う方法があります。CDNは専用のサーバーに置かれているものを使わしてもらうイメージですね。はてなブログでは、CDNで使いましょう。

最初に、以下のコードを張り付けましょう。はてなブログでは、「設定」→「詳細設定」に進み、「headに要素を追加」の枠に張ります。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

利用方法

Font AwesomeのサイトTOPの左上に検索窓がありますので、使いたいアイコンを英語で入力します。

Font Awesomeでアイコン検索

検索結果一覧が出ます。有料会員でない場合は、左メニューにあるFreeを押すと無料アイコンのみに絞られます。

Font Awesomeのアイコン検索結果

使いたいアイコンを選ぶと、デザインや大きさを確認でき、左上かStart Using This IconボタンからHTMLソースが取得できます。

Font AwesomeのHTML取得

以上で、アイコンの準備が整いました。

ナビゲーションメニュー設置

さて、本題のはてなブログにナビゲーションメニューの設定の仕方です。このやり方は、以下のブログ様を参考にさせていただきました。ありがとうございます。

HTML設定

基本的には、設定流用なのですが変更した箇所と手順を記入します。まずは、HTMLですが、ここにFont Awesomeのアイコンを使っているので、当ブログのコードを記入しておきます。

以下のコードを、はてなブログ管理画面から「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」に記入ください。

<!--ナビゲーションメニュー-->
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li>
<li><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></li>
<li><a href="URL"><i class="fa fa-video" aria-hidden="true"></i> MOVIE</a></li>
<li><a href="URL"><i class="fa fa-plane" aria-hidden="true"></i> TRIP</a></li>
<li> <a href="URL"><i class="fa fa-utensils" aria-hidden="true"></i> FOOD</a></li>
<li> <a href="URL"><i class="fas fa-pencil-alt" aria-hidden="true"></i> BLOG</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
     $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
</script>

2行目は、スマホ画面で見た時にトグルメニューになるので、その時に表示する文字になりますのでお好みで変更できます。例えば、カタカナがいい方は、MENU→メニューなどに変更できます。

5～10行目が、PC画面で見た時の設定です。ここでFont Awesomeのアイコンを使っています。"URL"と記載されている箇所はリンクさせたい実際のURLを記入ください。そして、<i class="fa fa-home" aria-hidden="true"></i>の部分に、最初に記述した、Font Awesomeのアイコンから取得したHTMLに変更ください。また</i> HOME</a></li>の部分のそれぞれに表示させる言葉も適宜変更ください。（いったん当ブログの設定を入れています）

ここまで出来たら、画面はこんな感じになってますね。

タイトル下の場所とHTML設定後の表示

CSS設定

CSSに関しては、Yukihy Life様そのまま使わせていただきましたので、そちらのブログ様からコードをとってきてください。ナビゲーションメニューの背景色やリンク色などは、ご自身のブログデザインに合ったお好みの色に変更してみてください！スマホ画面での細かな設定も記載してくださっています！

CSS設定後はこんな感じになります。

【PC画面】

CSS設定後のPC画面でのナビゲーションメニュー

【スマホ画面】

ドグルメニュー（左未表示、右表示）

以上になります。

今回のナビゲーションメニュー設定は、け～っこうてこづったカスタマイズでした。なかなかうまくいかず何度もやり直しましたがなんとか納得するところまで出来ましたね。なかなかPCもスマホも落ち着いた感じでスッキリしたと思います。（自己満足！？）

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞

＜サイドメニューを工夫して回遊率アップを目指す！＞

【はてなブログカスタマイズ 】ヘッダー（タイトル）に画像設定して個性的なブログに！

「はてなブログ」開始して1ヵ月半ですが、ブログカスタマイズも結構進んできました。せっかくなので、どうカスタマイズしてきたかを自分の覚書も含めてブログに残していこうと思います。今回は、ヘッダー（タイトル）画像挿入を紹介してみたいと思います。

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

カスタマイズ方法

だいふく

簡単そうで、意外とヘッダー画像はてこづったニャ！

ヘッダー画像用意

まずは、画像を用意しましょう。はてなブログの画像は、横幅1000px×縦幅200pxが推奨とのことです。画像編集ツールを使って作成が一番なのですが、お金に余裕があって納得する本格的な画像を用意したいのであれば、「ココナラ」がお勧めです。

サイトに行き「Webサイト制作・Webデザイン」→「バナー・ヘッダー作成」で有料ですが素敵なヘッダーを作ってくれます。（とりあえず会員登録するだけでも楽しいサイト）

ココナラでヘッダー画像作成

ヘッダー画像の登録

ヘッダー画像の登録方法は、「デザイン設定」→「カスタマイズ」→「ヘッダ」→「ファイルを選択」で設定したい画像を選択します。

はてなブログでヘッダ画像設定

選択すると、位置を調整する画面が出ます。横幅1000px×縦幅200pxで画像を作っているとぴったしで位置調整するところがないですが、推奨サイズと違う場合は、表示したい位置を調整してください。また、画像のみ表示したい場合は、表示設定にて「画像だけ表示」にすれば、タイトル名が消えます。

画像調整

さて、確認してみましょう！ん？なんだか、画像の周りに空白が…？？？なんだか余白はカッコ悪いですよね。ブログの背景と画像の色が同じだと空白が目立たないので、当ブログのヘッダ画像真っ黒にして実験してみるとこんな感じです↓

画像の周辺に空白

これを、いい感じにカスタマイズするためには、「デザイン設定」→「カスタマイズ」→「 デザインCSS」にて、CSSに以下のコードを記入します。

/* ヘッダー画像調整 */
#blog-title {
margin-top:0px;
margin-bottom:0px;
padding-top: 0px; 
padding-bottom: 0px;
}

これで、空白がなくなりました。逆に空白が必要という方は、0pxのところを数字変更して微調整してください。ヘッダーにメニュー入れたりする方は逆に空白必要になると思いますので。

画像周りに空白がなくなった

レスポンシブデザインでの修正

もし、レスポンシブデザインを採用している場合は、これまでの設定のままでスマホで画面を見てみると、画像がドデカサイズになってはみ出しており恥ずかしー状態に！！！

スマホでヘッダー画面はみ出し

スマホで画像がはみ出さないようにするためには、さらにCSSに以下のコードの追加が必要ですので、先ほど書いたCSSに以下のコードを追加しました。

/* レスポンシブヘッダー対応 */
@media (max-width: 480px){#blog-title-inner,#title a{
height:80px!important;
width:auto;
}
#blog-title-inner {background-size: contain!important; }
}

どうなったかな！？っということで、スマホでみてみると、画像のはみだしが解消されていると思います。

スマホヘッダ画像最適に

以上が、当ブログで行った、はてなブログのヘッダ画像の設定の仕方になります！今回紹介していない、ヘッダー画像を画面横一杯に広げる方法もありますので、検索で調べてみると紹介しているブログが沢山みつかりました。

今回参考にしたブログ様

画像の空白を無くす設定で参考にさせてただきました！ありがとうございました。

レスポンシブルの設定を参考にさせていただきました。ありがとうございました。

以上になります。

当ブログのカスタマイズ紹介は、ヘッダーから順番に書くネタがなくなったら（笑）やっていきたいと思います。次は、ナビゲーションメニューですかね！？

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜レスポンシブなナビゲーションメニューを設置＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞

＜サイドメニューを工夫して回遊率アップを目指す！＞