ストレスフリー生活研究ラボ

ストレスフリー生活研究ラボ

全てのサラリーマンのための、心と体が整うストレスフリーな生き方探し

はてなブログ無料版のカスタマイズ方法(初心者向け)

f:id:jiaozi77:20190513003510p:plain

はてなブログ仲間の皆さん、こんにちは。

ブログ、何記事書けましたか?

書くだけで精一杯な時期を乗り越えて、

「他の人のブログと比べて、見栄えがしない。」

「過去の記事を見返してみると、なんだか見にくい。」

というような悩みを持ち始めているんではないでしょうか。

僕自身も同じ課題を感じ、色々とサイトの見た目を改造する方法を調べてカスタマイズしてみました。

この記事では、はてなブログ初心者のために、オススメのカスタマイズ方法をご紹介します。

是非参考にしてみてください。

 

トップページを記事の一覧表示にする

無料版だと記事が単純に縦積みされた形になって、なかなか見辛いんですよね。 

これを整理して、下のような一覧記事にする方法を調べてみました。

f:id:jiaozi77:20190512203425p:plain

 

こちらは、まずダッシュボードの「設定」の部分を開くと、

f:id:jiaozi77:20190512212423p:plain

<script type="text/javascript">
 if( location.href == 'https://jiaozi77.hateblo.jp/'){
 location.href='https://jiaozi77.hateblo.jp/archive';
}
</script>
<noscript>
<p><a href="https://jiaozi77.hateblo.jp/archive">チャオ酢ブログ</a></p>
</noscript>

  1. 青文字の部分をトップページのURLに変更
  2. 赤文字の部分をブログタイトルに変更

表示イメージはこのブログのトップをご覧ください。

チャオ酢ブログ

 

ただ、こちらの機能は意味合い的にトップページに来た人をアーカイブ画面に強制的に飛ばすって方法なので、SEO対策的にデメリットになる場合があるそうなので、ご注意を。(PROなら簡単設定できるんですけどね。)

 

ちなみに、記事編集の中の「続きを読む」設定をして、全ての記事を短く区切ってしまう対策もあります。

これはこれでSEO的なデメリットがあるという記事も・・・。

f:id:jiaozi77:20190512222122p:plain 

 どっちがいいのかわからないんで、とりあえず今のところは前者の一覧が見やすいので、こちらで対応することにしました。

 

文字に黄色いマーカーをつけたい

デフォルトでも太字とか文字の色を変えるのはできるんですが、マーカーで線を引いたみたいな見せ方がすごく見やすいなと思って、方法を調べてみました。

こういう処理です。

まず、ダッシュボードの「デザイン」を開いて、「カスタマイズ」のタブをクリックし、「デザインCSS」を選択してコードを入力してください。

f:id:jiaozi77:20190512225514p:plain

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 60%);
}

 

 こちらでは黄色を設定していますが、もっとカスタマイズしたい方はカラーコードを参考にしてみてください。”yellow”の部分を変えると、好きな色に変えられますよ。

www.colordic.org

実際に、ページに掲載する際には「記事編集」の「HTML編集」で下記コードを使用すれば指定したマーカーの色が設定できます。

<span class="marker-yellow">ここに好きな文章を入れます。</span>

 

 

広告をつけてみたい

アクセスなんか大してないんですが、でもやってみたいですよね。

Googleアドセンスは見事に却下されたので、有名なA8.net」さんに登録してみました。

記事内容に合った「プログラムに提携申請」(だいたい即時承認されます)して、「広告リンク」からHTML編集の素材を入手しましょう。

あとは、記事の編集画面で「HTML編集」のタブをクリックして該当部分に貼り付ければ大丈夫です。

f:id:jiaozi77:20190512223336p:plain

ぱっと見は難しそうですけど、よくよく見ると文書の周りに色々なコードが付いているだけなので、入れたいところに記事の素材をコピペするだけなら、初心者の僕でも大丈夫でした。
 (ブログ始めて、10日程で初収入!300円ですが嬉しいものですよ)

 

あとがき

無料版でも色々カスタマイズできるようなので、試しながらバージョンアップさせていきたいと思ってます。

おすすめのものがあれば教えてくださいね。

 

ブログランキング・にほんブログ村へにほんブログ村