効果は無限大!コピペでcocoonのプロフィールをカスタマイズ

ブログには記事を書いた人の名前を掲載できるプロフィール機能があります。

もちろんcocoonにもその機能がありますが、デフォルトの機能に満足していない人もいるでしょう。

そこでhtmlとcssを使って、自作のプロフィールを作ったので、コピペで設定してみてください!

今のブログはただ日記を付けるだけでなく、その記事から依頼が来ることや、ファンになってくれる可能性がかなり多くなっています。そこで役立つのがプロフィール機能。

 

多機能なcocoonにもプロフィール機能がありますが、シンプルに作られているからこそ、何か物足りないと僕は思ってしまいました。ちなみに以下の画像がその以前使っていたものです。

メガネさん
メガネさん

これだと個人的に飽きてしまったのもあり、htmlとcssの勉強をしてアウトプットをしたかったので、プロフィールを自作しちゃいました!

 

スポンサーリンク

記事が終わって表示されるプロフィールは大事!

よく目にするブログの多くは、記事の最後に簡単なプロフィールが用意されています。どんな人が書いているのか、一目見たらわかるようにするため、かなり重要な機能です。

 

面白い記事を見つけるとどんな人が書いているのか気になりますよね?それを狙ったプロフィールには、じつは以下の効果が期待できます。

メガネさん
メガネさん

今のブログのすごいところは、お金が発生してしまうところ。そのためにプロフィールは重要なので、cocoonはデフォルトでは僕は満足できない体になっていました。

 

記事を読んだ人がファンになってくれるかも

僕は今このようにブログを書いている立場ですが、その前はたくさんの人のブログを読んでいました。今でもたまに見て癒されているほど、ブログが好きな人間だったんですよね。

 

そこで1番気になってしまうのは、その記事を書いている人がどんな人なのか?このプロフィールが書かれていないと、もう1度読んでみたくなくなりました。

メガネさん
メガネさん

逆にプロフィールがしっかり書かれたブログは、なぜか愛着が沸いてしまって、別の記事も読んでみよう…。そう思うのは僕だけでしょうか?(笑)

 

でもそんな感じでプロフィールが書かれているだけでも、ファンになってくれる人はいます。

 

ブログ記事が薄い内容だったとしても、プロフィールを読んでその人がどんな人かわかれば、記事そのものに深みが出ますからね。

 

 

ちなみに今のSEOには権威性が重視されており、ファンを作ったほが検索順位も、上位に表示してくれる可能性があります。それくらいプロフィールが重要だというわけです。

 

Twitterのフォローボタンを付けておくと、検索から来た人がフォローをしてくれる可能性も出てきますよ。Twitterに関しては、過去に紹介しましたが、SEO的に重要な部分です。

 

プロフィールには必ずセットで付けておきましょう。

 

スキル次第では副業として仕事をもらえる

ファンになってもらえるだけでなく、じつは書き方によっては、法人様から依頼が来る場合もあります。

 

今ではインターネットの関心は高くなっており、ライティング案件やWeb制作の仕事が増えているそうです。

 

そこでたまたまブログを見てもらって、レベルが高い記事だ…なんて思っていただけると、それだけで仕事をもらえてしまう時代になっています。

 

まず、自分がフリーランスになってブログ経由でよく依頼が来た案件の傾向を書きます。

  • 依頼者はある程度web制作の知識があり、自分で事業を持っている人
  • 依頼者の一部はtwitterから自分を知ってブログに飛んできた可能性がある
  • デザイン・コーディング一括でやって欲しい
  • wordpressの案件が多い
  • 自分をターゲットにした案件が多い(若い女性向け、海外好きなど)

※フリーランスで稼ぐ方法まとめより引用

 

上記はWebエンジニアに関しての例ですが、その他のお仕事をしている人にも通用すると思います。

 

そのためにプロフィールを付けておくと、記事を読んだあとに連絡がスムーズにとれるので、副業としてブログをする人は試したほうがいいですよ。

 

僕も何度か依頼は来ましたが、これも連絡先が分かるようにしていたから。ブログから実績を残してしまえば、アドセンスやアフィリエイトのように、収入を増やせてしまいます。

メガネさん
メガネさん

cocoonにもプロフィールがありましたが、パッと見た感じどこを押したらいいのか、個人的にわかりにくいな…なんて思ってしまったのでカスタマイズしたわけです。

 

cocoonのデフォルトのプロフィールより自作!やり方を紹介

シンプルなデザインで好評のcocoonは、たしかにそのまま使うだけでも、おしゃれに見えてしまいます。

 

ところがカスタマイズがいやすいのも、cocoonのいいところ。無料でここまでカスタマイズできるのか…なんて思うほどクオリティが高いです。

 

そんないいところがあるのに、プロフィールも折角だからカスタマイズしたい…。無駄にそんな好奇心が僕にはあったので、かなり自作してみることにしました。

メガネさん
メガネさん

cocoonの良さを壊さないように、シンプルだけど機能的にしてみました。

 

固定ページを使って下書きにした状態で試しに作成

まず固定ページを使って、プロフィールの形を作っていきました。最終的に以下のような流れで、htmlとcssのコードを書き入れていくので、そのままいきなり書き入れてもいいでしょう。

 

  1. ウィジェット
  2. カスタムHTML

 

ところがそれだとブログを読みに来た人が、崩れてしまっている状態を見られてしまうので、個人的には誰も見られないと固定ページで作成したほうがいいと感じました。

 

僕はクラシックエディターを使っているので、「ビジュアル」ではなく、「テキスト」という機能を開くとhtmlとcssの表記が使えるようになります。

Google神
Google神

そこである程度コーディングができれば、完成する前の過程を見られる心配もない!記事下に出るプロフィールが自作できるじゃろう。

 

HTMLのコードをウィジェットのカスタムHTMLにコピペ

そして固定ページでプロフィールが完成したら、htmlやcssをコピーしておきましょう。

 

そしてそのコードををジェットという機能を開き、「投稿本文下」という項目に「カスタムHTML」を追加し、コピーしたコードを貼り付けてください

メガネさん
メガネさん

これだけでもうほとんど完成したようなもの。Google chromeの検証機能などと一緒に、しっかり表示されているかどうかを確認してね!

 

ちなみに「投稿本文下」だけでなく、サイドバーにプロフィールを作りたい人にもおすすめ。以下で紹介するコードをコピペするだけで、ちょっと変わったプロフィールが作れます。

  1. 固定ページで試しにプロフィールをhtmlとcssで作成
  2. 完成したらウィジェットを開いてカスタムHTMLを選択
  3. 投稿本文下にカスタムHTMLを投入してコードを貼り付け
  4. ちょっとだけ微調整したら完成

 

カスタムHTMLにコピペして自作プロフィールを作ろう

ではカスタムHTMLを使って投稿本文下に、プロフィールが追加できたら、ほぼ自作プロフィールは完成です。そのコードは以下になるので、カスタマイズしたい人は、是非使ってあげてくださいね。

 

<div class="writer-profile">
<p class="writer-title">この記事を書いたのは…</p>
<!--画像-->
<img class=" wp-image-2661 alignleft writer-profile-img" src="https://megane3-zakki.info/wp-content/uploads/2018/12/zibunmokao.png" alt="" width="152" height="141" />
<!--名前-->
<p class="writer-name">メガネさん</p>
<!--肩書き-->
<p class="writer-name-after">元美容師webライター</p>

<div class="writer-profile-sns">
<!--ホームボタン-->
<a href="https://html.co.jp/sekibiyou1984" class="follow-button website-button website-follow-button-sq" target="_blank" title="著者サイト" rel="nofollow noopener noreferrer"><span class="icon-home-logo"></span></a>
<!--ホームボタンend-->
<!--Twitterボタン-->
<a href="https://twitter.com/sekibiyou1984" class="follow-button twitter-button twitter-follow-button-sq" target="_blank" title="Twitterをフォロー" rel="nofollow noopener noreferrer"><span class="icon-twitter-logo"></span></a>
<!--Twitterボタンend-->
<!--feedlyボタン-->
<a href="//feedly.com/i/subscription/feed/https%3A%2F%2Fmegane3-zakki.info%2Ffeed" class="follow-button feedly-button feedly-follow-button-sq" target="blank" title="feedlyで更新情報を購読" rel="nofollow noopener noreferrer"><span class="icon-feedly-logo"></span><span class="follow-count feedly-follow-count"></span></a>
<!--feedlyボタンend-->
</div>

<p class="writer-post">元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。</p>

</div>
<style>
.writer-title{
	font-weight:normal; <!--文字の太さ-->
	font-family: YuMincho,"Yu Mincho","Hiragino Mincho ProN",HG明朝E,serif; <!--文字の種類-->
	font-size: 150%;<!--文字の大きさ-->
	text-align: left; <!--左寄せ-->
	margin: 20px 0px 30px 0px; <!--空白-->
	letter-spacing: 0.8px; <!--文字の幅-->
	border-bottom: solid 1px #1E73BF; <!--下線の色-->
}
.writer-profile-left{
	margin:0 auto; <!--空白-->
}
.writer-profile-img{
	box-shadow: none !important; <!--影を解除-->
}
.writer-name{
	font-weight:bold; <!--文字の太さ-->
	font-size: 30px; <!--文字の大きさ-->
	margin:0; <!--空白-->
	font-family: YuMincho,"Yu Mincho","Hiragino Mincho ProN",HG明朝E,serif; <!--文字の種類-->
}
.writer-name-after{
	padding:0; <!--空白-->
	margin:-5px 0 0 0; <!--空白-->
	font-size: 15px; <!--文字の大きさ-->
}
.writer-post{
	font-weight:normal; <!--文字の太さ-->
	clear: both; <!--回り込み解除-->
	font-size: 15px; <!--文字の大きさ-->
}
.writer-profile-sns{
	margin-top:10px; <!--空白-->
}
.writer-profile-sns a{
	text-decoration: none; <!--下線解除-->
	font-size: 25px; <!--文字の大きさ-->
	margin: 3px; <!--空白-->
}
.writer-profile-sns .twitter-button{
	color:#1DA1F2; <!--文字の色-->
	border-radius: 50%;<!--丸く表示-->
	padding: 3px 6px; <!--空白-->
	border-style:none; <!--囲い解除-->
	font-size:32px; <!--文字の大きさ-->
}
.writer-profile-sns .twitter-button:hover{
	color:#fff; <!--文字の色-->
	background-color:#1DA1F2; <!--背景色-->
}
.writer-profile-sns .website-button{
	color:#333; <!--文字の色-->
	border-radius: 50%;<!--丸く表示-->
	padding: 3px 6px; <!--空白-->
	border-style:none; <!--囲い解除-->
	font-size:32px; <!--文字の大きさ-->
	margin-left: 0; <!--空白-->
}
.writer-profile-sns .website-button:hover{
	color:#fff; <!--文字の色-->
	background-color:#333; <!--背景色-->
}
.writer-profile-sns .feedly-button{
	color:#6CC655; <!--文字の色-->
	border-radius: 50%;<!--丸く表示-->
	padding: 3px 6px; <!--空白-->
	border-style:none; <!--囲い解除-->
	font-size:32px; <!--文字の大きさ-->
}
.writer-profile-sns .feedly-button:hover{
	color:#fff; <!--文字の色-->
	background-color:#6CC655; <!--背景色-->
}
@media screen and (max-width: 480px){
.writer-profile-img{
	width:40%;<!--幅を変更-->
	box-shadow: none !important; <!--影を解除-->
}
.writer-profile-sns a{
	padding: 6px 6px; <!--空白-->
	-webkit-text-size-adjust: 100%;
}
}
</style>

 

上記は投稿本文下にコピペするコードで、次に紹介するのはサイドバー用のプロフィール。こちらも表示のバランスが悪いのなら、美朝してくださいね。

<div class="writer-profile">
<!--画像-->
<img class=" wp-image-2661 alignleft writer-profile-img" src="https://megane3-zakki.info/wp-content/uploads/2018/12/zibunmokao.png" alt="" width="152" height="141" />
<!--画像 end-->
<div class="writer-record">
<!--名前-->
<p class="writer-name">メガネさん</p>
<!--肩書き-->
<p class="writer-name-after">元美容師webライター</p>
<div class="writer-profile-sns">
<!--ホームボタン-->
<a href="https://html.co.jp/sekibiyou1984" class="follow-button website-button website-follow-button-sq" target="_blank" title="著者サイト" rel="nofollow noopener noreferrer"><span class="icon-home-logo"></span></a>
<!--ホームボタン end-->
<!--Twitterボタン-->
<a href="https://twitter.com/sekibiyou1984" class="follow-button twitter-button twitter-follow-button-sq" target="_blank" title="Twitterをフォロー" rel="nofollow noopener noreferrer"><span class="icon-twitter-logo"></span></a>
<!--Twitterボタン end-->
<!--feedlyボタン-->
<a href="//feedly.com/i/subscription/feed/https%3A%2F%2Fmegane3-zakki.info%2Ffeed" class="follow-button feedly-button feedly-follow-button-sq" target="blank" title="feedlyで更新情報を購読" rel="nofollow noopener noreferrer"><span class="icon-feedly-logo"></span><span class="follow-count feedly-follow-count"></span></a>
<!--feedlyボタン end-->
</div>
</div>
<p class="writer-post">元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。</p>

</div>
<style>
.writer-title{
	font-weight:normal; <!--文字の太さ-->
	font-family: YuMincho,"Yu Mincho","Hiragino Mincho ProN",HG明朝E,serif; <!--文字の種類-->
	font-size: 150%;<!--文字の大きさ-->
	text-align: left; <!--左寄せ-->
	margin: 20px 0px 30px 0px; <!--空白-->
	letter-spacing: 0.8px; <!--文字間の空白-->
	border-bottom: solid 1px #1E73BF; <!--下線-->
}
.writer-profile-left{
	margin:0 auto; <!--空白-->
}
.custom-html-widget .writer-profile-img{
	box-shadow: none !important; <!--影を削除-->
	margin-left: 13px !important; <!--空白-->
}
.writer-name{
	font-weight:bold; <!--文字の太さ-->
	font-size: 30px; <!--文字の大きさ-->
	margin:0; <!--空白-->
	font-family: YuMincho,"Yu Mincho","Hiragino Mincho ProN",HG明朝E,serif; <!--文字の種類-->
}
.writer-name-after{
	padding:0; <!--空白-->
	margin:-5px 0 0 0; <!--空白-->
	font-size: 15px; <!--文字の大きさ-->
}
.writer-post{
	font-weight:normal; <!--文字の太さ-->
	clear: both; <!--回り込み解除-->
	font-size: 15px; <!--文字の大きさ-->
}
.writer-profile-sns{
	margin-top:10px; <!--空白-->
}
.writer-profile-sns a{
	text-decoration: none; <!--下線削除-->
	font-size: 25px; <!--文字の大きさ-->
	margin: 3px; <!--空白-->
}
.writer-profile-sns .twitter-button{
	color:#1DA1F2; <!--文字の色-->
	border-radius: 50%;<!--丸く表示-->
	padding: 3px 6px; <!--空白-->
	border-style:none; <!--囲い線なし-->
	font-size:32px; <!--文字の大きさ-->
}
.writer-profile-sns .twitter-button:hover{
	color:#fff; <!--文字の色-->
	background-color:#1DA1F2; <!--背景色-->
}
.writer-profile-sns .website-button{
	color:#333; <!--文字の色-->
	border-radius: 50%;<!--丸く表示-->
	padding: 3px 6px; <!--空白-->
	border-style:none; <!--囲い線なし-->
	font-size:32px; <!--文字の大きさ-->
	margin-left: 0; <!--空白なし-->
}
.writer-profile-sns .website-button:hover{
	color:#fff; <!--文字の色-->
	background-color:#333; <!--背景色-->
}
.writer-profile-sns .feedly-button{
	color:#6CC655; <!--文字の色-->
	border-radius: 50%; <!--丸く表示-->
	padding: 3px 6px; <!--空白-->
	border-style:none; <!--囲い線なし-->
	font-size:32px; <!--文字の大きさ-->
}
.writer-profile-sns .feedly-button:hover{
	color:#fff; <!--文字の色-->
	background-color:#6CC655; <!--背景色-->
}
@media screen and (max-width: 480px){
.writer-profile-img{
	width:40%; <!--幅変更-->
	box-shadow: none !important; <!--影を非表示-->
}
.writer-profile-sns a{
	padding: 6px 6px; <!--空白-->
	-webkit-text-size-adjust: 100%;
}
}
</style>
メガネさん
メガネさん

ちなみに以下で具体的に作った方法と、カスタマイズの注意点について紹介します。

 

chromeの検証機能でフォローボタンをコピペしてカスタマイズ

cocoonのデフォルトのプロフィールには、Twitterのフォローボタンなど、SNSと連携できます。そこで1回それを表示させておいてコピペしてしまえば、ボタンが作れるんですよね。

 

ちなみにこれは検証機能のhtml側でコピーする必要がありますが、最初僕はコピーできなくて困っていました。

 

サイトで調べてみると、コード上で右クリックしたらクリックするところが出てきたのでやってみてください。

Google神
Google神

そして上記のcssでカスタマイズすれば、上記のような自作プロフィールが作れるの!

 

Shortcodes Ultimateで好きなボタンを作成!

そして「詳しいプロフィール」と書かれたボタンがありますが、これは以前の自作トップページと同様に、Shortcodes Ultimateというプラグインを使いました。

 

 

最初からhtmlとcssで作ってもいいのですが、時短のためです。ササっとショートコードで作れてしまうので、導入して損はありません

 

色の設定などはメニュー内の操作できるので、コードを覚えなくても大丈夫です。自信がない人は、どんどんプラグインを使ってしまいましょう。

 

ちなみにボタンを増やしてもいいので、そのあたりはカスタマイズする大きなメリットですね。

 

ちなみに僕は詳しいプロフィールボタンを作りました!コピペして、内容を自分用にしてから使ってみてください!

[su_button url="https://megane3-zakki.info/profile" target="blank" style="flat" background="#1E73BF" color="#ffffff" size="12" wide="yes" center="yes" radius="0" icon="icon: window-restore"]詳しいプロフィール[/su_button]

※うまく表示されないので、最初の「 [ 」は全角になっています。半角にしてから使ってください。

 

 

cocoonなら広告設定とウィジェットの位置を確認

ちなみに補足なんですが、僕がこの自作プロフィールを作ったときには、Googleの広告がその下に表示されていました。

Google神
Google神

じつはその広告の下にSNSボタンが出ていて、あまり目立っていないな…と、わしは感じてたんじゃ…。

 

なんか面倒そう…と思っていましたが、じつはcocoonには広告の位置を変更してくれる機能がありました。最初はイジッたのでしょうが忘れていたので、また感動してしまいましたよ。

 

広告をクリックされないかもしれませんが、むしろ使いやすさを重視しているので、あえて広告は下に表示!これもcocoonのカスタマイズ性の自由度が活きました。

 

ちなみにcocoon設定から広告というタブをクリックしたら、自由に位置を変えられますよ。ウィジェット機能なら、自作プロフィールの位置も変えられるので、サイドバーにも表示してみました。

メガネさん
メガネさん

今の僕の設定では、スマホ表示だとサイドバーを消しています。サイドバーのプロフィールは、パソコンでの大きな画面だけ表示中です。

 

サイドバーにプロフィールを使っても違和感なし!

じつはレスポンシブ対応しているプロフィールなので、サイドバーで使っても、違和感なしに使えてしまいます。気になる人はコピペして使ってみてくださいね。

 

ちなみにTwitterとfeedly、ホーム画面しか表示されていないので、これ以上SNSなどを表示させたいのなら、htmlとcssを使って調整してみましょう。

メガネさん
メガネさん

これであなたのブログを読んだ人が、ファンになってくれる可能性がアップしますよ。

この記事を書いたのは…

メガネさん

元美容師webライター

元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。

コーディング
スポンサーリンク
メガネ通信