【Cocoon】プロフィールにSNSボタンを追加してみた!

つぶやき

※ 当ブログはアフィリエイト広告を利用しています

 

※ 当ブログはアフィリエイト広告を利用しています

 

 

本日はブログのデザインに関するお話です。

 

ずっと頭の中でイメージしていたカスタマイズを形にすることができて、心のモヤモヤが一つだけクリアになりました。

 

 

形にできたカスタマイズとは、

プロフィールのSNSアイコン

 

デフォルトに存在しないSTUDYing用のアイコンを追加することができました!

 

 

ボクと同じようにデフォルトに存在しないSNSアイコンを設置したい方に向けて、記事を書かせていただきます(*’▽’*)

 

 

背景情報

ボクが利用しているデザインテーマ「Cocoon」では、「ユーザー > プロフィール」中の連絡先情報にSNSのULRを入力するだけでプロフィールボックス内に、SNSリンク用のアイコンを設置することができます。

 

しかし、(当たり前ですが)全てのSNSがカバーされているわけではありません。

 

ボクが利用しているSTUDYingのように利用者の限られるSNSだと、アイコンを表示せることができず、数年に渡りモヤモヤ…

 

そこで、

CSSを駆使して、どうにかこうにかSTUDYing用のアイコンを設置する方法がないか、試行錯誤していました。

 

 

参考情報

カスタマイズにあたって参考にさせていただいた記事はこちら、宙也さんの記事です。

 

こちらの記事では、

「GitHubのアイコン→Pixivのアイコン」に変更するコードを公開してくれているので、

これをベースに、

「GitHubのアイコン→STUDYing用のアイコン」へのカスタマイズを試みました。

 

 

① アイコンの作製

アイコンの作成

まずはSTUDYing用のアイコンを作成

 

ボクが使用したのはVectr

無料のアカウントを作成するだけで、Webブラウザ上でデザインを作成することができました!

 

ですが、、、

デザインが完成してから、SVG形式のダウンロードは無料版で対応していないことが発覚‼︎

 

そこで、無料のJPEG形式でダウンロードをしたあと、AdobeにてJPEG→SVGに変換しました。

 

カスタマイズ

続いて、SVGのカスタマイズ。

このままブログに挿入すると背景部分が白くなってしまうので、事前に透明化の加工が必要です。

 

SVGファイルをメモ帳で開き、「fill=“カラーコード”‘」と書かれている部位を「fill=“none”」と修正して上書き保存。

 

これにより、‘カラーコード’で指定されていた部分が背景透過になります。

 

ボクの場合は青色ハイライトの二か所を「none」に変更することで、イメージ通りの画像に加工できました。

 

変換

SVGファイルをCSSへ挿入するには、ファイル形式を「Data URI Scheme」に変換する必要があるようです。

ボクはクロクロ・ツールズさんを利用させていただきました。

 

以上、挿入画像の準備は完了です。

 

 

② ブログに埋め込み

コードの挿入

いよいよCSSにコードを挿入していきましょう。

宙也さんの記事を参考に「GitHubのアイコン→Pixivのアイコン」へ変更

 

画像の挿入

style.cssに追加したコードのうち、以下の青色の部分に「①アイコンの作製」で準備したコードを挿入

mask-image: url(‘画像のコード‘)

 

色の調整

宙也さんのコードでは、背景部分が水色になっているので、適宜、色を調整しましょう。

以下、赤色のコードを任意のカラーコードに変更

background-color: #0096FA;

 

SNSアイコン自体の色を変える場合は以下のコードを追加してください(青字は任意のカラーコード)

.author-box .sns-follow-buttons a.github-button{
background-color:#0096FA;
}
.author-box .sns-follow-buttons a.github-button:hover {
background-color:#0096FA;
}

 

大きさの調整

アイコンの大きさを調整しましょう。

宙也さんのコードから、以下赤色の数字を変更。

height: 1em;

width: 1em;

ぺぎんとん
ぺぎんとん

ボクは1.4でしっくり

 

位置調整

アイコンの位置がズレているようでしたら、以下のコードを挿入しましょう。

.icon-github-logo:before {
transform: translate(12%, -3%);
}

イメージ通りの位置にくるまで、青字の箇所を調整してください!

 

まとめ

1. 画像の作製

  • Vectrで画像を作成(JPEGで出力)
  • AdobeでSVG形式に変換
  • SVGをメモ帳で開いて加工
  • Data URIスキームに変換

 

2. ブログへの埋め込み

  • 宙也さんの記事通り、「GitHubアイコン→Pixivアイコン」へ変更
  • 画像の挿入
  • アイコンの色調整
  • アイコンの大きさ調整
  • アイコンの位置調整

Comment

タイトルとURLをコピーしました