ほぼコピペ一発!はてなブログをシンプルにカスタマイズする方法10選!

この記事は、HTMLとかCSSとかいう知識がまるでないパソコンスキル初心者の僕が、はてなブログをシンプルにカスタマイズするために、参考にさせていただいた記事を徹底的に紹介します。

ほぼコピペだけで出来るものばかり厳選しました。

これだけ見れば、ある程度はブログカスタマイズてきるよって内容にしました。

目次

はてなブログ初期画面を非表示 

www.kimanagu.com

 

まず、前提がシンプルにカスタマイズですから、もともと表示されている項目が、気になって仕方ないんです。

自分で一からやりたい派です。カスタマイズの知識はないんですがね('ω')

そんな僕でもわかるように、キレイにまとまっています。

 

▶目次にもどる

ブログ下の○年~×年コピーライト表記 

www.shigo45.com

 

まぁこの表記は好みですね。当ブログにもあるこんなやつ。

「Copyright © 2016-2017 あおりゅうスタイル All Rights Reserved.」

 

▶目次にもどる

文字を大きくしたり行間を調整

www.ituore.com

 

はてなブログの行間が空きすぎる問題、文字が小さい問題を見事に解決してくれました。

画像も多く、初心者に優しい書き方です。ありがたや(#^^#)

 

▶目次にもどる

トグルメニュー・メニューバー設置 

www.warorince.com

よくスマホなんかで、右上にメニューバーがありますよね。

当ブログでも設置していて、スマホで見ている人は右上にあります。

トグルメニューと呼ばれていて、クリックするとホームページの記事一覧なんかが出てくるヤツです。 

この記事は、トグルメニューを実際につけてみたという内容のブログです。葛藤(気持ち)がわかります(*'ω'*)

 

▶目次にもどる

パンクズリスト設置 

www.ankopan.com

 

当ブログでも設置していますが、記事下に、パンクズリストってやつがあります。

トップ>ブログ>【ブログ初心者へ】ほぼコピペ一発!はてなブログをシンプルにカスタマイズする方法10選!

↑こういうやつです。

これを記事の上下に設置する方法が載っています。


▶目次にもどる 

トップに戻るボタン設置

blog.mshimfujin.net

 

スマホで見てると、下に行けば行くほど、上に戻りにくいですよね。

そんな時はコレを参考に。今も右下にあるヤツです。

 

▶目次にもどる

シェアボタン設置 

www.ituore.com

 

当ブログでも使わせてもらってます。

先にも紹介した『いつ俺』さん。本当に親切に解説してくださって助かります。

 

こちらは、色々なシェアボタンを紹介している内容です。

【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW (バックフロウ)

ほかのデザインも見たい人は参考になりますよ^^


▶目次にもどる

目次を作るHTML・CSS 

keimatsumoto.com

 

zono-tariki.jugem.jp

 

ブログ記事に、目次があったら親切ですよね。

はてなブログには、

「記事を書く→HTML編集→目次を表示したい箇所に、[:contents]とコピペする」

これだけで、目次にできるように設定されています。すばらしいっす(^^)

 

これもいいのですが、自分で作りたいというわがままな僕は、他に探してみることに。

そして、行き着いたのが上記の二つ。

僕も知識がないので定かではありませんが、自分でCSSで設置する方が、SEO的には良いそうですよ。

 

そして、上記の二つを参考に、ああでもない、こうでもないと、HTML知識初心者なりに試行錯誤し、何とか自力でここまでできました。

はてなブログ用の階層タイプの目次です。

記事を書く→HTML編集→目次を表示したい箇所に、コピペしてくださいな^^

 

<p><a href="#i1">1. 目次を作る</a></p>
<p> <a href="#i1-1">1-1. 簡単な目次を作る</a></p>
<p> <a href="#i1-2">1-2. CSSを設定する</a></p>
<p> <a href="#i1-3">1-3. 階層構造のの目次を作る</a></p>
<p><a href="#i2">2. 目次を作る2</a></p>
<p> <a href="#i2-1">2-1. 目次を作る2-1</a></p>
<p><a href="#i3">3. 目次を作る3</a></p>
<p> <a href="#i3-1">3-1. 目次を作る3-1</a></p>
<p> </p>
<p> </p>
<p> </p>
<h3 id="i1">1. 目次を作る</h3>
<h4 id="i1-1">1-1. 簡単な目次を作る</h4>
<p>(本文)</p>
<h4 id="i1-2">1-2. ページ内リンクを設定する</h4>
<p>(本文)</p>
<h4 id="i1-3">1-3. 階層構造の目次を作る</h4>
<p>(本文)</p>
<h3 id="i2">2. 目次を作る2</h3>
<h4 id="i2-1">2-1. 目次を作る2-1</h4>
<p>(本文)</p>
<h3 id="i3">3. 目次を作る3</h3>
<h4 id="i3-1">3-1. 目次を作る3-1</h4>
<p>(本文)</p>

 

▶目次にもどる

関連記事の表示

psn.hatenablog.jp

当ブログでも使用中。

記事下なんかに関連記事を表示させるための内容です。

 

▶目次にもどる

文章を蛍光マーカーで表示する

www.mayoinu.com

 

この表示のカスタマイズです。

他の記事は、CSSをいじって、もともとブログの太字をそのままマーカー表示するものばかりでした。

こちらは、太字を変えることなく、蛍光マーカー表示できます。 

 

▶目次にもどる

おわりに 

自分が困ったことを見事に解決してもらった記事ばかりです。

もし、紹介した記事を書いている方で「あれっ、勝手に使われてる」と不快になった方は、ご一報いただければ、速攻で消します('ω')

 

いやぁ、でもカスタマイズって終わりがない(/・ω・)/

 

この記事のカテゴリーブログ カテゴリーの記事一覧 

【ブログ】50記事書いたけど全く稼げない僕は、ブログ弱者だ - あおりゅうスタイル

【ブログ初心者へ】何を書けばいいかわからない人は、雑記ブログで書き続けろ! - あおりゅうスタイル

ブログ初心者に伝えたいこと ブログで稼ごうとしていた私がおかした失敗 - あおりゅうスタイル

 

▶目次にもどる