はてなブログで「続きを読む」をカスタマイズする方法（パソコン編）

こんばんわ。今までWordpressで記事を書いていましたが、今回からはてなブログに引越して1回目の記事を書いていますshigeと申します。

どうしてはてなブログに引っ越したかは後々書いていくとして、さっそく忘れないうちにカスタマイズしたことを記事にして残していこうと思います。

wordpressではトップページを開いても記事一覧が表示され、みたい記事をクリックして記事ページに飛ぶという見かたでした。

ですが、はてなブログはトップページに飛ぶと設定した記事数（仮に10とする）全てを1ページに表示するため見たい記事を探すのに結構手間がかかりました。

それが通常で慣れているのかもしれませんが、私はどうも見慣れないので何とかしたいと探したところ「続きを読む」をタグで入れればスッキリするとの情報が。

確かにスッキリはしたのですが、ボタンが好みではなかったためそこをカスタマイズしてみたいと思います。

 私は「Innocent」というテーマを使わせてもらっています。

なので他のテーマではどうなのかわからないので予めご了承ください。

通常の「続きを読む」

 黒の背景に白文字で書かれています。

全体的に暗めというか落ち着いた感じの色合いだと馴染むのでしょうが、どうも黒が浮いて落ち着きません、

カスタマイズの仕方

cssの記入場所

「管理画面 > デザイン」をクリックします。

１．工具マークの「カスタマイズ」をクリックします
２．デザインCSSをクリックします。
３．四角の中をクリックすると書き込めるようになります。

アイコンを表示させるカスタマイズ

実際にここに表示させることができればわかりやすいのですが、私のそんな知識はないので画像で勘弁して下さい。

白い背景に黒文字にしました。それだけだと味気ないのでwebフォントを前に表示してみました。

先ほど説明したCSSの入力先に下記のコードをコピペして下さい。好みに合わせて色を変えるのもいいですね。

webフォントは他にも種類がたくさんあるので好きなものに変えて使うこともできます。

後は星マークとシェアのやつをトップに表示されないようにしたいですね。

参考にさせて頂いたサイト様