コンパクト・折り畳み・最小限大好きミニマルもどきサラリーマン 趣味を最小限の道具で楽しむ効率的な生活を目指して、シェアします

【Vaster2備忘録】Bloggerでそれっぽいプロフィール作る方法 初心者用

タロウです

ブログの再カスタマイズのための、カスタマイズをメモします。このブログくらいのカスタマイズなら僕のような初心者でもコピペで何とかなるので、同じような人がブログを作るときに参考になればな、と思って書いていきます。

僕も再整備をしたりするときにしばらくいじってないと、どうやって整備したか完全に忘れるので、備忘録的にも使える。

Bloggerって基本的に日本ではそんなにメジャーなサービスではないし、拡張機能も全然親切ではない。javaScriptとかなんやそれ、みたいなレベルなので、自分でアウトプットしながら勉強していければいいなあと思います。

というわけで今回はプロフィールの作り方です。

このブログのプロフィール

こんな感じです。

至って普通ですが、それでも最初は大変やった。

まずはレイアウトでイメージガジェットを配置

Bloggerの設定画面から「レイアウト」を選んで → sidebar-sectionの中で「ガジェットを追加」を選択

「基本情報」というウィジェットを使用する方法もありますが、Googleアカウント準拠のプロフィールになってしまうので、あとで出てくるTwitterなどのリンクを入れずらいというデメリットがあるので却下。

ウィジェットを作ったら内部をいじろう

①タイトルを決める

ブログで表示されるときのサブタイトルです。特にこだわりがなければ「PROFILE」でいいのではないでしょうか。

こだわりたい人は 「ABOUT ME」とか「筆者について」とか、好きなものを入れればいいんだと思います。

②説明を書く

ここに普通に文章を打ち込むとこんな感じになります。

行もなく、だらだらと文章が羅列されているだけ。これ、チョイダサですよね。

ここでやらないといけないのはいわゆるHTMLのタグを使用して改行やリンクを作成する、ということになります。

コードを使用しますので、メモ帳アプリを開いてそちらで編集することをお勧めします。

僕が使用しているテンプレート

WRITER: TAROU<br />TWITTER:<a href="https://twitter.com/taroudxw">@taroudxw</a><br />INSTAGRAM:<a href="https://www.instagram.com/taroybizbiz/?hl=ja">@taroybizbiz</a><br /><br />貿易関係やってます。<br /><br /><br />酒を浴びるの楽しい。<br /><br /><br />断捨離/効率化/イラスト/お魚/釣/美味しいもの/ガジェット/福岡<br /><br />詳細プロフィールは<a href="http://goforittarotaro.blogspot.com/p/profile.html">こちら</a><br /><br /><br /><br />

と、こんな感じ。

<br/>タグは、改行タグです。これを打つと文章が改行されます。

つまり

WRITER: 筆者の名前<br />TWITTER:<a href="Twitterアドレス">TwitteのID</a><br />INSTAGRAM:<a href="INSTAGRAMのアドレス">INSTAGRAMのID</a><br /><br />貿易関係やってます。<br /><br /><br />酒を浴びるの楽しい。<br /><br /><br />断捨離/効率化/イラスト/お魚/釣/美味しいもの/ガジェット/福岡<br /><br />詳細プロフィールは<a href="プロフィールのアドレス">こちら</a><br /><br /><br /><br />

というように上記の対応する部分をご自分のアドレスや文章に変えてもらえれば、自由自在に編集することができます。

もちろん、〈br/〉が改行だということを理解していただければ、間に入っている文章も自由に編集できます。

Bloggerのプロフィールの欄はすべて一行で表記しなくてはいけないので、一度メモ帳にコードを書き込んで、それをコピー&ペーストで張り付けるのをお勧めします。

最近はTwitterやInstagramでブログの宣伝をするのが必須のような流れがあるので、見られて問題がなければリンクを作っておけばいいと思います。

いやなら該当部分を削除すればよし。

できあがったコードを張り付け

先ほどメモ帳上で作成したコードを張り付けます。

これで保存すれば、説明がこのように反映されます。ほい。

これでOK。

③リンクを張る

ここで貼るプロフィールイメージをクリックしたときに移動するページを設定できます。

基本的にはプロフィールページを設定しておけばよいでしょう。

④イメージを決める

お好きな画像をアップロードして自分のプロフィール画像にしましょう。

僕の画像は、イフクカズヒコさんというイラストレーターさんになんかのイベントで書いていただいた物。

奥さんとツーショットのイラストですが、まあ今のところは僕だけでいいです。

完成

これでVaster2を導入していればサイドバーにプロフィールが表示されているはず。

あとは、実際に表示されているものを見ながら細かい調整やリンクがうまくいっているかを見直していけばいいと思います。

作業でやるとサクサクなんだけど、人に説明すると考えると難しいですね。

こんなのJavascriptやCSSに比べれば一瞬なので、説明してる記事もそんな無いし、逆に自分も忘れがち。

最初にブログを立ち上げるところから、やる設定をきっちり備忘録に残しておけば後から楽だなあと思いました。

では

というか、Wordpressだったら簡単に設定できるけど、こちらどうですか?↓

プロフィール
最新情報をチェックしよう!