プロフィールをオシャレにしてみました
スポンサーリンク
他サイトとの差別化を図る
すでにサイドバーに露出させて結構経ちますが、ウィジェットエリアのプロフィールを刷新いたしました。
オシャレすぎな個人プロフィールカード！ コピペで簡単実装 【 HTML/CSS 】 – デシノン
↑で、とってもオサレなプロフィールカードを見かけまして、実装しようと考えました。
こういったプロフィールデザインは、検索すればたくさんヒットするので、ご自分の趣向に合ったものを選ぶのが良いかと。
プロフィールのタグをローカル環境で構築
HTMLファイルを作成
まずはローカル内でHTMLファイルを作成します。
メモ帳でも良いのでファイルを新規作成→そこにタグをコピペ。
このファイルは、構成を整えて拡張子を「.html」にすればHTMLファイルとして問題なく認識されます。
※HTMLファイルの作成については後日記事を書く予定。既出でしょうし大した記事にもならなさそうなのですが……。
CSSファイルを作成
次に空のCSSファイルを作成し、CSSをコピペします。
CSSファイルはテキストエディタで編集しました。
ワタクシが愛用しているのはTeraPad。
無料で使えますしシンプルでお気に入りです。
作成したファイルを各自編集
ファイルを作成した後はHTMLファイルを編集していきます。
ヘッダー内でCSSファイルを定義し、あとはそちらで微調整していきます。
作成したコードをWordpressへ
HTMLファイルはウィジェットのカスタムHTMLにコピペ、CSSファイルはご使用のテーマにあるCSSファイル（style.cssといった）の中にコピペします。
CSSファイルをいじったことのない方であれば管理画面のダッシュボードから外観→テーマ→テーマエディター→スタイルシートと移動していき、そちらにコードを追加します。
使用中のテーマ内において、既存のセレクタが今回追加するCSSのセレクタとかぶらないよう注意しましょう。
カスタマイズは自己責任でお願いいたします。
コードをカスタマイズして自サイトに溶け込ませる
もともとのサンプルコードではブルー系だったのですが、当ウェブログのデザインコンセプトはチョコミント（のはず）ですので、テーマに沿った色合いに変更いたしました。
CSSの知識が乏しいため調整がかなり大変でしたが、どうにか形に。
私自身、個人レベルで何か紹介できるような情報があまりないので、やったところでという感じは払拭しきれませんけれども、やりきったという達成感が味わえました（笑）。
他サイトとの差別化も図ることができ、個人的には満足(´ω`)
それにしてもいい加減、何か新しい絵を描かねばなりませんね…。
何年前の画像使っているんだか（苦笑）
指の関節がまだ痛いのでリハビリからになるでしょうけれど。
サンプルから引っ張ってくるだけなら意外と簡単
一見手間がかかるように感じますが、実は作成した空のファイルにサンプルコードをコピペするだけですから、デザインにこだわりがなければサクっと作ることができます。
独自プロフィールが標準搭載ならそちらを
お手持ちのWordpressテーマにプロフィールのウィジェットが搭載されていればこうした作業はカットできて、記事に集中できますね。
ですが何というか、自分色に染めるというのもまた楽しみだったり。
そうはいってもオリジナルテーマになりまして、そういった機能はつけていませんので、前もって作成しておいて良かったかなと思います。
記事下のプロフィールはいらないかな。
このウェブログは今後も自分1人で運営する予定ですし、自己紹介するほどの実績もございませんのでー…(´ω`;)
記事を書くより、デザインをいじくる方が好きなのかも知れない。
昨今、そのように感じるトヲル（@yorealog）でした。
