はてなブログのスマホ版にもともとついているプロフィールを非表示にして自分で設定する方法
スマホで見るブログのプロフィールをカスタマイズしてもっと見やすくしたい！
ということで、基本的にコピペでできるコードを探し出し、そこからアレンジしてみました。
- プロフィールの完成イメージ図
- 参考にしたサイト
- 手順① はてなブログにもともと設定してあるプロフィール欄を非表示にする
- 手順② 新たにオリジナルのプロフィールを設置するコードを挿入
- プロフィール写真が真ん中に表示されない問題
- プロフィールをデザートボックスで囲ってみる
- ブログをカスタマイズができるとやっぱり嬉しい！愛着がわく！
プロフィールの完成イメージ図
何も触らなくてもはてなブログで設定されているプロフィールはこんな感じですよね。
自己紹介を全く書いていないのは、プロフィールに書いた文章が何故かブログタイトルすぐ下にもデザイン関係なく表示されてしまうので、訳が分からなくて何も書いていませんでした。
そして新しく表示させたプロフィールがこちら！
このように表示させるまでに数時間試行錯誤して出来上がったので、忘備録を兼ねて手順を残したいと思います。
プロフィール画像が真ん中に表示され、詳しい自己紹介へのリンクもうまく貼り付けられて、出来上がった時には思わず小さく叫び拍手しました(真夜中)。
カスタマイズは基本的に全てコピペ一発で終わるものを選んでいますが、今回は複数のサイトのものを付け加えて完成させました。
参考にしたサイト
今回のカスタマイズに必要なコードを参考にさせていただいたブログはこちら。
でででーさんのサイトです。
コピペ一発ではないものの、コードを少し触るだけでオリジナルのプロフィールができあがります。
おおまかな手順としてはこちらのサイトにも書いてある通り、もともと設定されているプロフィールを消すコードを入れてから、新しいプロフィールのコードを挿入です。
では早速具体的にいきますよ！
手順① はてなブログにもともと設定してあるプロフィール欄を非表示にする
まず、この画像のコードを貼り付けます。
場所ははてなブログ管理画面から、【デザイン】→【スマートフォン】→【ヘッダ】→【タイトル下】
でででーさんのブログではこのコードが直接コピペ出来るように表示されています。
コードをはりつけて【保存を変更する】ボタンを押す前に、【記事プレビュー】を押してプロフィールが消えたことを確認します。
しっかりと確認したら【保存を変更する】を押します。
これでツイッターフォローボタンのすぐ下にあったプロフィールが消えました。
手順② 新たにオリジナルのプロフィールを設置するコードを挿入
新たなオリジナルプロフィールのためのコードを挿入します。
でででーさんのブログ内の【3.詳細なプロフィールを新たに設置する】にコピペで使えるサンプルコードがのっているので、一旦メモ帳などに貼り付けます。
そして、「自分のブログURL」や「はてなID」など必要な部分を自分のものに書き換えてからコードを貼り付けます。
貼り付け場所は、はてなブログの管理画面から【デザイン】→【スマホ】→【フッタ】→【ページャ下】
これで新たにオリジナルのプロフィールが表示されるはずです。
プロフィール写真が真ん中に表示されない問題
と、ここまで、でででーさんのブログに書いてある通りにやったのになぜかプロフィール画像が左寄せになってしまったので、 アドセンス広告の配置【中央寄せ】は基本中の基本！簡単に設定する方法 で学んだアドセンス広告を中央寄せにするコードで画像ＵＲＬを挟んでみました。
(自分のアドセンスコード)の部分に<a href=“自分のブログＵＲＬ”から</a>までを入れてくださいね。
これでプロフィール画像は中央寄せで表示されました！
実は画像左寄せ問題の前に、プロフィールに使いたい画像のサイズ調整に苦労しました。
写真や画像を自分で調整しても、恐らくはてなブログでは全ての写真が自動でサイズ調整をされてしまうようで、この問題解決にたどり着くまで2時間以上かかりました。
画像のサイズに納得してから中央寄せのコードを思いついた時は自分成長してる！と実感し思わず拍手（真夜中）
プロフィールをデザートボックスで囲ってみる
見事に画像を中央寄せにするコードが反映されたので、他のコードも反映されるかな？と思い、サルワカさんの【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30で囲みデザインのコードを選んでプロフィールを囲ってみることに。
先ほど挿入したコードをまるっとこのコードではさみむことでプロフィールに枠がつきます。
BEFORE▼
AFTER▼
色付きボックスなしの白いほうがすっきりしているかなぁと思いましたが、コードが反映されたことがめちゃくちゃ嬉しくてつけちゃいました。
また、サルワカさんのボックスデザインは色々あるのですが、何故か自分のブログに反映されるデザインとされないデザインがあり、このボックスならきちんと表示されたので選んだという経緯があります。←よくわからないけれど素人あるある
CSSコードやHTMLは難しいですね。
ブログをカスタマイズができるとやっぱり嬉しい！愛着がわく！
カスタマイズはコピペでよいと書いてあっても他のデザインとの相性でうまくいかなかったり、かなり集中力がいるので夜中に静かに一人で戦っています。
悩んだ分カスタマイズがうまくいくと素人なりにも自分の発想に成長を感じたり、ブログに愛着もわいてきます。
まだまだ触りたいところはたくさんありますがプロフィールをオリジナルで設定したことでまた一つ前に進めた実感があります。
大人になってから成長を感じられるのも嬉しいもの、ブログの良さですよね^ ^
これからカスタマイズの苦労も書き残していきたいと思います！
