初心者でもできる！はてなブログのサイドバーをおしゃれにするカスタマイズ

ブログの外観がかっこいいとテンションが上がりますね。

おしゃれなブログには憧れるけど、CSSコードとか、HTMLとか…よくわからない。

カスタマイズをやってみたけれど、うまくいかなくてデザインが崩れちゃった。

うん、そういうことあるよね！だけど大丈夫！！

この記事で初心者でも絶対にできるサイドバーのカスタマイズを超絶わかりやすく解説します！

＊カスタマイズは失敗するとデザインが崩れることがあります。必ずバックアップを取ってからはじめてね。

カスタマイズ１/プロフィールをめちゃくちゃカッコよくする
- プロフィールを表示する手順
- プロフィールカスタマイズのポイント
カスタマイズ２/カテゴリーにアイコンをつけてスッキリまとめる
- アイコンを使ったカテゴリーを設置する手順
- カテゴリー一覧のカスタマイズのポイント
カスタマイズ３/オススメ記事を大きな画像でふわっキラっと表示させる
- ふわキラのおすすめ記事一覧を設置する手順
- おすすめ記事一覧を設置するカスタマイズのポイント
カスタマイズ４/X（旧Twitter）のタイムラインを設置する
- Xのタイムラインを設置する手順
- タイムライン設置の注意点
サイドバーのカスタマイズ/まとめ

カスタマイズ１/プロフィールをめちゃくちゃカッコよくする

難易度　　：☆
おしゃれ度：☆☆☆☆☆
手順の多さ：☆☆☆
めちゃくちゃ簡単なのに、とてつもなくカッコいいプロフィールが作れます。
手順は多いですが、解説記事のとおりに進めれば初心者でもかならずできますよ！

プロフィール画像

↑↑これは、私のブログのサイドバーに表示してるプロフィールです。おしゃれでしょ。

実はこのプロフィール、フジグチさんのこの記事を読めば誰でも簡単に作成できるんですよ↓↓

■参考記事■

はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選 - フジブロっ！

記事内に入力フォームが設置されており、指定の項目を記入すれば自動でHTMLコードが生成されます。

あとは出来上がったコードをサイドバーの追加モジュールに貼るだけ。

初心者でも安心！簡単にかっこいいプロフィールが作れます。

フジグチさんありがとうございます！

プロフィールを表示する手順

STEP

デザインを選ぶ

10通りのデザインの中から好きなものを選びましょう。どれもめちゃくちゃお洒落です。

STEP

画像を準備する

プロフィールに表示する画像を準備します。
フジグチさんの記事にはデザインごとに適正な画像サイズが表示されています。めちゃくちゃ親切！

この機会にお気に入りの画像をプロに描いていただくのもアリですよ。ココナラならあなたにピッタリのイラストが見つかるかも・・・↓↓

STEP

フォームに入力

【準備するもの】

リンク先（aboutページなど）のURL
使用する画像のURL
フォローボタンのHTMLとCSSコード　※フォローボタンを入れる場合

このプロフィールにはおしゃれなフォローボタンを入れることができます↓↓

フォローボタンの画像

最初にこの記事を参考にして、フォローボタンのHTMLとCSSコードを作成しておくとスムーズです。

記事の手順に従ってフォームに入力するだけです。めちゃ簡単↓↓

■参考記事■

はてなブログ-フォローボタンのカスタマイズ【Twitter、Pinterest、YouTubeにも対応】 - フジブロっ

STEP

完成したコードをサイドバーの編集画面に貼る

ダッシュボードのデザイン→カスタマイズ（スパナのアイコン）→サイドバー→モジュールを追加→＜/＞HTMLに貼ります。
忘れずに適用ボタンをクリックしてね！

プロフィールカスタマイズのポイント

フジグチさんの記事は、とにかく親切でわかりやすいので、安心してカスタマイズに挑戦できます。

初心者がつまずきそうな画像URLの取得方法も、ちゃんと解説してくださっていますよ。

フォローボタンを表示させたい人は、最初にコードを作成しておくとスムーズカスタマイズできます。

カスタマイズ２/カテゴリーにアイコンをつけてスッキリまとめる

【難易度】　　☆　（はてなのアイコン）
　　　　　　　☆☆（FontAwesome）　　
【カッコよさ】☆☆☆☆☆
【手順の多さ】☆　（はてなのアイコン）
　　　　　　　☆☆（FontAwesome）　
はてなブログのアイコンだけを使えば超絶簡単！
FontAwesomeを使うと少しだけ難易度があがります。

カテゴリー一覧/サイドバー

↑↑このブログのサイドバーに表示されているカテゴリー一覧です。スタイリッシュでしょ？

このカスタマイズも簡単にできちゃうんです。
またまた「フジブロっ！」。フジグチさんの記事ですよ↓↓

■参考記事■

はてなブログ-アイコンを使ってカテゴリを分かりやすく表示する - フジブロっ！

使用するアイコンを決めて、クラス名をフォームに入力するだけ。あっという間にコードが作成できます。

あとは、コードをサイドバーに貼るだけ。超絶簡単！

アイコンを使ったカテゴリーを設置する手順

STEP

はてなブログアイコンフォントからカテゴリーに合うものを探す

まず、はてなブログで使えるアイコンフォントで、あなたのカテゴリーに合うものを探しましょう。

■参考記事■

はてなブログで使えるアイコンフォント全125種 - フジブロっ！

すべてのカテゴリーにしっくりくるアイコンが見つかった方は、Step2はスキップ。Step3に進んでね。

STEP

FontAwesomeからアイコンを探す

はてなブログのアイコンで見つからなかった方はFont Awesomeで探しましょう。1600種類以上のアイコンから選ぶことができます。

最初にダッシュボード→詳細設定→「headに要素を追加」にFontAwesomeの読み込みコードを貼り付けてくださいね。

読み込みコードとコードの貼り方、FontAwesomeの使い方はこちらに詳しく記載されています↓↓

■参考記事■

はてなブログ-アイコンを使ってカテゴリを分かりやすく表示する「FontAwesomeを使用する」 - フジブロっ！

STEP

フォームに入力する

【入力する項目】

カテゴリーのURL
アイコンのクラス名
表示させるカテゴリー名

この3項目をフォームに入力するだけで、HTMLコードが生成されます。

STEP

完成したコードをサイドバーの編集画面に貼る

ダッシュボードのデザイン→カスタマイズ（スパナのアイコン）→サイドバー→モジュールを追加→＜/＞HTMLに貼ります。最後に忘れずに適用ボタンをクリックしてね！

カテゴリー一覧のカスタマイズのポイント

はてなブログのアイコンだけを使えば、初心者でも数分で完成するカスタマイズです。

FontAwesomeを使う場合は、読み込みコードを詳細設定の「headに要素を追加」に貼るのをお忘れなく。FontAwesomeのバージョンにも注意してくださいね。

FontAwesomeを使うと少し難易度があがります。しかしフジグチさんの記事をよーく読めば初心者でも大丈夫。とても詳しく説明されています。

ぜひ、チャレンジしてみましょう！

カスタマイズ３/オススメ記事を大きな画像でふわっキラっと表示させる

【難易度】　　☆☆☆
【きらめき度】☆☆☆☆☆
【手順の多さ】☆☆☆

次は、サイドバーにオススメ記事をふわキラっと表示させるカスタマイズです。

こちらの画像にカーソルを合わせてみて！ふわキラっとするでしょう？
※スマホの方は画像をタップしてみてください↓↓

このようなふわキラなおすすめ記事一覧をサイドバーに設置しましょう。

画像が大きくふわっキラっと目立つので、思わずクリックしたくなるはずです↓↓

サイドバー/オススメ記事

こちらのカスタマイズは日の出ポチさんの記事を参考にさせていただきました。

ありがとうございます！↓↓

■参考記事■

カーソルに合わせて画像を浮かせる方法【はてなブログカスタマイズ】｜さんログ

ふわキラのおすすめ記事一覧を設置する手順

１．使用する画像のクラス名を変更する。（難易度☆☆☆）
・このカスタマイズのキモ。ここをクリアすればあとはカンタン！

２．「おすすめ記事一覧」の外観を作成する。（難易度☆）
・通常の記事作成の要領でOK！

３．各記事へリンクを貼る。（難易度☆☆）
・リンクの形式は「選択範囲」を選択してね！

４．完成した「おすすめ記事一覧」のHTMLコードをコピー。（難易度☆）　
・「HTML編集」で本文をコピーするだけ。

５．サイドバーの編集画面にHTMLコードを貼る。（難易度☆☆）
・コードを貼る場所（＜/＞HTML）は下の方にあります。スクロールして表示させてね。

それでは、カスタマイズをはじめましょう！記事作成画面を開いてくださいね。

STEP

使用するアイキャッチ画像のクラス名を変更する

＊アイキャッチ画像は実寸よりも少し大きなものを用意しましょう。クッキリと美しく表示されます。
（私は実寸338×177pxのところ500×263pxの画像を使いました）

記事作成画面右側の「+写真を投稿」から選択した写真を貼ります。

「写真を投稿」画面

見たまま編集ではこのように画像が表示されますが・・・

見たまま編集での画像の見え方

HTML編集ではこのような文字列が表示されます↓↓

HTML編集での画像の見え方

これが、この画像のURLです。拡大するとこのように書かれています↓↓

画像のURL/クラス名

class="hatena-fotolife"がクラス名です。

「hatena-fotolife」を「blockArea」に書き換えます。

class="hatena-fotolife”
↓
class="blockArea"

STEP

続けてサイドバーに表示させる「おすすめ記事一覧」を作成する

「見たまま編集」にしてテキスト（記事タイトルなど）を書き入れます。
＊この時の改行は[Shift]+[Enter]キーがおすすめ。
複数記事を設定する場合は[Enter]キーで改行して、次の記事の画像を貼りましょう。
＊[Shift]+[Enter]での改行よりも[Enter]の方が行間が広くなります。

＊使用する全ての画像のクラス名を「hatena-fotolife」から「blockArea」に書き換えるのをお忘れなく。

サードバー/オススメ記事の作成

STEP

おすすめ記事へリンクを貼る

おすすめ記事一覧から各記事へ飛べるように、リンクを貼ります。

①画像と記事タイトル（テキスト）をまとめて選択

②「リンク」のアイコンをクリック

サイドバーカスタマイズ/オススメ記事のリンク

③リンク先のURLを貼る

④プレビューをクリック

⑤「選択範囲」を選択する

⑥「選択した形式でリンクを挿入」をクリック

サイドバーカスタマイズ/オススメ記事のリンク２

これで、画像からもタイトルからもリンク先の記事に飛べます。

STEP

完成したHTMLコードをサイドバーの「モジュールを追加」に貼る

①編集モードを「HTML編集」に切り替える。作成したおすすめ記事のHTMLをコピーする。

サイドバーカスタマイズ/オススメ記事のHTMLコード

②ダッシュボードの「デザイン」から「カスタマイズ（スパナのアイコン）」→「サイドバー」→「モジュールを追加」を開く。

①「＜/＞HTML」を選択（下の方にあります）

②タイトルを記入

③先ほどコピーしたHTMLコードを貼る

④「適用」をクリック

サイドバーカスタマイズ/モジュールの編集

STEP

「デザインCSS」にCSSコードをコピペする

最後の仕上げ！
「デザインCSS」にCSSコードを貼ります。

＊コードは日の出ポチさんの記事から引用させていただきました↓↓

カーソルに合わせて画像を浮かせる方法【はてなブログカスタマイズ】｜さんログ

img.blockArea{
    transition: .3s; /*変化するまでの時間*/
}
img.blockArea:hover {
opacity: 0.6;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
transform: translateY(-0.1875em);
}

①↑↑このコードをコピーする。

②ダッシュボードの「デザイン」→「デザインCSS」をクリック。CSSの記述欄が開くので、コピーしたCSSコードを貼る。

デザインCSS