コピペでできる!プラグインを使わずにプロフィールをサイドバーに作る方法!

以前はAbout Me 3000というWordPressのプラグインを使用して、プロフィールを表示していたんですが、プロフィールページを更新したついでに『HTML』と『CSS』だけで作成してみました!

コピペでできるようにHTMLも載せておくので、自己紹介の文だけ、自分のものに書き換えて使ってくださいね!

HTMLとCSSはWordPress以外(無料ブログなどで)でも使えると思いますが、今回はWordPressのウィジェットを使うので、WordPress以外の方はHTMLを挿入する場所が違うので注意してください!

設定

はじめにWordPressのダッシュボードを開き、「外観」>「ウィジェット」を開いてください。

次に「テキスト」をサイドバーにドラッグします。

(サイドバーじゃなくてもいいですが今回はサイドバーに挿入する前提で紹介します。)

そしてタイトルの部分にサイドバーで表示したい名前を、内容の部分に以下のコードをコピペしてください。

<center><img src="#" align="center" width="220" height="210"></center>

<p>初めまして、Salt(ソルト)といいます。</p>
<p>歌うこと/食べ歩き/カメラ/ブログ/猫 などが好き。</p>
<p>ニコニコ動画に歌ってみた動画を投稿したり、Tweetcastingというサイトを使用し、生放送で歌っています。</p>

コードをコピペしたら、「#」の部分を『画像のURL』をコピペし、3から5行目の『紹介文』を自分のものに書き換えたら、右下の保存をクリックして完了です!

pタグ(段落)やbrタグ(改行)はお好みで付けてください。

画像のURLは以下の手順で確認してください。

画像のURLを確認する

画像のURLを確認するにはサーバーに画像をアップロードする必要があります。

1.アップロードするにはダッシュボードを開き「メディア」>「新規追加」を選択し、「ファイルを選択する」または「アップロードしたい画像をドラッグアンドドロップ」します。

2.画像をアップロードすることができたら「メディア」>「ライブラリ」からアップロードした画像(プロフィールに使用する画像)を選択します。

画像の詳細が表示されたら右上の「URL」をコピーします。

使用する画像のアップロードが済んでいる方は二つ目の手順からどうぞ。

詳しいプロフィールのリンクを貼る

固定ページや記事としてプロフィールを作成している方でプロフィール欄に『詳しいプロフィールはこちら』みたいなボタンを追加したい方向けに、コピペでできるようにHTMLを置いておくので参考にしてみて下さいね!

先ほどのコードに以下のHTMLを追加して「#」の部分をプロフィールの記事のURLに変更してください。

<center><a class="button" href="http://saltlog.biz/about/">プロフィール詳細はこちら</a></center>

そして最後に、このままでは見た目が崩れているので以下のCSSを追加したら完成です。

.button {
	display: inline-block;
	width: 300px;
	height: 45px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	outline: none;
        margin: 0px 0px 10px 0px;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}



.button {
	background-color: #fff;
	color: #313131;
}
.button:hover {
	background-color: #DCDCDC;
        color: #313131;
}

完成系がこちらです。
サイトに合わせて色や見た目などを変更したい方は先ほどのCSSを調整してください。

まとめ

詳しいプロフィールのリンクボタンは必要ないよって言う方はコピペだけで導入することができるので(紹介文や画像のURLは変えます)オススメですよ!

詳しいプロフィールのリンクも簡単な調整で済むと思うので、よかったら試してみてくださいね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です