無知でも出来る!はてなブログサイドバーの便利でオシャレなカスタマイズまとめ!!


今回はこのブログで扱ってるサイドバーのデザインについて色々語ろうと思います。
サイドバーは僕のブログでいうところ、記事ではなく記事の右側の箇所になります。 プロフィールや記事のリンクを貼ってあるところですね。

ここを上手く使うことで読者の回避を下げられるので、ブログの質を高めるのにとても大切な箇所といっても過言ではない。

それではサイドバーのデザインについて語っていきます。

編集の仕方

設定 → デザイン → カスタマイズで弄ることが出来ます。
プログラムはその中にあるデザインCSS・フッタ・サイドバーと書かれた辺りに記入すると変更できます。
僕が導入する際参考にさせていただいたサイトを貼るので、その方の指示通りに入れていただければ大丈夫です!

プロフィール画像を大きくする

ブログの運営者の紹介ですね。誰もが入れる大事な所です。

はてなブログでは一応簡単に作れます。
デザイン → サイドバー → モジュールの追加 → プロフィール
と行けば、はてなブログデフォルトプロフィールが作れます。こんな感じですね。

f:id:Nuohman:20161004093614p:plain

しかし、これではプロフィール画像が小さく良く見えない…。
そこで変更したのが今のプロフィール欄です!

 設置方法はこちら

<img src="プロフィール画像のURL" alt="ブログタイトル"/>

このコードを画像を表示させたい箇所に設置するだけで大丈夫です。

プロフィール画像のURLを知る方法はとても簡単! 以下の手順で画像URLを知ることができます。

  • はてなブログで適当に記事を作成する
  • 記事にプロフィールにしたい画像を投稿する
  • 投稿された画像はフォトライフというところにアップロードされるので、フォトライフを見に行く

f:id:Nuohman:20170521230728p:plain

  • 投稿してきた画像一覧の中からプロフィールにしたい画像をクリック
  • 個別ページに飛ぶので、表示された画像を右クリックし、"新しいタブで画像を開く"をクリック
  • 開いたページのURLが画像URLになるので、それを貼り付ければOKです!

f:id:Nuohman:20170521231731p:plain

画像の大きさは投稿した時の大きさで表示されます。
なので大きさが気になる方は投稿の時点で大きさを変更するか、先ほどのコードではなく以下のコードでwidthheightの所に数値を入れて変更してください。

<img src="画像URL" alt="ブログタイトル" width="横幅" height="縦幅"/>

SNSフォローボタンの設置

今までデフォルトのプロフィールを使ってたので気にしませんでしたが、上でプロフィールを改造するとなったのでせっかくならと「読者になる」「Twitter」のアイコンを可愛くオシャレに改造しました!
参考にさせていただいたのはこちらのサイトです!

僕は使ってなかったの消しましたが「feedly」も追加できますね!

Twitterタイムラインの設置

別記事で書きました!

一番下のモジュールを固定する

サイドバーの一番下に置いた項目をスクロールした際固定するというものですね。
実際にスクロールしていただければ分かると思いますが、この記事だと「はてブらんきんぐ」という項目が、下にスクロールしてもずっと固定されています。 他の記事も観てもらえる確率が上がるかな?と思い入れました!
参考記事はコチラです。

注目記事を設置する

注目記事には以下の手順でいける。
デザイン → サイドバー → モジュールの追加 → 注目記事

f:id:Nuohman:20170521235849p:plain

集計方法の所で何の記事を設置するのか選べるよー。

僕は一番下のモジュールに、はてブ人気の高い記事を載せたかったからこれを導入。
一見さんなどに人気の記事も観てもらえないかな…っと思って設置した。
モジュール固定と組み合わせるとPV数上がるかと思ったがどうなるか…。

今後導入しよう!と考え中のこと

Amazonランキング

一度入れてみたのですが、サイドバー固定のプログラムと共に設置したら上手くいかない時が多々あったので外しました。
どこかがおかしいと調べたのですが分からずで…分かったら入れたいと思います!

複数のモジュールを一括化

かっこいい!と一目惚れして導入しようと思いました。
ですが、当ブログは人気のあるブログではないので、色んな記事があることを知ってもらうにも一つ一つのモジュールを表示した方が良いと判断したため導入を遅らせました。

まとめ

カスタマイズはまっちゃってヤバかったです…
これらを導入した時は10月にブログをリニューアルした時なんですが、10時間以上いじって遊んでたかな?笑

やらなきゃならない「記事を書く」など忘れてやってました笑

反映される喜びや、かっこよく可愛くオシャレな見た目になるのに感動したりと、カスタマイズは本当に面白いですね!
自分だけのブログが出来上がっていくのに感動します!
Proにした時もそうですが、また更にブログへの愛着が湧きました。

今回紹介させていただいた方の説明はとてもわかりやすく、無知の僕でも簡単(でもなかったけど笑)に、最後には導入ができたので、ぜひみなさんも試してみてください!