さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなブログ】初心者でもできる!基本カスタマイズ方法【まとめ】

 

f:id:sanrisesansan:20200830155158p:plain

今回は、はてなブログの基本カスタマイズ記事をまとめてみました。

いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

ブログカスタマイズのほんの一例として見てもらえれば嬉しいです。

 

こんな人におすすめ

はてなブログテーマ「Under Shirt」を使っている

・ブログテーマを変更してカスタマイズしたい

・初心者だけどカスタマイズにチャレンジしたい

 


スポンサードリンク
 

テーマを決めよう!

当ブログでは「Under Shirt」というブログテーマを使っています。

このテーマの特徴は、

・カード型に記事を表示できる

アイキャッチ画像が大きくみせれる

・カスタマイズがしやすい

という3つがあり、HTMLコードなどを使ったカスタマイズがとてもしやすいと思っています。

blog.hatena.ne.jp

ちなみに、それまでは『パレット』という「バンビ」さんが作成したブログテーマを使っていました。

★この2つのブログテーマを使用したレビューはこちらです。参考までに。

www.sunrise033.com

カスタマイズをする前の準備

ブログのカスタマイズ前には、「バックアップ」をして、「テスト用ブログ」を作成するがおすすめです。

ブログテーマを変更すると、CSSデザインコードが消えてしまう!

 最低でも、CSSデザインコードをメモなどにコピペし、できれば「エクスポート」してデータファイルをPCに保存するのをおすすめします。

 

また、テーマを変更するなどの大幅なカスタマイズをする時は、そのまま自身のサイトでカスタマイズしていると運営自体にも支障が出る可能性があるので、「テスト用ブログ」を作ることもおすすめです。

手順・やり方は下記記事で紹介しています。参考にどうぞ。

www.sunrise033.com

外観のカスタマイズ 

サイト外観(トップメニュー)のカスタマイズを見ていきます。

ヘッダータイトル画像の設定 

タイトル部分はブログの顔のようなものなので、こだわりの画像を貼りたいですよね。

「このサイトにどんな記事が書かれているのか、一眼でわかるようにする」

これを僕は意識してブログタイトルをつけました。

具体的には、ブログタイトルの他に、簡単な説明文をいれています。

★コチラに詳しく載せていますので、参考にどうぞ!

www.sunrise033.com

 

ヘッダ下にアイキャッチ画像を表示する

サイトトップページにあるヘッダ下のアイコン画像から、指定のURLに移動することができす。

f:id:sanrisesansan:20200830124937j:plain


上記の部分ですね。 

この設定はコピペで貼り付けることができます。

★コードのを記載してあるサイトを下記に貼っていおきます。参考にどうぞ!

www.bambi.pro

サイドバープロフィール画像を大きくする

サイドバーのプロフィール画像を大きくしました。

f:id:sanrisesansan:20200811213250j:plain

基本がコードをサイドバーに貼り付けるだなのでめちゃ簡単です。デザインCSSなどの貼り付けはありません。

★詳しい方法がコチラからどうぞ!

www.sunrise033.com

フォローボタンの大きくするカスタマイズ

ツイッターのフォローボタンを大きくカスタマイズしました。

f:id:sanrisesansan:20200814012029j:plain

 

上記のように大きめにアイコンをつけています。ツイッターとブログの相性は良いので、フォローボタンを目立たせて活用していきたいですね。

★下記のサイトでいろんなアイコンが画像が選べます。

saruwakakun.com

必要なSNSに応じて、ボタンを付けていくこともできますね。

★詳しいカスタマイズ方法は下記を参考にしてください!

www.sunrise033.com

 

読者ボタンのカスタマイズ 

読者登録ボタンを下のように大きくして見やすくしてました。

f:id:sanrisesansan:20200814212519j:plain

はてなユーザーの人はデフォの読者ボタンが見慣れているかもですけど、サイドバーに大きく表示させたかったので、カスタマイズしました。

★設定方法はコチラの記事に詳しく載せています!

www.sunrise033.com

カテゴリの階層化

サイドバーのカテゴリが増えてきたので下のようにカテゴリの階層化をしました。

f:id:sanrisesansan:20200809162737j:plain

 

これをすることで、メインカテゴリとサブカテゴリに分けてスッキリすることができました。

今また多くなってきたので整理しようと検討中です。笑

HTMLコードとデザインCSSコードを貼り付けるだけのカスタマイズです。

★コチラに詳しく載せていますので、参考にどうぞ!

www.sunrise033.com

サイドバーのカテゴリをタグ風にアレンジする

サイドバーのカテゴリをタグ風にアレンジもコードを貼り付けるとできちゃいます。当ブログでもタグ風のカテゴリになっています。

これをしたかったんですよね〜。

色とかもサイトにあわせて変更できます。

★コチラに詳しく載せていますので、参考にどうぞ!

www.sunrise033.com

 

検索ボックスをカスタマイズ

検索ボックス(検索窓)も自分の好みにアレンジしました。

f:id:sanrisesansan:20200820160515j:plain

こんな感じです。

上の検索の文字を消したかった。

アレンジといっても、新しくコードを作成してサイドバーに貼り付けたんですけどね。デフォの検索窓はサイドバー設定で削除しています。

★コチラに詳しく載せていますので、参考にどうぞ!

www.sunrise033.com

記事内のカスタマイズ 

つづいて、記事内のカスタマイズをみていきます。

見出しをカスタマイズする

記事見出しをカスタマイズして、サイトに合った見出しをつけるのも楽しいですよね。

方法はコードをデザインCSSに貼り付けるだけです。

基本、はてなブログは、ワードプレスの違い、

大見出し→「h3」

中見出し→「h4」

になっているので、CSSコードを書き換える際には、気を付けましょう。

★下記サイトにいろんな見出しがあります。参考にどうぞ!

saruwakakun.com

★サイトの雰囲気にあわせて色も変更できます。

www.colordic.org

 

ページ上下にシェアボタンをつける

シェアボタンとは、SNSなどのソーシャルメディアにシェアするボタンです。ソーシャルメディアでのシェアは、今やサイトの人気を左右する非常に重要な要素ですよね。

このブログでも記事内の上下に貼り付けています。

★下記のサイトにHTMLコードのサンプルが多く掲載さているので、参考にどうぞ!

fit-jp.com

吹き出しをつける

吹き出しを使った会話風の文章にしてみたくて、吹き出しをつけてみました。

こんな感じです!

CSSデザインコードを貼り付けて、貼り付けたい場所にHTML編集で記事内にコードを貼り付ければOKです。

★コードや解説は下記のサイトを参考にどうぞ!

randamlife.hatenablog.com

また、僕はいちいち貼り付けるのもコードをコピペするのが面倒なのでMacのユーザー辞書機能を使っています。

Macバイスお使いの人は下記記事を参考にしてみてください!

www.sunrise033.com

トップメニューに戻るボタンをつける

スマホで記事を読むと文章が下に長くなるので、トップページに戻るボタンがあると便利かなと思い設置してみました。

変更した結果がこれです。

f:id:sanrisesansan:20200830145848j:plain

ある程度(たしか50文字くらい)スクロールされると表示されるようになっています。

★コードや解説は下記のサイトを参考にどうぞ!

demacassette2.hateblo.jp

目次のカスタマイズ 

目次も自分のお気に入りにカスタマイズしたくなりましたので、やってみました。

変更後はこんな感じです。

f:id:sanrisesansan:20200818190250j:plain

大見出しを数字に、中見出しを記号にそれぞれ変更しています。あと、大見出しを太文字にしてすこし強調もさせてみました。

★コチラにやり方を詳しく載せていますので、参考にどうぞ!

www.sunrise033.com

記事内の表 スクロールさせる

表を使う記事では、スマホ画面で「横にはみ出してしまう」ことがあります。そんな時に役立つのはスクロールさせる設定です。

f:id:sanrisesansan:20200830143806j:plain

 

完成するとこんな感じになります。

★設定方法は下記を参考にしてみてください。

www.sunrise033.com

 

その他ツールの設定や手順

カスタマイズで使えるツールの活用方法を紹介します。こちらも参考にしてみてくさだい。

「Canva」でアイキャッチ画像をつくる

「Canva」とはだれでも簡単に画像加工ができるサイトです。有料であるPro版の方が素材や写真が多いですは、無料でも使うことができます。

僕は1年半ずっと無料で使ってます!

アイキャッチや見出し画像などの作成に重宝します。

★下記事に詳しいやり方を載せていますので参考にどうぞ!

www.sunrise033.com

画像URLをはてなフォトライフで調べる

画像URLを調べたい時は「はてなフォトライフ」を利用するのが便利です。

はてなフォトライフ」は、はてなブログに画像を貼り付ける時にデータを保存する場所です。はてなブログで記事を作るほとんどの人が使うツールだと思います。

★画像URLを調べる方法は下記事を参考にどうぞ!

www.sunrise033.com

まとめ

カスタマイズ記事をまとめてみました。

これからも随時新しいカスタマイズを更新していきたいと思います。ぜひ、活用してみてください。

最後まで読んでいただき、ありがとうございます。

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村