音楽の楽しさを共有したいブログ

音楽の楽しさを共有したいブログ

作曲、ドラム演奏動画の投稿、そしてブログに手を出した人の雑記です

【はてなブログ】aboutページって何?aboutページをリニューアルした結果

以前の記事で、aboutページについて少しだけ触れました。

 

onngaku-shumi.hatenadiary.jp

 

aboutページとは、

aboutページ ブログのサイドバーに表示されるプロフィールでIDやプロフィール画像をクリックすると、ブログごとのaboutページに移動できます。aboutページでは、ブログに関する情報が表示されています。

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

といったもので、要するにブログの紹介ページです。

 

そこで、オークニさんの記事を見ながら、

オークニさんのaboutページ素敵っす!私も同じ感じにしたいっす!なんなら私もオークニっす!!!

という感情がぶちまけたので真似しました(笑)

 

 

ビフォーアフター

ビフォー

f:id:chi_hama:20181217193731j:plain

 

アフター(未完成)

f:id:chi_hama:20181217215356j:plain

f:id:chi_hama:20181217215420j:plain

f:id:chi_hama:20181217215447j:plain

 

【2018年11月3日 追記】

aboutページ完成しました。

 

実際のaboutページがこちら

onngaku-shumi.hatenadiary.jp

 

リニューアル手順

「私もオークニさんになりたい」という方のために、順を追って説明します。

 

  1. オークニさんの記事に飛ぶ
  2. オークニ的aboutページテンプレート→HTMLのコードを開き、コードをパクる
  3. 注意点に従いコードの中身を自分用に編集する
  4. 「headに要素を追加」に半月さんの記事のコードを張り付ける(重要)
  5. テンプレ完成!必要事項を入力して終了

 

1.オークニさんの記事に飛ぶ

【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ! - オークニズム

上のリンクをクリック。

 

2.オークニ的aboutページテンプレート→HTMLのコードを開き、コードをパクる

オークニさんの記事の内容をよく読みながら、パクっちゃってください。

 

HTML編集

[設定]→[基本設定]→[aboutページ編集]をクリックします。

オークニさんの記事から、1~58行目をコピー。

 

f:id:chi_hama:20181217215541j:plain

「自由記述欄」に貼り付けます。

 

一番下の「変更する」をクリック。

これでHTMLの編集は一旦完了です。

 

デザインCSS編集

次に、デザインCSSを編集します。

[デザイン]→[スパナマーク]→[デザインCSS]をクリック。


オークニさんの記事から、61~251行目をコピー。

 

 

f:id:chi_hama:20181217220259j:plain

デザインCSS枠内が空欄の方は、そのまま張り付け。

既に編集済みの方は、一番下に行を追加し、貼り付けます。

 

「変更を保存する」をクリックし、CSS編集は完了です。

 

3.注意点に従いHTMLコードの中身を自分用に編集する

注意点はオークニさんの記事のHTMLコードのすぐ下に書かれてあります。

 

4.「headに要素を追加」に半月さんの記事のコードを張り付ける(重要)

1~3までやれば終わりだ~って最初思ってたんですよ。

しかしながら、この時点でのaboutページを見てみると・・・

 

f:id:chi_hama:20181217220356j:plain

 

f:id:chi_hama:20181217220413j:plain

なんで!?!?

せっかくおしゃれデビューできると思ったのに!!!

 

ここから長期戦でした。

 

必死に調べまくって、やっとたどり着いたのがこの記事です。

moonnote.hateblo.jp

 

これだ!!!

↑の記事を開き、「使用する前に」のすぐ下にあるコードをコピー。

 

f:id:chi_hama:20181217220500j:plain
[設定]→[詳細設定]を開き、下までスクロールすると「headに要素を追加」という項目があります。

 

 

f:id:chi_hama:20181217220628j:plain

そこに先ほどコピーしたコードを貼り付けます。

 

デザインCSS枠内が空欄の方は、そのまま張り付け。

写真のように既に編集済みの方は、一番下に行を追加し、貼り付けます。

 

一番下の「変更する」をクリックします。

 

5.テンプレ完成!必要事項を入力して終了

4の作業をすると、先ほどのアイコン非表示や文字化けが解決します。

 

f:id:chi_hama:20181217220826j:plain

 

f:id:chi_hama:20181217220843j:plain

ここまでこれば、あとはHTML内の見出しを変更して、編集完了です!

おつかれさまでした!

 

最後に

いや~、めっちゃ疲れました・・・。

aboutページの編集だけでも時間かかったのに、それをブログ記事にしてたらとんでもなく時間がかかってしまいました(笑)

 

どうか、この記事が誰かの役に立つことを願っております。