ブログ用プロフィール作成
HTML / CSS生成
1. 基本設定
名前サイズ：
px
自由テキスト：
px
2. SNS設定
3. 自己紹介・見出し
本文サイズ：
px
見出しサイズ：
px
詳細本文サイズ：
px
4. カラー詳細設定
Preview
5. 生成されたコード
コピーしました。
目次
仕様解説
入力内容をもとに、ブログ用プロフィールのHTMLとCSSを生成するツールです。
名前、自由テキスト、SNSリンク、自己紹介文、見出し、色設定を入力すると、プレビューを見ながらプロフィール表示を調整できます。
SNSアイコンにはBootstrap Icons由来のSVGパスを使用しています。Font Awesomeなどの外部フォントライブラリや、追加プラグインに依存しないプロフィールコードを生成できます。
主な機能
- プロフィールHTML/CSSの生成：入力した内容をもとに、ブログへ貼り付けられるHTMLとCSSを生成します。
- SNSアイコン対応：X、Bluesky、Instagram、YouTube、お問い合わせ、RSSのアイコンをプロフィール内に表示できます。
- 色と文字サイズの調整：名前、説明文、見出し、本文、アイコン色などをプレビューしながら変更できます。
生成されるプロフィールコードは、横幅を固定していません。設置する場所の幅に合わせて表示されるため、本文内、サイドバー、ウィジェットエリアなど、貼り付け先によって見た目が変わります。
表示が窮屈に見える場合は、設置場所の横幅や余白、生成されたCSSのpaddingなどを調整してください。
使い方
- 各項目を入力：名前、SNSのURL、自己紹介文、色などを入力します。
- プレビューで確認：右側のプレビューを見ながら、表示内容や色を調整します。
- コピーして貼り付け：生成されたHTMLとCSSをコピーし、ブログの表示したい場所に貼り付けます。
よくある質問（FAQ）
Q. どんなブログでも使えますか？
A. HTMLとCSSを貼り付けられるブログ環境で利用できます。SNSアイコンはBootstrap Icons由来のSVGパスを使って表示します。ブログサービスやテーマ側でHTML、CSS、SVGの使用が制限されている場合は、表示が変わることがあります。
ログイン不要、登録不要、無料で使えます。。