オカシンのブログ・育児体験記

二人の子持ちサラリーマンが副業としてブログをやっている成果と育児に関する事を記録しています

はてなブログを開設してから今までにやった事の備忘録

※この記事はポケットサラリーから移動してきました。

どうも、オカシンです。

はてなブログを開設してから今までやった事の備忘録です。

「これからはてなブログを始めよう」「はてなブログを始めたけど、どんな事をすればいいんだろう」「あれってどうやるんだっけ?」

という方のために今まで僕がやった事を備忘録として記録しておきます。

今後もはてなブログでやった事が増えたらこのページに追記していく予定です。

はてなIDの登録時に気を付ける事

はてなブログのIDは二度と変えられません

リンクを貼ったりした時に強制的に表示されてしまうのではてなIDは慎重に考えましょう。

僕は最初に名前と誕生日で登録してしまって、はてなIDを作り直しました。

プロフィールのはてなIDを隠す

こちらを参考にさせていただきました。
はてなブログで、はてなIDを非表示にする方法 - はてなブログ初心者の成長日誌

ダッシュボードの「デザイン」から「カスタマイズ(スパナマーク)」の「サイドバー」の「プロフィール」と進みます。

すると右側に「編集」というのがあるので押します。

下の画面が表示されるので、はてなIDの「表示する」のチェックをはずして「適用」を押します。

f:id:okashin111:20181027100642p:plain

記事の下に表示されているIDを消す。

デザイン→カスタマイズ→デザインCSSに

/*IDを隠す*/
span.author.vcard {
display: none;
}

を挿入

デザインテーマの変更

基本ですね、はてなブログに限らず、ブログを開設したらまずやる事です。
僕はインストールテーマのMinimalismを使っています。
自分の好きなデザインを選べばいいのですが、スマホからアクセスする人が多いので、パソコンとスマホ両対応のレスポンジブテーマというのがおすすめです。

文字の大きさの変更

はてなブログのデフォルトのフォントだと小さくて見づらく感じたので少し大きくしました。
こちらを参考させていただきました。
はてなブログのカスタマイズ2 ~ 文字サイズの変更 - ネットに生きる。 ~ IT技術、ネットのネタなどを幅広く紹介

トップページの一覧化

はてなブログのトップページって記事に「続きを読む」を設定しないと新しい記事が全部表示されちゃうんですよね。

これだと見にくいかなと思って一覧化しました。

参考にさせていただいたブログはこちら。
はてなブログのトップページを記事一覧ページに変更できた!コピペするだけ!なのに途中つまづいたけどね^^; - 言いたいことは山のごとし(^^)

はてなブログのデザイン設定からヘッダに以下のコードを張り付けます。

<script type="text/javascript">
if( location.href == 'https://~~~/'){
location.href='https://~~~/archive';
}
</script>
<noscript>
<p><a href="https://~~~/archive">ブログ名</a></p>
</noscript>

カテゴリの階層化

カテゴリが増えすぎるとわかりずらくなりそうだったので、ツリー構造にしました。

参考にさせていただいたブログはこちら。
【はてなブログ】カテゴリーを階層化する方法 – ブログ運営のためのブログカスタマイズ

まずダッシュボードの「デザイン」から「カスタマイズ(スパナマーク)」の中の「フッタ」に下記のコードを追記します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sub_cat(str){
 (function($) {
   $(function() {
     $(str).each(function(){
        var txt = $(this).text();
         $(this).html(
             txt.replace(/.*-(.*)/g,'$1')
         );
      });
	});
 })(jQuery);
}
 (function($) {
    $(function() {
      $("ul.hatena-urllist li a:contains('-')").css( "margin-left", "20px" );
      sub_cat("ul.hatena-urllist li a:contains('-')");
      sub_cat("article div.entry-categories a:contains('-')");
      sub_cat("archive-entry div.categories a:contains('-')");
	});
 })(jQuery);
</script>

次に、ツリー構造にしたいカテゴリを作成します。

当ブログだったら、下の2つのカテゴリがあります。
・副業
・副業-ブログ

これをダッシュボードの「記事の管理」から設定したい記事を選択して、「チェックした記事にカテゴリーを追加」から上記2つのカテゴリーを設定します。

f:id:okashin111:20181027103207p:plain

こんな感じで2つカテゴリーを設定します。そしてトップページを確認すると以下のようになっています。

f:id:okashin111:20181027103315p:plain

はてな記法への切り替え

はてなブログは記事を書く時の記法が選択出来ます。
選択できる記法は以下の3つです。
見たままモード

画像が表示されたり、フォントのスタイルがそのまま見れたりします。

初心者には分かりやすいですが、広告を貼ったりするにはHTMLモードに切り替えなければなりません。

あとはスマホからだと広告を張り付けられません。

Markdown
色々なブログと互換性があるので、はてなブログから引っ越ししようとした時に楽。

改行の方法がめんどくさい。

はてな記法
Markdownに似ているが、はてなブログ独自の記法。

簡単な表なら楽に作れる。

僕はこれを知らなくて、しばらく見たままモードというので書いてました。

スマホから広告を貼ろうとして、違う記法が選べる事を知りました。

僕は1番使いやすいと感じたはてな記法を使っています。

Markdownとはてな記法は比較的簡単に切り替えられるのですが、見たままモードからMarkdownやはてな記法へ変換するのは少し手間がかかります。

やり方はこちらのブログを参考にしてください。
「見たままモード」で書いた記事を「はてな記法」や「Markdown」に変更する方法 - はてなブログカスタマイズメモ

問い合わせ先の設置

読者の方が何か質問したい事があった時のために問い合わせ先を設置しました。
まだ一回も問い合わせが来たことはありませんが・・・

こちらのブログを参考にさせていただきました。
お問い合わせフォームを作成&はてなブログに設定する方法【図解でわかりやすく!】 - ウィリスの宇宙交信記

グローバルナビゲーションの設置

グローバルナビゲーションとはブログ内のどのページからでも特定のページにアクセス出来るメニューの事です。
「HOME」や「会社概要」や「お問い合わせ先」とかが多いですね。
カテゴリやおすすめの記事を表示させている事も多いです。

参考にさせていただいたブログはこちら。
【はてなブログ】グローバルナビゲーション(ヘッダーメニュー)でカテゴリーを設置して回遊率アップ! - クリアメモリ

手順は簡単2ステップ

1.ダッシュボードの「デザイン」から「カスタマイズ(スパナマーク)」の「ヘッダ」に下記を追加します。

<div class="nav">
  <ul>
    <li><a href="https://~">カテゴリ1</a></li>
    <li><a href="https://~">カテゴリ2</a></li>
    <li><a href="https://~">カテゴリ3</a></li>
    <li><a href="https://~">カテゴリ4</a></li>
    <li><a href="https://~">カテゴリ5</a></li>
  </ul>
</div>

2.「デザインCSS」に下記を追加します。

.nav>ul {
  padding: 0;
  margin: 0;
  width: 100%;
  margin-bottom: 30px;
  display: block;
  overflow: hidden;
}

.nav>ul>li {
  box-sizing: border-box;
  width: calc(100% / 5);
  height: 50px;
  line-height: 50px;
  background: linear-gradient(#1a1a1a, #676767, #1a1a1a);
  border-left: 1px solid white;
  color: white;
  float: left;
  list-style-type: none;
  text-align: center;
  position: relative;
  transition: box-shadow .3s ease-in-out;
}

.nav>ul>li:first-child() {
  border-left: 0;
}

.nav>ul>li:hover {
  box-shadow: 0 0 50px 25px #1a1a1a inset;
}

.nav>ul>li>a {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

今のところこんな感じです。

今後もはてなブログでやった事が増えたらこのページに追記していきます。

※ここから2018年10月27日追記

記事下のはてなIDと時刻を隠す

こちらのブログを参考にさせていただきました。
はてなブログで記事下のIDと「何時間前」「何日前」の日付を消す方法 - 子持ち共働き夫婦の家計日記

ダッシュボードの「デザイン」から「カスタマイズ(スパナマーク)」の中の「デザインCSS」に下記のコードを追記します。

 /*記事下のIDと時刻非表示*/
span.author.vcard{ 
display:none; 
} 
span.entry-footer-time {
display: none;
}
/*記事下のIDと時刻非表示*/ 

はてなブログproになってからやった事

はてなによる広告の非表示

これがはてなブログproにする最大のメリットですね。

無料版はてなブログでは、自動的にはてなブログの広告が入ってしまうので、自分で設置した広告が目立たなくなってしまいます。

ダッシュボードの「設定」→「詳細設定」に「広告を非表示」という項目があるので「はてなによる広告を表示しない」にチェックを入れて「変更する」を押します。

トップページの表示形式を変更

無料版はてなブログではトップページを一覧化するのに、コードを張り付ける必要がありましたが、はてなブログproではその機能が備わっています。

こちらも「詳細設定」に「トップページの表示形式」という項目があるので、「一覧形式」にチェックを入れて「変更する」を押します。

キーワードリンクの非表示

はてなブログはデフォルトだと、キーワードリンクという機能がついています。

記事中のキーワードをクリックすると、自動的にキーワードの説明ページが開かれる機能です。

正直、この機能はとてもわずらわしいと思っていました。

こちらも「詳細設定」から「記事にキーワードリンクを付与しない」にチェックを入れて「変更する」を押します。

独自リンクの設定

こちらもはてなブログproにする最大のメリットですね。詳細はこちらの記事をご覧ください。
https://www.pocketsalary.com/entry/2018/10/15/180658

プライバシーポリシー