何だっけ?ブログ

「あれって何だっけ?」と思ったことを詰め込んでおります。

②【フリー画像有】はてなブログの『プロフィール』をカスタマイズ

次はデフォルトの通常のプロフィール設定ではなく、カスタマイズで大きなプロフィール画像にしていきます。

下の画像をご覧下さい。

 

f:id:Rmade:20180525164937p:plain

通常時とカスタマイズ時で全然大きさが違うっ!

通常のプロフィール設定では画像の大きさを変えることが出来ないみたいです(>_<;)

ではさっそくカスタマイズしていきましょう。

通常のプロフィールを表示しない設定をする

「なんで?」

とお思いでしょう。私も思いました(笑)

カスタマイズする部分は別の場所になるので二重表示を防ぐ為です。

(不安な方はカスタマイズ後にこの設定をされてもいいと思います)

ブログ管理画面からデザイン→カスタマイズ→サイドバー→プロフィールの部分の削除を押します。(削除するので文章など入力している方はコピーしてメモ帳にでも保存しておいたら安心ですね)

 

必ず設定を変更するボタンを押してくださいね。

これでデフォルトのプロフィール部分は消えました。

 

プロフィールをカスタマイズ

ここから本題です。

画像を用意しておいて下さいね。

(画像の幅が300px以上の方は300pxでおさまるように調整するHTMLを使っています)

何も画像がない方は下にあるナンが作ったフリー画像を使ってみてください。(こんな落書きなクオリティーですみません(>_<))

 

フリー画像です。どうぞご自由にお使いください。

プロフィール以外では使わないでね

※保存は画像の上で右クリック→「名前を付けて画像を保存」を選択。保存場所は覚えやすいところにでも入れておいてくださいね。

f:id:Rmade:20180525155331p:plain

●画像サイズは300px × 300px ゆる~いくまさんです。

 

f:id:Rmade:20180525155750p:plain

●画像サイズは300px × 300px ゆる~いねこさんです。

 

f:id:Rmade:20180525155826p:plain

●画像サイズは300px × 300px ゆる~いうさぎさんです。

 

では画像が用意できたところで、プロフィール用のHTMLを作っていきます。

HTMLといっても一から作る必要はありません。知識もほとんどいりません!

 

下書きからHTMLをコピペ!

みなさんがはてなブログの記事を書く時のように「記事を書く」ボタンを押して下書きしていきます。

●「編集見たまま」タブでプロフィールにしたい画像を画面右上の「+写真を投稿」を押して選んで挿入します。

f:id:Rmade:20180529131439p:plain

次に画像の幅を300pxに調整するHTMLを入れていきます。

 

●現在の「編集見たまま」タブから、となりの「HTML編集」タブをクリック。

●HTMLが <p><img class="hatena-fotolife" title=ホニャラララ~といろいろ表示されていますが、初めの「  <p><img class="hatena-fotolife"◆ 」この部分の◆の部分に下のHTMLをコピペしてください。

 

コピペ→   style="width: 100%; height: auto; max-width: 300px;"

 

●「HTML編集」タブから「編集見たまま」タブに戻り、画像の下に「名前」「自己紹介」を上の画像の横幅に収まるように適度に改行して入力します。

f:id:Rmade:20180529132807p:plain

●現在の「編集見たまま」タブから、となりの「HTML編集」タブをクリック。

そこに文字やアルファベットがズラッと並んでいるのですべて選択してコピーします。(これがHTMLになります。)

●画面左下の「下書き保存する」をクリックしていったん記事を書くを終了しておきます。

これでHTMLのコピーは出来ました。

次はペースト(貼り付け)作業です。

サイドバーにペースト

ブログ管理画面からデザイン→カスタマイズ→サイドバー→「+モジュールを追加」をクリックしてください。

f:id:Rmade:20180529135332p:plain

ウィンドウが開くので、①左画面を下にスクロールし「HTML」を選択

②タイトルにはプロフィール、profileなどわかりやすい文字を入れて、③その下の大きい四角内に先ほどコピーしたHTMLをペーストします。

ペーストしたら左下の「適用」ボタンを必ず押してくださいね。

その後管理画面左上の「変更を保存する」ボタンも押し忘れないようにしてください。

 ブログを確認しよう

ご自分のブログを開いてみてサイドバー部分にプロフィールがあるか確認してくださいね。

今回は大きい画像でも横幅が300pxになるHTMLを使いました。

もっと横幅を大きくしたい場合は

style="width: 100%; height: auto; max-width: 300px;" ←300の値を500など任意の数字に変えると変更されます。

ブログのレイアウトに合うように微調整してみてもいいですね。