ひきぶろ。

睡眠障害からの社会復帰を目指す、引きこもり(自宅療養)の実態を大公開!

aboutページが編集できるようになったので早速いじってみた

staff.hatenablog.com

前々から気になっていた「about」のページ(このブログだとhttp://hikiblo.hateblo.jp/about)に関して、一部ではありますが拡張性が上がったそうです。

これで今までサイドバー(パソコンでこのブログを見た時に右側に表示されるあれこれ)に長々と表示させてきた、アドセンスとAmazonアソシエイトのプライバシーポリシーであったり、ブログの簡単な紹介をもっとコテコテの濃い内容に書き換えたりすることができますね。笑

 

せっかくなので色々と編集したついでに、ちょっとした小技?も共有できればと思います。

とは言っても、Web系に詳しい方々にとっては初歩中の初歩かもしれませんが・・・

 

 

「自由記述欄」にひたすら詰め込む

実際のaboutページをご覧いただければ一目瞭然ですが、調子にのってあれやこれやと詰め込みすぎました。苦笑

今まではユーザー名・ブログ投稿数・ブログ日数・継続期間・読者だけが機械的に並ぶ味気ないページでしたから、せっかく自由記事欄が新設されたことですし・・・ね。

 

ただここでソースコードと睨めっこしながら、ちょっとだけ意識的に書いた部分があります。

 

スタイルを統一する

元々の「ブログ投稿数」だの「ブログ日数」の部分。

f:id:futo-c:20160907232101j:plain

ソースコードを見るまでは、例えばこの画像の範囲だと「ブログ投稿数」「ブログ日数」はstrongタグで囲まれていて、その下にhrタグで水平線を入れ、237記事だの229日だのといった部分は普通にpタグで実装されているのだろう、とテキトーに考えていました。

 

ですが実際に自分で書いてみると微妙に合わない。

水平線の上下に余白が空きすぎるし、次の項目との境界(画像でいう「237記事」と「ブログ日数」の間の余白)はbrタグでも入れないとこんなに綺麗に1行分は空かない。

 

さすがに気になってソースコードを覗いてみた結果。

f:id:futo-c:20160907232807j:plain

dlタグでこの見た目を実装していたのか!

 

というわけで、普段のブログ記事におけるh3要素やh4要素を使う感覚で、既存のスタイルに従ってdlタグで見出しを付けました。

f:id:futo-c:20160907233304j:plain

カラクリが判明すれば簡単ね!

 

順番を入れ替える

一応公式からの案内として、

※項目の表示順を並び替えることはできません。

このような但し書きが存在します。

 

でもそんなの関係ねぇ!

元々の並び順のままだと、

  • 自由記述欄がまず最初にきて
  • 次にプロフィールが表示されて
  • 以下略

つまりいくら「自由」だからといって、自由記述欄にバカみたいに詰め込むとプロフィールがものすごーく下の方へ追いやられてしまいます。

なんとなくそれが嫌だったので、プロフィールを自由記述欄の中へ強引に入れ込むことにしました。笑

 

プロフィール項目の移動?方法

まずは自分のaboutページを表示させて、右クリック→ページのソースを表示でソースコードを確認できる状態にしておきます。

続いてそのソースコードの中から、次のコードを頑張って見つけてください。苦笑

f:id:futo-c:20160907235040j:plain

リンク先は人によって異なりますが、概ねこのようなコードがどこかにあるはずです。

本当はもっと入れ子構造が分かりやすいように、冒頭にスペースがたくさん入っていたのですが邪魔なので消しちゃいました。苦笑

とにもかくにも、この部分を後々コピペすることになるのでどうにかして見つけておいてください。

 

その上で「設定」ページに新設されたaboutページ編集の中の、プロフィールの項目にあるチェックボックスを全てブランクにします。

f:id:futo-c:20160907234224j:plain

ふとしの場合はFacebookがないので、ユーザー名とツイッターのフォローボタンの2つでしたが、この辺はそれぞれ連携の有無によって変わりますので外せるチェックは全部外す!

これにより、aboutページから一時的にプロフィールが消えました。

はい、あなたは今この瞬間から名無しの権兵衛!

 

続いて自由記述欄の中で、本来プロフィールを入れたい位置に、先ほどどうにかして見つけておいたソースコードをコピペします。

説明が下手なのでうまく伝わったかどうかわかりませんが、うまくいっていれば自由記述欄の中に元々プロフィールの項目欄で表示されていた「アイコン+名前(id:~)+はてなブログPROの人はPROの白抜き文字」の3点セットが復活します。

めでたしめでたし~。

 

まとめ

今までであればこういうちょっと詳しいプロフィールページを作成するために1つ記事をこしらえる必要がありましたが、今回の編集機能実装によって元のaboutページを使いまわせるようになりました。

画像とかに関しても、はてなフォトライフにアップロードしている画像であったり、直リンクが禁止されていなければたとえばDropboxの公開ファイルを引っ張ってくることもたぶんできると思いますので、それらを組み合わせれば更に見栄えの良いaboutページを作れると思います。

hikiblo.hateblo.jp

 

とりあえずこんな感じ!

いかがでしょうか?!

PR