💡今日のおトク情報をチェックする
・Amazon今日のタイムセール
・1000円以下 Amazon在庫処分セール
※当記事内で紹介しているリンクは一部Amazonアソシエイトリンクがあります
こんにちは、筆者のそみーた（@toystorywagaya）です。
3児のママで、趣味は投資と断捨離、オトクに弱い♡ゆるっとお寺の奥さんしてます。
はじめに コクーンテーマに落ち着いた理由
2019年にWordPressでブログを立ち上げてから、早いもので6年が経とうとしています。
この間にいくつかのテーマを試しましたが、最近は「コクーン」を使うようになりすっかり落ち着いています。コクーンはカスタマイズ機能が豊富で、シンプルかつおしゃれに仕上げることができるため、非常に気に入っていますね。
カスタムCSSを使えば有料テーマに匹敵するサイトがデザインできちゃうのも魅力
何よりも、皆さんがシェアしてくださっているカスタマイズCSSを参考にすることで、より自分好みのデザインに仕上げやすいのが大きな魅力です。そして、無料で利用できるという点も大きなポイントです。
サイドバーのプロフィールリンクを追加したい！
ブログのサイドバーは、訪問者がサイトを回遊する際に非常に重要な場所ですが、長くなると情報が多すぎて視覚的にごちゃごちゃしてしまいます。
そこで、今回はプロフィール欄にリンクを追加することで、サイドバーの長さを抑えつつ、訪問者にとって必要な情報をすっきりと提供できるようにしたいと思いました。
具体的には、プロフィールに自分の詳細な情報を掲載したプロフィールページへのリンクや、お仕事依頼用のクラウドワークスへのリンクを設置しました。
これにより、訪問者が簡単に自分について知ることができるだけでなく、仕事の依頼にもスムーズにアクセスできるようになりました。
次からはプロフィールブロックの話です
プロフィールブロックの使い方とカスタマイズ方法
コクーンテーマでは、サイドバーに「プロフィールブロック」が最初から用意されています。
プロフィールブロックの場所は、
の順番でプロフィールブロックを見つけ出せます。
まずは、このプロフィールブロックをサイドバーにドラッグして設定画面を開き、必要な情報を入力します。
これを使えば、HTMLやCSSの知識がなくても簡単にプロフィール欄を作成することができます。
これまではカスタムHTMLウィジェットを使っていましたが、コクーンのプロフィールブロックを使うことで、より簡単に、かつ統一感のあるデザインに仕上げられることがわかりました。
情報のアプデってホント大切
HTMLコードを使ってリンクを簡単に追加する方法
ここで、プロフィール欄にリンクを追加する方法についてですが、コクーンのプロフィールブロックにはHTMLを直接入力できるスペースが用意されています。
リンクを追加するには、このスペースにHTMLコードを挿入するだけです。
具体的には、以下のようなコードを追加しました。
<a href="https://example.com/profile" target="_blank">詳しいプロフィールはこちら</a>
<br>
<a href="https://crowdworks.jp/contractors/yourprofile" target="_blank">お仕事依頼はこちら</a>このコードを入力することで、「詳しいプロフィールはこちら」と「お仕事依頼はこちら」というリンクが表示され、クリックするとそれぞれのページに飛ぶようになります。
これで、サイドバーにプロフィールページとお仕事依頼ページへのリンクを簡単に追加することができました。
めっちゃ簡単なり
まとめ プロフィールリンクの追加でサイドバーがスッキリ
今回のカスタマイズを通して、コクーンテーマの便利さを再確認しました。
プロフィールブロックを使って、簡単にリンクを追加できたことで、
サイドバーがスッキリとし、訪問者にとっても使いやすくなりました。
HTMLコードを使うことで、リンクを自由にカスタマイズできる点も大きな魅力です。
これからも、ブログのデザインや使いやすさをさらに改善していきたいと思います。
もし同じようにプロフィール欄にリンクを追加したいと思っている方がいれば、ぜひ参考にしてみてください！
<a href="https://example.com/profile" target="_blank">詳しいプロフィールはこちら</a>
<br>
<a href="https://crowdworks.jp/contractors/yourprofile" target="_blank">お仕事依頼はこちら</a>
コメント