2019.05.12この記事は約25分で読めます。スポンサーリンクブログには記事を書いた人の名前を掲載できるプロフィール機能があります。cocoonにもその機能がありますが、デフォルトの機能に満足していない人もいるでしょう。そこでhtmlとcssを使って、自作のプロフィールを作ったので、コピペで設定してみてください!今のブログはただ日記を付けるだけでなく、その記事から依頼が来ることや、ファンになってくれる可能性がかなり多くなっています。そこで役立つのがプロフィール機能。多機能なcocoonにもプロフィール機能がありますが、シンプルに作られているからこそ、何か物足りないと僕は思ってしまいました。ちなみに以下の画像がその以前使っていたものです。メガネさんこれだと個人的に飽きてしまったのもあり、htmlとcssの勉強をしてアウトプットをしたかったので、プロフィールを自作しちゃいました!メリットばかり!コーディングの勉強として自分のブログをデザインコーディングとはプログラミングの一種ですが、仕様書通りにデザインすればいいんです。ところが勉強するには実践がおすすめされており、最初はなかなかその環境がありません。そこで気付いてしまいました。それが自分のブログで勉強する方法!どう考えてもメリットばかりなので紹介しますね。Ultimateで好きなボタンを作成してプロフィールリンクを作成cocoonなら広告設定とウィジェットの位置を確認サイドバーにプロフィールを使っても違和感なし!記事下の「この記事を書いた人」のプロフィールは大事!よく目にするブログの多くは、記事の最後に「この記事を書いた人」というプロフィールが表示されますよね?どんな人が書いているのか、一目見たらわかるようにするため、かなり重要な機能です。面白い記事を見つけるとどんな人が書いているのか気になりますよね?それを狙ったプロフィールには、じつは以下の効果が期待できます。メガネさん今のブログのすごいところは、お金が発生してしまうところ。そのためにプロフィールは重要なので、cocoonはデフォルトでは僕は満足できない体になっていました。僕は今このようにブログを書いている立場ですが、その前はたくさんの人のブログを読んでいました。今でもたまに見て癒されているほど、ブログが好きな人間だったんですよね。そこで1番気になってしまうのは、その記事を書いている人がどんな人なのか?このプロフィールが書かれていないと、もう1度読んでみたくなくなりました。メガネさん逆にプロフィールがしっかり書かれたブログは、なぜか愛着が沸いてしまって、別の記事も読んでみよう...。思うのは僕だけでしょうか?(笑)でもそんな感じでプロフィールが書かれているだけでも、ファンになってくれる人はいます。ブログ記事が薄い内容だったとしても、プロフィールを読んでその人がどんな人かわかれば、記事そのものに深みが出ますからね。ブログを6年ほど書き続けて気付きましたが、最重要は「権威性」です。僕のブログが読まれる理由は「ブログ収益7桁・月間100万PV・毎日更新680日」という実績があるからです。2019ちなみに今のSEOには権威性が重視されており、ファンを作ったほが検索順位も、上位に表示してくれる可能性があります。それくらいプロフィールが重要だというわけです。メガネさんつまり「この記事を書いた人」というプロフィール欄は、かなり重要になってくるのがわかるね。Twitterのフォローボタンを付けておくと、検索から来た人がフォローをしてくれる可能性も出てきますよ。Twitterに関しては、過去に紹介しましたが、SEO的に重要な部分です。プロフィールには必ずセットで付けておきましょう。Twitterを活用して思った!フォロワー増やしながらブログ書け!Twitterはブログと相性がいいといわれています。それは記事を投稿したら、すぐにブログを見に来てくれるから。変動が大きいGoogleにも、とくに左右されずに流入が見込まれます。ところがフォロワーと増やさないと効果が全然ありません。うまく活用するにはどうすればいいのか、拡散してもらう方法なども紹介しますね。megane3-zakki.infoスキル次第では副業として仕事をもらえるファンになってもらえるだけでなく、じつは書き方によっては、法人様から依頼が来る場合もあります。今ではインターネットの関心は高くなっており、ライティング案件やWeb制作の仕事が増えているそうです。そこでたまたまブログを見てもらって、レベルが高い記事だ...なんて思っていただけると、それだけで仕事をもらえてしまう時代になっています。自分がフリーランスになってブログ経由でよく依頼が来た案件の傾向を書きます。上記はWebエンジニアに関しての例ですが、その他のお仕事をしている人にも通用すると思います。そのためにプロフィールを付けておくと、記事を読んだあとに連絡がスムーズにとれるので、副業としてブログをする人は試したほうがいいですよ。僕も何度か依頼は来ましたが、これも連絡先が分かるようにしていたからです。ブログから実績を残してしまえば、アドセンスやアフィリエイトのように、収入を増やせてしまいます。メガネさんcocoonにもプロフィールがありましたが、パッと見た感じどこを押したらいいのか、個人的にわかりにくいな...なんて思ってしまったのでカスタマイズしたわけです。cocoonのデフォルトのプロフィールより自作!やり方を紹介シンプルなデザインで好評のcocoonは、たしかにそのまま使うだけでも、おしゃれに見えてしまいます。ところがカスタマイズがいやすいのも、cocoonのいいところ。無料でここまでカスタマイズできるのか...なんて思うほどクオリティが高いです。そんないいところがあるのに、プロフィールも折角だからカスタマイズしたい...。無駄にそんな好奇心が僕にはあったので、かなり自作してみることにしました。メガネさんcocoonの良さを壊さないように、シンプルだけど機能的にしてみました。固定ページを使って下書きにした状態で試しに作成まず固定ページを使って、プロフィールの形を作っていきました。最終的に以下のような流れで、htmlとcssのコードを書き入れていくので、そのままいきなり書き入れてもいいでしょう。ウィジェットカスタムHTMLところがそれだとブログを読みに来た人が、崩れてしまっている状態を見られてしまうので、個人的には誰も見られないと固定ページで作成したほうがいいと感じました。僕はクラシックエディターを使っているので、「ビジュアル」ではなく、「テキスト」という機能を開くとhtmlとcssの表記が使えるようになります。Google神そこである程度コーディングができれば、完成する前の過程を見られる心配もない!記事下に出るプロフィールが自作できるじゃろう。HTMLのコードをウィジェットのカスタムHTMLにコピペそして固定ページでプロフィールが完成したら、htmlやcssをコピーしておきましょう。そのコードををジェットという機能を開き、「投稿本文下」という項目に「カスタムHTML」を追加し、コピーしたコードを貼り付けてください。メガネさんこれだけでもうほとんど完成したようなもの。chromeの検証機能などと一緒に、しっかり表示されているかどうかを確認してね!ちなみに「投稿本文下」だけでなく、サイドバーにプロフィールを作りたい人にもおすすめ。以下で紹介するコードをコピペするだけで、ちょっと変わったプロフィールが作れます。投稿本文下にカスタムHTMLを投入してコードを貼り付けちょっとだけ微調整したら完成カスタムHTMLにコピペして自作プロフィールを作ろうではカスタムHTMLを使って投稿本文下に、プロフィールが追加できたら、ほぼ自作プロフィールは完成です。そのコードは以下になるので、カスタマイズしたい人は、是非使ってあげてくださいね。class="writer-post">元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。100%;}}</style>上記は投稿本文下にコピペするコードで、次に紹介するのはサイドバー用のプロフィール。こちらも表示のバランスが悪いのなら、美朝してくださいね。class="writer-post">元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。100%;}}</style>メガネさんちなみに以下で具体的に作った方法と、カスタマイズの注意点について紹介します。chromeの検証機能でフォローボタンをコピペしてカスタマイズcocoonのデフォルトのプロフィールには、Twitterのフォローボタンなど、SNSと連携できます。そこで1回それを表示させておいてコピペしてしまえば、ボタンが作れるんですよね。ちなみにこれは検証機能のhtml側でコピーする必要がありますが、最初僕はコピーできなくて困っていました。サイトで調べてみると、コード上で右クリックしたらクリックするところが出てきたのでやってみてください。Ultimateで好きなボタンを作成してプロフィールリンクを作成そして「詳しいプロフィール」と書かれたボタンがありますが、これはプロフィールへ繋がるリンクです。Ultimateというプラグインを使いました。Ultimateビジュアルコンポーネントの包括的コレクションja.wordpress.org最初からhtmlとcssで作ってもいいのですが、時短のためです。ショートコードで、プロフィールリンクが作れてしまうので、導入して損はありません。色の設定などはメニュー内の操作できるので、コードを覚えなくても大丈夫です。自信がない人は、どんどんプラグインを使ってしまいましょう。ちなみにボタンを増やしてもいいので、そのあたりはカスタマイズする大きなメリットですね。【初心者用】Cocoonのトップページをサイト型にカスタマイズする方法Cocoonは無料のテーマなのにカスタマイズがしやすいと、かなり評判がいいWordpressテーマです。僕もその特徴に魅了されて、今でも愛用していますが、トップページをおしゃれにカスタマイズしていませんでした。コーディングの勉強をしていたので、参考にしてみてください。」は全角になっています。半角にしてから使ってください。cocoonなら広告設定とウィジェットの位置を確認ちなみに補足なんですが、僕がこの自作プロフィールを作ったときには、Googleの広告がその下に表示されていました。Google神じつはその広告の下にSNSボタンが出ていて、あまり目立っていないな...と、わしは感じてたんじゃ...。なんか面倒そう...と思っていましたが、じつはcocoonには広告の位置を変更してくれる機能がありました。メガネさん最初はイジッたのでしょうが忘れていたので、また感動してしたよ。広告をクリックされないかもしれませんが、むしろ使いやすさを重視しているので、あえて広告は下に表示!これもcocoonのカスタマイズ性の自由度が活きました。ちなみにcocoon設定から広告というタブをクリックしたら、自由に位置を変えられますよ。ウィジェット機能なら、自作プロフィールの位置も変えられるので、サイドバーにも表示してみました。メガネさん今の僕の設定では、スマホ表示だとサイドバーを消しています。サイドバーのプロフィールは、パソコンでの大きな画面だけ表示中です。サイドバーにプロフィールを使っても違和感なし!じつはレスポンシブ対応しているプロフィールなので、サイドバーで使っても、違和感なしに使えてしまいます。気になる人はコピペして使ってみてくださいね。ちなみにTwitterとfeedly、ホーム画面しか表示されていないので、これ以上SNSなどを表示させたいのなら、htmlとcssを使って調整してみましょう。メガネさんこれであなたのブログを読んだ人が、ファンになってくれる可能性がアップしますよ。美容師⇒手荒れ⇒Webライターと、波乱万丈な人生を楽しみながらブログ発信をしています。元美容師の雑記ブログよく読まれる記事コーディングコーディングで仕事を受ける流れを把握しておけば勉強しやすいよコーディングは初心者でも流れを把握して、しっかり勉強できていたら、副業でも意外に早くから報酬をゲットできるようです。個人的に僕もまだまだ初心者なので、どのような仕事の流れになるのか、把握したかったので調べてみました。コーディングの仕事の流れは、webライターと似ているみたいですね。2019.12.22コーディングコーディングプログラミング初心者の味方であるドットインストールの使い方は簡単ドットインストールとはプログラミングの基礎を無料で学べるサービスであり、僕のようにプログラミングのプの字もわからない人でも、簡単に使い方まで理解できてしまいます。ドットインストールを有効に活用するには、必要なソフトや方法を知っておいたほうがいいので、少し触ってみてわかったことを紹介しますね。2019.12.22コーディングコーディング初めてサイトを作る人必見!コーディングのスピードアップの方法コーディングはプログラミングでは必要なスキルです。ところが仕事にするためには、スピードアップしないと報酬が伸びていきません。僕はプログラミング初心者として初めてサイトを作ったのですが、コーディングだけでもかなり時間がかかってしまいました。その復習としてスピードアップの方法を紹介しますね。2020.01.16コーディングコーディングコーディング初心者のwebライターが勉強開始!HTMLやCSSとは?コーディングというのはプログラミングを覚え始める初心者にとって、都合がいいジャンルです。それはブログなど触れ合う機会が多い部分になるから。言い方を変えるとHTMLやCSSであり、この勉強がしっかりできていると、仕事にもつながりますよ。知識がない人のためにも、わかりやすく紹介しますね。美容師⇒手荒れ⇒Webライターと、波乱万丈な人生を楽しみながらブログ発信をしています。defined.")}))})();。