・プロフィール表示のメリット Webデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成！当ブログは2019年2月START！, 現状サイドバーのみです。モバイル時にサイドバーを表示させれば、デモページのように擬似的に記事下に持って来ることはできます。 要望があれば記事下のプロフィールも作ります。, プロフィール説明欄でHTMLタグを使えるようにする処理をfunction.phpに書きます。, 以下のコードを「WordPress管理画面→外観→テーマエディター→function.php(子テーマ)」にコピペしてください。, 「WordPress管理画面→ユーザー→あなたのプロフィール」を選択してください。, プロフィールにあるアイコンを表示させるためにはSNS情報を入力する必要があります。, 今回のデザインはデモページのように背景なしが映えるようになっているので背景なし推奨です。, 背景なしにしたい方はjpgファイルだと必ず背景が付いて来るのでpngファイルがオススメです。, 画像を設定したのに表示されない場合はアバター設定がOFFになってる可能性があります。, 「WordPress管理画面→外観→テーマエディター→style.css」に下記コードをコピペしてください。, Googleでカラーコードで検索すれば例が出て来ると思うのでそちらを参考にしてください。, グラデーションを背景色にした方はグラデーションのコード内にあるカラーコードがオススメです。, 「WordPress管理画面→外観→ウィジェット」のプロフィール設定のところに肩書き入力欄があります。, 「WordPress管理画面→外観→テーマエディター→style.css」を選択。, 「この記事を見て導入したよ！」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます！, 紹介したにも関わらず反映されていないという方は大変申し訳ないのですがご連絡ください！, 私はCSSなど全く分からないのですが、ぽんひろさんの説明をみていると、とても分かり易く、ちょっとですが理解することが出来ました（コピペでカスタマイズしたカテゴリー部分の色が変更できず困っていましたが、解決することが出来ました）。, 現在ブログのデザインを色々いじっているので、とても参考になりました。 ブログデザインを変更した過程を記事にした際、ぽんひろさんの記事も紹介させていただきました。, 私もぽんひろさんのサイトを拝見して、カスタマイズに挑戦しております。 そこでひとつ悩んでおりまして、ぜひご教示頂きたいなと思っています。, サンプルでお作りになっているピンクのグラデーションバージョンですが、プロフの文字が白く、飛んで見にくい状態です。文字色を見やすく、かつカラーバランスが損なわれないようなセンス良い色がありましたら教えて下さい。, また、どこを改変しますと文字色は変わりますでしょうか。 お忙しい折とは思いますが、よろしくお願いします。, 文字色は .sidebar .author-content { にあるcolor:#fff;のカラーコードを変更すれば変わるかと思います。, 見にくい場合は「背景のピンクを濃くして文字色は白のまま」、もしくは「背景のピンクを薄くして文字色を濃いピンク、もしくは文字色を黒に少しピンクを足した色にする」でしょうか。, この記事を参考にプロフィールの変更したのですが、とても満足のいく出来栄えになりました！ また、別記事のサイト型ページの作り方もとても参考になりました。 ありがとうございます。（↓サイトURLです）https://chillaxjap.com/, とても参考になったので、Twitterの方で紹介させていただきました。https://twitter.com/IYO_ChillaxJap/status/1213727335498694657, 初めまして！カスタマイズ&紹介ありがとうございます！ こちらも紹介させていただきます！, Twitterもさきほどフォローさせていただきました。 その他のページで紹介されているカスタマイズも 少しずつ自分のサイトへ反映させていただければと思います。, この記事を見ながらプロフ作りました！ 細かく教えていただいたおかげで、作ることができました！ 本当にありがとうございます！！, 「コクーン トップページ 広告非表示」 で検索していたところ、ぽんひろさんのブログを見つけ、, 参考にさせてもらった記事を二つブログで紹介させてもらいました。https://dattecathydamon.com/2020/01/31/cocoon-henkou/, 自分と同じように悩んでいる人に、ぽんひろさんのサイトを見てもらって、悩みが解決できるといいなぁと思います。, はじめまして。 cocoonでブログ作成はじめて、こちらのサイトを参考にカスタマイズさせていただいています。ありがとうございます。, 今seasonのスキンを利用させていただいているのですが、こちらの手順でプロフィール設定がうまくいかず…。, プロフィールアイコンが、プロフィール説明の部分までめりこんでしまいます…何か対処法はありますでしょうか？, 問い合わせかTwitterのDMからで良いのでURLを教えていただくことは可能でしょうか？, はじめまして。 cocoonでブログを作り始め、ぽんひろさんのサイトを参考にカスタマイズに挑戦中です。 プロフィール欄のSNSボタンの形が崩れてしまい対処方法が解りません。 ご教授いただけたら嬉しいです。 サイト：https://mameshiba-ten.com/, .sidebar .author-box .sns-follow-buttons a { border-radius: 50%; border: none; width: 45px; height: 45px; line-height: 45px; font-size: 30px; box-shadow: 0 0 10px rgba(245, 186, 56, .5), 0 0 5px -5px rgba(245, 186, 56); background: #fff; }, #container #sidebar .author-box .sns-follow-buttons a { border-radius: 50%; border: none; width: 45px !important; height: 45px; line-height: 45px; font-size: 30px !important; box-shadow: 0 0 10px rgba(245, 186, 56, .5), 0 0 5px -5px rgba(245, 186, 56); background: #fff; }, SNSボタンの形が〇になりました。 何かが起こると素人なので、どこを修正して良いか解らずアタフタしてしまいました。 ブログは日々悪戦苦闘ですが、当ブログでぽんひろさんのカスタマイズ記事を紹介させていただきたいと思います。 ありがとうございました。, バージョンが変わったりでもしかしたらコードに不備があるかもですね…。お手数おかけして申し訳ないです。, ご紹介ありがとうございます！ 連絡いただければ、こちらでも紹介させていただきます！, 今回は、ぽんひろさんのプロフィール作成記事を拝見させて頂き 自分も同じように設定してみました！ 宜しければ導入したサイトとして紹介していただきたいです＾＾, とても分かりやすい記事で、初心者の私にはとても助かりました１ ありがとうございました＾＾, 私のサイト「Leben Mentor」https://leben-mentor.com/, しかし手順通り行ったのですがプロフィール画像の背景がなぜか表示されてしまいます。 pngの画像を使いプロフィール編集画面では背景はないのですが原因がわかりません。, ありがとうございます。 よろしければURLを教えていただいてもよろしいでしょうか？, .author-thumb img{ background: none !important; }, ありがとうございます。 利用させていただいています！ プロフィール欄のRSSのアイコンを削除したいのですが、 削除の方法はありますか？, CSSで .author-content .rss-button{ display:none; } を追記すれば非表示になるかと思います。, そこでぜひ記事下のプロフィールも、今回のようにグラデーションのようにカスタマイズする方法を教えていただきたいです。, ありがとうございます。 記事下も作ろう作ろうって思ってるのですが時間がなかなか作れずできていません…。申し訳ございません！, WordPressのプロフィール部分をもっとおしゃれに変更出来たらナァ…と思っていたところ、ぽんひろ様の記事を拝見し、大変参考にさせていただきました(T_T)！！, おかげで理想のプロフィールになりました〜！ 本当にありがとうございました！ これからも記事たのしみにしています。, 「吾輩はフリーランス猫である」https://www.wagahai-freelance.com/, はじめまして。いつもブログ作成の際に、よく見させていただいております。 一つ質問させてください。, SNSボタンの丸い枠の背景色を変更するにはどこを書き換えると、変更できますでしょうか？, .sidebar .author-box .sns-follow-buttons a の background: #fff; が背景色になります。, SNSがサンプルの様に丸の白抜きになりません。 どうしたらいいのか全然わかりません。 どこがおかしいのか教えていただきたいです。, ・考えられる理由としてはCSSのコピペ先を間違えている。 ・親テーマを適用してしまっている。 ・キャッシュが残っている。 などでしょうか。。。, はじめまして！ シャチとあんこと申します。 今回、ぽんひろさんのサイトを参考にプロフィールをカスタマイズさせていただきました。, なんの知識もありませんが、コピペで簡単にできてありがたいです！ ありがとうございます。, よろしければ、ご覧になってくださいませ。https://shachianko.com/.
Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。 アイコンの配色変更
・プロフィール表示のやり方 もともとCocoonのスキンを使っているので、見た目はほぼ整っている状態。 ここにプロフィール記事のURLを入れることで、プロフィールの名前部分をクリックすると、そのページに遷移するようになります。, サイトのサイドバーを確認してみると、アイコンや自己紹介文が反映されているかと思います。 ということで、昨日カテゴリーをいじったりしていまし... 【Cocoon】簡単3ステップ！記事本文にYouTube動画を埋め込む方法【ブログ成長記録】, 【正直な感想】Amazonで無印良品のアイテムが販売開始！購入できる商品は？品揃えは良いの？, 宗教画が楽しく学べる！「名画の謎 旧約・新約聖書篇(著・中野京子)」感想レビュー【ネタバレ有】, クラウドソーシング、デザイン初心者にはコンペ形式がおすすめ！【クラウドワークス感想あり】, 【Cocoon】ブログカラー変更！パステル調のグラデーションにしました【ブログ成長記録】. Cocoonのプロフィールカスタマイズです。グラデーションを使って可愛くオシャレにカスタマイズします。コピペで簡単に出来るようになっています。色の変更や肩書きの挿入など細かいカスタマイズ方法も紹介します。他にもCocoonのカスタマイズをしてますのでよかったらご覧ください。 「ここら辺でいちど整理しよう！」
Cocoonのサイドバープロフィールの背景に画像を設定する方法を書き残しておきます。 縦幅や横幅の調整も超簡単にできます。
髪の毛 白い粒 毛先 12, ラベンダー 待ち受け 効果 4, 5ch 将棋 すれ 21, Jabra Speak 710 ヨドバシ 4, ゴルフクラブ グリップ 料金 8, クラウン3 和訳 Lesson4 22, 国内 修学 旅行 平均 費用 7, Onedrive Zip 解凍 7, Fairlight Audio Accelerator Utility 9, 拡張子 Bpg 変換 5, スロット 機械割 おかしい 9, 新幹線eチケット Cm 部長 誰 11, みんなの 子猫 ブリーダー ラグドール 18, X H1 付属 品 4, Pc 壁紙 1920x1080 和風 14, ゼクシィ 縁結び 足跡数 6, Nhk 契約しない 裁判 11, フィット Gd1 Hid交換 4, お部屋 ジャンプ リンク 電波が 弱い 5, 船堀 美容院 オープン 5, Discord Krisp スマホ 8, インフルエンザ脳症 後遺症 ブログ 10, 刺し子 と パッチワークの 違い 4, Kj 43x8500g 外付けhdd 7, 肩 ゴリゴリ 改善 4, Ps4 エラー履歴 消し方 4, ナショナル オーブンレンジ 取扱説明書 6, 車 内装 深い傷 4, A列車で 行 こう 9 1602 4, インスタ ブロ解 Dm 7, Euro Truck Simulator 2 マウスカーソル 14, News 希望 Yell 歌割り 37, 新幹線 高すぎる 2ch 22, スキャン 画像 ノイズ除去 7, 美人百花 6月号 2020 5, 曲 ドレミ 変換 8, ナム ジヒョン 2019 4, コードバン かっ さ 棒 財布 4, 株 失敗談 2ch 7, コンデンサ Pcb 採取方法 4, Oracle Not Null制約 5, コンロ エラー 79 5, 世界一周 夫婦 その後 11, Object Browser 処理時間 7, マイクラ Vita 神シード 海底神殿 27, China's Test Time 5, ちゅらさん 動画 Pandora 14, 換気 排 熱 ファン 工事費用 9, Oppo Reno A Antutu 8, 無印 パジャマ アトピー 21, 既婚女性 好意 隠す 6, マイン クラフト Wiiu エンダードラゴン 孵化 14, バイク グローブ 乾かし方 4, 宇都宮市 学童保育 料金 5, Vsco Film Complete Pack 15, Dmr Brt220 外付けhdd 5, サウンドブラスター G3 Apex 9, メタモン 捕獲率 レイド 7, アンパンマングミ 開封rta なんj 5, Java Messageformat 改行 7, Ryzen 3300x 発売日 4, ゴルフ6 Gti 加速 4, 運動会 2020 中止 14, 大阪 充填 工場 4, 兵庫 屋上 撮影 5, 京都造形芸術大学 手のひら芸大 評判 4, Capture One 合成 6, クインテット アキラ 喋らない 7, 玄関 手すり おしゃれ 22, お布施 金額 偶数 4, マイクラ 世界を生成中 進まない 6, Power On 和訳 Lesson4 27, 14歳の母 10話 Pandora 5, Hp Omni200 5350 7, Oracle ゴミ箱 表領域 14, ヘーベルハウス 外壁 穴あけ 18, Gr Q23fgngl コストコ 8, 散弾ヘビィ 立ち回り アイスボーン 4, Hdmi 音が出ない Mac 7, 初心者 車選び Suv 5, 小学生 国語 楽しい 5, ラジオ メール 住所書かない 38, ニトリ ネット 買え ない 4, Everything Outlook 検索 5, パンケーキ リクガメ 餌 食べない 8, ステップワゴン Rp リアカメラ 配線 29, 仕事 頑張る 歌 9, Vba テーブル 行追加 8, ゴルフgti 6 7 比較 4, えべっさん ホームレス バイト 4, ワイルドエリア レイド フレンド 4, ハチドリ 待ち受け 効果 6, Xperia 次期モデル 5g 17, Mb B501e ファン 交換 8, 粗品 小栗旬 ものまね 4, 男の子 髪の切り方 簡単 20, ヨルシカ 曲 順番 14, ソニー Wi1000xm2 レビュー 16,
