humangas's blog

自分用のメモなので雑です。

はてなブログにSNSアイコンでプロフィールをつくる

タイトル分かりにくいけど、要はこういうこと。サイドバーをなるべくシンプルにしたかったため。

f:id:Humangas:20170909081542p:plain

やりかたの流れ

  1. SNSsvgファイルを手に入れる
  2. それをどっかのサイトに置く(Publicアクセスできる場所)
  3. サイドバーでHTMLを編集して終わり

SNSsvgファイルを手に入れる

適当に画像検索なりすると出て来る。公式に配られている場合もある。

それをどっかのサイトに置く

Cloudupが便利かも

使い方は超簡単で、アカウント作成 -> D&DでファイルをUPするだけ

画像以外のファイルも何でも良い。https://cloudup.com の動画を見てみると利用イメージがよく分かる。

UPしたファイルを選択し右上の MORE > DIRECT URL をクリックすると 直リンクURLが得られるので、それを使う

サイドバーでHTMLを編集して終わり

  1. 自分のはてなブログの管理画面で、デザイン > カスタマイズ を選択
  2. サイドバー > モジュール追加 してHTMLを選択
  3. タイトルは未入力にして以下を貼って終わり
<p style="margin:0px 0px; text-align:left">

<a href="https://github.com/humangas" target="_blank"><img  src="https://cldup.com/XXX.svg" width="35" height="35" alt="GitHub"></a>

<span style="margin-right: 5px;"></span>

<a href="https://gist.github.com/humangas" target="_blank"><img  src="https://cldup.com/XXX.svg" width="35" height="35" alt="Gist"></a>

<span style="margin-right: 5px;"></span>

<a href="https://twitter.com/humangas_" target="_blank"><img  src="https://cldup.com/XXX.svg" width="35" height="35" alt="Twitter"></a>

</p>

XXXX.svg のところがさっき手に入れた直リンク

見た目の修正は適当にCSSやらで調整すればいい

(※上のmarginは意味ないが後で調整するかもしれないので、そのままmargin: 0px 0px で置いてあるだけ)