ブログには記事を書いた人の名前を掲載できるプロフィール機能があります。
もちろんcocoonにもその機能がありますが、デフォルトの機能に満足していない人もいるでしょう。
そこでhtmlとcssを使って、自作のプロフィールを作ったので、コピペで設定してみてください！
今のブログはただ日記を付けるだけでなく、その記事から依頼が来ることや、ファンになってくれる可能性がかなり多くなっています。
そこで役立つのがプロフィール機能。
多機能なcocoonにもプロフィール機能がありますが、シンプルに作られているからこそ、何か物足りないと僕は思ってしまいました。
ちなみに以下の画像がその以前使っていたものです。
これだと個人的に飽きてしまったのもあり、htmlとcssの勉強をしてアウトプットをしたかったので、プロフィールを自作しちゃいました！
記事下の「この記事を書いた人」のプロフィールは大事！
よく目にするブログの多くは、記事の最後に「この記事を書いた人」というプロフィールが表示されますよね？
どんな人が書いているのか、一目見たらわかるようにするため、かなり重要な機能です。
面白い記事を見つけるとどんな人が書いているのか気になりますよね？
それを狙ったプロフィールには、じつは以下の効果が期待できます。
今のブログのすごいところは、お金が発生してしまうところ。
そのためにプロフィールは重要なので、cocoonはデフォルトでは僕は満足できない体になっていました。
記事を読んだ人がファンになってくれる可能性大
僕は今このようにブログを書いている立場ですが、その前はたくさんの人のブログを読んでいました。
今でもたまに見て癒されているほど、ブログが好きな人間だったんですよね。
そこで1番気になってしまうのは、その記事を書いている人がどんな人なのか？
このプロフィールが書かれていないと、もう1度読んでみたくなくなりました。
逆にプロフィールがしっかり書かれたブログは、なぜか愛着が沸いてしまって、別の記事も読んでみよう…。
そう思うのは僕だけでしょうか？（笑）
でもそんな感じでプロフィールが書かれているだけでも、ファンになってくれる人はいます。
ブログ記事が薄い内容だったとしても、プロフィールを読んでその人がどんな人かわかれば、記事そのものに深みが出ますからね。
ブログを６年ほど書き続けて気付きましたが、最重要は「権威性」です。
僕のブログが読まれる理由は「ブログ収益７桁・月間100万PV・毎日更新680日」という実績があるからです。あなたの権威性は何ですか？ ここで「権威性＝ポジション」を取れると、確実にブログ収益とアクセスが加速しますよ— マナブ@バンコク (@manabubannai) March 20, 2019
ちなみに今のSEOには権威性が重視されており、ファンを作ったほが検索順位も、上位に表示してくれる可能性があります。
それくらいプロフィールが重要だというわけです。
つまり「この記事を書いた人」というプロフィール欄は、かなり重要になってくるのがわかるね。
Twitterのフォローボタンを付けておくと、検索から来た人がフォローをしてくれる可能性も出てきますよ。
Twitterに関しては、過去に紹介しましたが、SEO的に重要な部分です。
プロフィールには必ずセットで付けておきましょう。
スキル次第では副業として仕事をもらえる
ファンになってもらえるだけでなく、じつは書き方によっては、法人様から依頼が来る場合もあります。
今ではインターネットの関心は高くなっており、ライティング案件やWeb制作の仕事が増えているそうです。
そこでたまたまブログを見てもらって、レベルが高い記事だ…なんて思っていただけると、それだけで仕事をもらえてしまう時代になっています。
まず、自分がフリーランスになってブログ経由でよく依頼が来た案件の傾向を書きます。
- 依頼者はある程度web制作の知識があり、自分で事業を持っている人
- 依頼者の一部はtwitterから自分を知ってブログに飛んできた可能性がある
- デザイン・コーディング一括でやって欲しい
- wordpressの案件が多い
- 自分をターゲットにした案件が多い（若い女性向け、海外好きなど）
上記はWebエンジニアに関しての例ですが、その他のお仕事をしている人にも通用すると思います。
そのためにプロフィールを付けておくと、記事を読んだあとに連絡がスムーズにとれるので、副業としてブログをする人は試したほうがいいですよ。
僕も何度か依頼は来ましたが、これも連絡先が分かるようにしていたからです。
ブログから実績を残してしまえば、アドセンスやアフィリエイトのように、収入を増やせてしまいます。
cocoonにもプロフィールがありましたが、パッと見た感じどこを押したらいいのか、個人的にわかりにくいな…なんて思ってしまったのでカスタマイズしたわけです。
cocoonのデフォルトのプロフィールより自作！やり方を紹介
シンプルなデザインで好評のcocoonは、たしかにそのまま使うだけでも、おしゃれに見えてしまいます。
ところがカスタマイズがいやすいのも、cocoonのいいところ。
無料でここまでカスタマイズできるのか…なんて思うほどクオリティが高いです。
そんないいところがあるのに、プロフィールも折角だからカスタマイズしたい…。
無駄にそんな好奇心が僕にはあったので、かなり自作してみることにしました。
cocoonの良さを壊さないように、シンプルだけど機能的にしてみました。
固定ページを使って下書きにした状態で試しに作成
まず固定ページを使って、プロフィールの形を作っていきました。
最終的に以下のような流れで、htmlとcssのコードを書き入れていくので、そのままいきなり書き入れてもいいでしょう。
- ウィジェット
- カスタムHTML
ところがそれだとブログを読みに来た人が、崩れてしまっている状態を見られてしまうので、個人的には誰も見られないと固定ページで作成したほうがいいと感じました。
僕はクラシックエディターを使っているので、「ビジュアル」ではなく、「テキスト」という機能を開くとhtmlとcssの表記が使えるようになります。
そこである程度コーディングができれば、完成する前の過程を見られる心配もない！
記事下に出るプロフィールが自作できるじゃろう。
HTMLのコードをウィジェットのカスタムHTMLにコピペ
そして固定ページでプロフィールが完成したら、htmlやcssをコピーしておきましょう。
そしてそのコードををジェットという機能を開き、「投稿本文下」という項目に「カスタムHTML」を追加し、コピーしたコードを貼り付けてください。
これだけでもうほとんど完成したようなもの。
Google chromeの検証機能などと一緒に、しっかり表示されているかどうかを確認してね！
ちなみに「投稿本文下」だけでなく、サイドバーにプロフィールを作りたい人にもおすすめ。
以下で紹介するコードをコピペするだけで、ちょっと変わったプロフィールが作れます。
- 固定ページで試しにプロフィールをhtmlとcssで作成
- 完成したらウィジェットを開いてカスタムHTMLを選択
- 投稿本文下にカスタムHTMLを投入してコードを貼り付け
- ちょっとだけ微調整したら完成
カスタム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/2019/12/zibunmokao2.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/2019/12/zibunmokao2.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側でコピーする必要がありますが、最初僕はコピーできなくて困っていました。
サイトで調べてみると、コード上で右クリックしたらクリックするところが出てきたのでやってみてください。
そして上記の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の広告がその下に表示されていました。
じつはその広告の下にSNSボタンが出ていて、あまり目立っていないな…と、わしは感じてたんじゃ…。
なんか面倒そう…と思っていましたが、じつはcocoonには広告の位置を変更してくれる機能がありました。
最初はイジッたのでしょうが忘れていたので、また感動してしたよ。
広告をクリックされないかもしれませんが、むしろ使いやすさを重視しているので、あえて広告は下に表示！
これもcocoonのカスタマイズ性の自由度が活きました。
ちなみにcocoon設定から広告というタブをクリックしたら、自由に位置を変えられますよ。
ウィジェット機能なら、自作プロフィールの位置も変えられるので、サイドバーにも表示してみました。
今の僕の設定では、スマホ表示だとサイドバーを消しています。
サイドバーのプロフィールは、パソコンでの大きな画面だけ表示中です。
サイドバーにプロフィールを使っても違和感なし！
じつはレスポンシブ対応しているプロフィールなので、サイドバーで使っても、違和感なしに使えてしまいます。
気になる人はコピペして使ってみてくださいね。
ちなみにTwitterとfeedly、ホーム画面しか表示されていないので、これ以上SNSなどを表示させたいのなら、htmlとcssを使って調整してみましょう。
これであなたのブログを読んだ人が、ファンになってくれる可能性がアップしますよ。
