今回は、急に思い立ってブログデザインの大改... こんにちは！紫莉(ユカリ)です。 Copyright © 2019 ぽんひろ.com All Rights Reserved. もともとCocoonのスキンを使っているので、見た目はほぼ整っている状態。 雑記ブログなので仕方ないですが コクーンのスマホのヘッダーを変えたくて変えたくてうずうずしていた僕。頑張って調べてみたらCocoon設定だけでスマホのヘッダーが変更できるじゃないですか。さすがCocoonですね！うれしくなってすぐに設定したので、あなたにもお伝えします。ス アイコンごとの間隔も少し広めにとって、すっきりとした印象にしています。, そして、Instagramアイコンの色をグラデーションにしました！ Instagramらしさが出て、一目で見分けられますよね。, スキンごとに設定が異なるかと思いますので、CSS追記→反映させて確認を繰り返しながら調整してみてください！, ということで、今回は WebデザインとDTPデザインの勉強をしながら、勉強の様子や日々のできごと・好きなモノを紹介するためにブログを開設しました。. 続いて「TwitterURL」などの欄に、各SNSのURLを入力します。, 「あなたについて」内の「プロフィール情報」で、いよいよプロフィール本文の編集を行います。 にほんブログ村に登録＆Twitter開設しました！！ プロフィールを表示させることのメリットを知り、今回チャレンジしてみました。, 実際にプロフィールを作ってみて感じたのは「ブロガーっぽくなってきた！」というワクワク感。, 肝心なのはもちろん記事なのですが、プロフィールがあることによって、初心者なりの信頼感が出た気がします。, そして、自分のアイコンやプロフィールがどのページにも表示されるため、ブログへの責任感と愛着が湧いてきますね。, ブログ初心者さんで、まだプロフィール表示させてないよ！という方は、ぜひチャレンジしてみてください！, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, 「障害があっても自由に生きる」が目標の21歳です。 WordPress管理画面→外観→テーマエディター→function.php(子テーマ), https://twitter.com/IYO_ChillaxJap/status/1213727335498694657, https://dattecathydamon.com/2020/01/31/cocoon-henkou/. 先天性心疾患があり、在宅学習・在宅ワークを中心に生活しています。, 小規模デザイン会社勤務→2年で退社→フリーランス見習いへ。 ダッシュボードのサイドバーにて[外観]>>[ウィジェット]をクリックします。 ウィジェットの一覧が表示されます。 「[C]プロフィール」　をクリックします。 ＊[C]プロフィールはテーマCocoon専用のウイジェットです。 プロフィールの設置場所選択のウィンドウが出ます [サイドバー]を選択します。 [ウィジェットを追加]をクリックします。 サイドバーの設定欄に「[C]プロフィール」が表示されて設定画面が開きます。 ①「タイトル」を入力します ＊「肩書きラベル」があれば入力します。 ②「画像を円形に … 「ここら辺でいちど整理しよう！」 こんにちは！紫莉(ユカリ)です。 ブログ成長記録2回目。 今回は目次のCSSカスタマイズに挑戦してみました！ もともとCocoonのスキンを使っているので、見た目はほぼ整っている状態。 ですが、目次デザインだけはしっくり... こんにちは！紫莉(ユカリ)です。 自分の似顔絵・写真など…アイコンとなる画像をアップロードしましょう。, 画像アップロードの下にある「プロフィールページURL」には、プロフィール記事のURLを入力します。 SNSも正しくリンクされているかチェックしてください。, 私の使っているスキンの問題なのか、SNSアイコンの初期設定デザインがあまり見やすくなくて…, アイコンが小さくて目立ちにくいですし、Instagramのアイコンが単色なのも気になります。, アイコンサイズが大きくなり、円形になりました。 ここにプロフィール記事のURLを入れることで、プロフィールの名前部分をクリックすると、そのページに遷移するようになります。, サイトのサイドバーを確認してみると、アイコンや自己紹介文が反映されているかと思います。 (※追記：もしもアフィリエイトにてAmazon審査に通ったため、現在はリンクを貼り替えております... こんにちは！紫莉(ユカリ)です。 ということで、昨日カテゴリーをいじったりしていまし... 【Cocoon】簡単3ステップ！記事本文にYouTube動画を埋め込む方法【ブログ成長記録】, 【正直な感想】Amazonで無印良品のアイテムが販売開始！購入できる商品は？品揃えは良いの？, 宗教画が楽しく学べる！「名画の謎 旧約・新約聖書篇(著・中野京子)」感想レビュー【ネタバレ有】, クラウドソーシング、デザイン初心者にはコンペ形式がおすすめ！【クラウドワークス感想あり】, 【Cocoon】ブログカラー変更！パステル調のグラデーションにしました【ブログ成長記録】. 今回は目次のCSSカスタマイズに挑戦してみました！ で、初めてAmazonの商品リンクを入れることに挑戦したんですが... です。, こちらの▼マークをクリックすると、ウィジェットを表示させたい場所を選ぶことができます。 ブログ成長記録2回目。 昨日のブログ↓ Cocoonに慣れすぎてWordPressの標準カスタマイザーが使えなくなったさいとう（@S41T0H ）です。 今回は最高のWordPress向け無料テーマこと「Cocoon（コクーン）」 のカスタマイズシリーズ第17弾（！ ）として、「プロフィールボックス」（ウィジェットで挿入できる「[C] プロフィール」）のデザイ … WordPressのテーマCocoon(コクーン)でプロフィールを設置する方法をご紹介します。ブログを運営していく上でユーザーへの信頼性を考えるとプロフィールは間違いなく設置するべきです。 自由に自己紹介文を記入しましょう。, 私はまだ「私はこんな人！」というキャッチフレーズ的なものが定まっていませんが、一応それっぽく簡潔にまとめてみました。, 「あなたのプロフィール」の下の方に、プロフィール画像をアップロードする項目があります。 ・SNSアイコンのカスタマイズ Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。 配色のCSSカスタマイズ(グラデーションを使う) アイコンの配色変更 Cocoonのサイドバープロフィールの背景に画像を設定する方法を書き残しておきます。 縦幅や横幅の調整も超簡単にできます。 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は、記事を書いた人ごとに、プロフィールが表示される仕様になっています。, プロフィールを設定するには、WordPress管理画面の「ユーザー → あなたのプロフィール」を選択してください。, プロフィール画像は、Gravatarに登録して画像をアップロードすることで、設定できます。, ただ、いちいちGravatarにWEB登録するのは面倒くさいです。少なくとも僕はそうでした。, なのでCocoonでは、プロフィール設定画面から、直接プロフィール画像をアップロードして利用できるようになっています。, 設定を行うには、プロフィール画面の1番下の方にある「プロフィール画像のアップロード」項目の「選択」ボタンを押して画像をアップロードしてください。, プロフィール情報を設定するには、同プロフィール画面にある「プロフィール情報」に記入してください。, それぞれの投稿者のSNSページをボタン表示するには、「連絡先情報」の入力項目にURLを書き込んでください。, あとは、ウィジェット画面から「プロフィール」ウィジェットを表示したいウィジェットエリアに置くだけです。, 無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。, 性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。 それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。, ◎安く始められる ◎LiteSpeedを用いた高速サーバー（完全SSD） ◎http/3（高速化プロトコル）に対応 ◎東京・大阪でリージョン選択が可能 ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎ディスク容量が多い ◎転送量が多い ◎毎日無料バックアップ（14日分） ◎DBは14日以内なら無料自動復旧可能 ◎ファイルも14日以内なら無料自動復旧可能 ◎アダルト・出会い系サイト可 ◎ドメインとサーバー代のチャージ払いが可能 ○サーバ引っ越し依頼が可能（有料）, 1年以上の契約をする場合は、クーポンコード入力でさらに10％割引（※2020/12/31まで）。, とにかく速い。サイトに表示スピードを求めるならココ。 管理画面がシンプルで使いやすい。, ◎nginxを用いた高速サーバー（完全SSD） ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎ディスク容量が多い ◎転送量が多い ○http/2（高速化プロトコル）に対応 ◎毎日無料バックアップ（14日分） ◎DBは14日以内なら無料自動復旧可能 ◎ファイルも14日以内なら無料自動復旧可能 ◎サーバ引っ越しツールあり（無料） ○サーバ引っ越し依頼が可能（有料） ◎ドメインとサーバー代のチャージ払いが可能, 安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。, ◎nginxを用いた高速サーバー（完全SSD） ◎老舗サーバーなので安定感抜群 ◎ディスク容量が多い ◎転送量が多い ◎同サービス内でドメイン管理が可能 ○http/2（高速化プロトコル）に対応 ○毎日無料バックアップ（14日分） ○DBは7日以内なら無料自動復旧可能 ×ファイルは有料かつ手動での復旧 ×プラン変更でCPUのスペックアップができない ×プラン変更しても即時反映されない ×アダルト・出会い系サイト不可, 常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。 LiteSpeedやHTTP/2を日本で初めて導入したサーバー。, ◎LiteSpeedを用いた高速サーバー（完全SSD） ◎http/3（高速化プロトコル）に対応 ◎プランのアップ・ダウングレードが自由自在 ◎同サービス内でドメイン管理が可能 ◎転送量が多い ◎ディスク容量が多い ◎毎日無料バックアップ（14日分） ◎DBは14日以内なら無料自動復旧可能 ○ファイルは14日以内なら無料復旧可能（※手動） ◎アダルト・出会い系サイト可 ◎ドメインとサーバー代のチャージ払いが可能 ○サーバ引っ越し依頼が可能（有料）, 格安な値段で始められる高機能サーバーです。 性能も備えつつ最安ならここ。 ただし少し機能は弱い。, ◎LiteSpeedを用いた高速サーバー（完全SSD） ◎激安プランが用意してある ◎値段あたりのスペックが高い（コスパ良し） ◎サーバ引っ越し依頼が可能（無料） ◎アダルト・出会い系サイト可 ○http/2（高速化プロトコル）に対応 △プランのアップは可能だがダウンは不可 △毎日自動バックアップ（1日分） △前日のバックアップからのみ復元できる（無料）, こちらの説明に従ってプロフィールを作成して、記事下に挿入してみましたが、左に画像が表示され、その右側にプロフィール文言が吹き出しに入った形で表示されます。わいひらさんのプロフィールのように四角の中に画像と文言が表示されるようにしたいのですが、どのように設定したらよろしいのでしょうか。アドバイスを頂ければ幸いです。, おそらく、スキンを使用されているからではないかと推測します。 スキンを使用している場合は、そういうデザインなので諦めるか、スキンを使用しないという選択しかないかと思います（※CSSをいじれない場合）。, スキンが原因でなかった場合は、ちょっと実際の状態を見ていないと何とも言えないかもしれません。 よろしければ、その際の書き込みは以下のフォーラムに該当ページのURLとともに書き込んでいただければと思います。https://wp-cocoon.com/community/, ご返答ありがとうございます。スキンをやめたらきちんとなったので、スキンの影響だとわかりました。どうもありがとうございました。, はじめまして、nomad_mieeと申します。 プロフィール　連絡先情報　Amazon URLにはどこのURLを入力すればいいのでしょうか？ よろしくお願いいたします。, 最も多いのは「欲しい物リスト」のURLを入力している人が多いかと思います。 ただ、著作がある方などは、著作者ページのURLを入力されている方もおられました。, ご返信ありがとうございます。そうなのですね、なるほど。てっきり、Amazonにもマイページがあるのかと思い、質問していました。, ▼デザインスキンを選択Cocoonデフォルトみるらいとシンプルブルーシンプルグリーンシンプルネイビーシンプルピンクシンプルレッドカラフルラインダークエンジダークルリダークカモノハ Veilnui Simplog (amber)Veilnui Simplog (blue)Veilnui Simplog (brown)Veilnui Simplog (cyan)Veilnui Simplog (deep orange)Veilnui Simplog (deep purple)Veilnui Simplog (green)Veilnui Simplog (indigo)Veilnui Simplog (light blue) Veilnui Simplog (light green) Veilnui Simplog (lime)Veilnui Simplog (orange)Veilnui Simplog (pink)Veilnui Simplog (purple)Veilnui Simplog (red)Veilnui Simplog (teal)Veilnui Simplog (yellow)Momoon（アクア）Momoon（グリーン）Momoon（オレンジ）Momoon（ピンク）Momoon（パープル）tecurio earthtecurio grapetecurio limetecurio mangotecurio moontecurio peachtecurio skytecurio soiltecurio sunsetBizarre-food（ブラックバーガー）Bizarre-food（ブルーカレー）Bizarre-food（グリーンソバ）Bizarre-food（ピンクワイン）Bizarre-food（ホワイトラーメン）Season（Spring）Season（Summer）Season（Autumn）Season（Winter）COLORS（レッド）COLORS（ブルー）COLORS（イエロー）COLORS（グリーン）COLORS（ピンク）COLORS（ブラック）Like SimplicityモダンブラックFuwari -海老茶(えびちゃ)-Fuwari -褐色(かちいろ)-Fuwari -海松茶(みるちゃ)-Fuwari -御召茶(おめしちゃ)-旅カメラいつもの深海いつものローズいつものコーヒーおでかけピンクおでかけブルーおでかけレモンサムライブルー（無印）サムライブルー（勝ち色）HygieneMetal Styles（１カラム）ミックスグリーンミックスブルーミックスレッドドット・ワインレッドドット・レイニーブルーm-soram-tomatoほんわかライトニングCocoon設定の「スキン」タブで変更できます。, Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】, Cocoon 2.2.3公開。WordPress5.5デフォルトのLazy Loadが優先されるように調整。.

.

Ɯ部平次 Âリフ Âンクリート 5, Nhk ȗ井彩子 4月から 4, Âリミナル Ãインド Âーズン2 13話 4, Ȼ ƒ影 F値 4, Âルフ Ãァリアント Âンフォートライン 7, Âデッセイ Rb3 ȩ価 4, Âオリア Wi Fi ǂ滅 9, Ãェデラー ś枝 Áんj 12, Áつ森 Ãーティーモード Âントローラー 4, Ãイクラpe Âップデート Âり方 16, Ãラゴンボール ȶ 80話 Ƅ想 5, Apple Pencil Ãッテリー交換 18, Ɩ三国志 ƭ将 ƈ力 23, ɦ川大学 Ű論文 Ɂ去問 45, Ãケットリーグ Ãイール ĸ覧 7, Ubuntu Sshd ņ起動 6, ȡ盟団 Áん J 15, 40代 Ãアカラー Âラデーション 8, Ņ調子 Âャフト 2020 4, ȇ転車事故 ƅ謝料 Ǜ場 44, Unity Android Build Support 9, Dz神年齢 Ľい Ǘ気 19, Cities Skylines ň心者 43, Ãンベル Ť Ãンツ 5, Âックイック 7in1 ǔクリーム 14, ƹを沸かすほどの熱い愛 Ƅ想 Ɩ 9, Apex Ő時接続 2020 6, Bts ƛ Ȫみ方 38,