飛人のサイト工房

これからWEBサイトを作ってみよう!というブログです。

【はてなブログ】サイドバーのプロフィールデザインを、超簡単にカスタマイズする。

~専門ブログを作る!vol.8~

シリーズ記事

はてなブログのプロフィール欄のカスタマイズをします。

ブログが1つしかない場合はデフォルトの設定のままでも良いと思います。

このブログの場合、はてなブログで2つ目のブログなので

  • プロフィール画像が合わない
  • ツイッター連携のアカウントが違う

などの問題が出るので、

  • プロフィール画像を大きなサイズのアイコンにする
  • 連携するツイッターアカウントを専用のアカウントにする

上記のカスタマイズで解決します。

はてなプロフィールのカスタマイズ

カスタマイズする場所:

ダッシュボード>>デザイン

 >>サイドバー

>>プロフィール

プロフィールモジュールをカスタマイズする

はてなブログのサイドバー・モジュール「プロフィール」の内容を設定します。

まとめ
  1. プロフィールモジュールの設定
  2. 「ブログ説明」欄のカスタマイズ

参照:プロフィールの設定とaboutページ - はてなブログ ヘルプ

1.プロフィールモジュールの設定

サイドバー>>プロフィールの編集

ここでの設定で

  • タイトル : 「プロフィール」
  • 読者になるボタン : 表示する

以外の設定は解除します。

するとこんな感じ。

 

とんでもなく殺風景です。

2.「ブログ説明」欄のカスタマイズ

 

手順1.プロフィール画像の設定

・はてなブログの「見たまま」モードで「プロフィールカスタマイズ用」の記事を作り、作成したプロフィール用画像をドラッグ&ドロップして貼り付け。

※画像の作り方>>ブログのロゴやヘッダー画像を無料で作る方法! - 飛人のサイト工房

 

・画像の横幅をドラッグ&ドロップで300pxに調整(サイドバーの横幅が300pxなので)

・画像に「about」ページへのリンクを貼る

  • 画像を選択
  • 「リンクを挿入」で「aboutページ(プロフィールページ)」へのリンクを貼る

手順2.ツイッターのタイムラインをサイドバーに流す

・ツイッターのPublishページに行って、自分のツイッターのアドレスを入力。

Twitter Publish

 

・パブリッシュのディスプレイ設定をタイムラインにする。

・生成されたHTMLコードをコピーする

・手順1.で作った「プロフィールカスタマイズ用」記事を開いて、コピーしたHTMLを張り付ける。

手順3.「ブログの説明」欄にHTMLを貼り付けます。

・「プロフィールカスタマイズ用」記事のHTMLを全てコピーし、「ブログの説明」欄にHTMLを貼り付けます。

 

 

・「適用」して「変更を保存」します。

 

・完成!

これが・・・

 

こうなります。

 

あとがき

ということで、HTMLでプロフィールをカスタマイズする時は

  1. 新規に見たままモードで記事を書く
  2. 書いた記事のHTMLをプロフィールの「ブログの説明」欄に張り付ける

で、簡単にカスタマイズできました!