fonts.google.com. b[a]=b[a]||function(){arguments.currentScript=c.currentScript Cocoonでブログ運営中だけど、検索上位表示が取れない。SEO対策や設定が悪いのかな？そんな方に読んで欲しい記事です。Cocoonは無料テーマなのに、SEO対策もされている超優良テーマ。検索上位を狙うためのSEO設定方法を徹底解説します！ d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) フォントと同じくSimplicity2からCocoonになったことで、メインカラム（本文）の幅が広くなりました。 Simplicity2は 680px でしたが、Cocoonは 800px 。 健康. WordPressブログの上部に表示されるサイトタイトルのフォントサイズを変更する方法です。 Lightning、Cocoon等の無料テーマを中心に、文字サイズを変更するサンプルコードを公開しています。 初心者の方でも対応できる内容です。 WordPressテーマ Cocoonでのフォント設定は「Cocoon設定」→「全体」→「サイトフォント」から出来ます。 WordPressのテーマを無料で高機能なcocoon に変更しましたが、ブログタイトルに少しインパクトが欲しかったので、フォントを変更しました。. モバイルサイトフォント. cocoonのサイトタイトルの文字の大きさ、フォント変更をしたい。 そのようなときは、style.cssに以下のソースコードを張り付けてください。 そうすれば、サイトタイトルの文字の大きさを変更できます。 }, このコードをstyle.cssに追記したのですが、サイトタイトルの文字の大きさが変わりませんでした。, というか、無反応でした。そのことから、このソースコードでは、サイトタイトルのフォント変更、文字の大きさ変更はできないと思いました。, いずれにしても、上記のソースコードでは、サイトタイトルのフォント変更はできませんでした。, なんとなく、「なぜできないんだ？」とイラっとしました。けっこう簡単な問題で、よくある問題なのに、なんでできないのと思いました。, そして、端的に簡単で分かりやすい説明記事がありませんでした。なので、サイトタイトルのフォント変更するのに苦労しました。, 以前、cocoonの設定でわからないことがあり、フォーラムに質問しました。そして、僕の小さな質問に「かうたっく」さんが親切に答えてくれました。, こちらの記事と、他のいろいろな記事をつなぎ合わせて、正しいと思うソースコードをstyle.cssに張り付けてみました。, cocoonのサイトタイトルの文字の大きさ、フォント変更をしたい。そのようなときは、style.cssに以下のソースコードを張り付けてください。, （少なくとも僕は、これでサイトタイトルのフォント変更ができました。文字の大きさを変更できました）, たぶん、cocoonの設定のどこかを少し変更するか、style.cssにコードを追記すれば、フォント変更はできるとは予想してました。, でも、的確に簡単に誰にでも、わかりやすく書かれた記事がなく困りました。フォーラムの回答も、あっているのかなと疑問に思いました。, まあ、cocoonのサイトタイトルの文字の大きさを変更したいだけだったのに、けっこう苦労しました。, でも、僕は文句は言いません。無料でこんなに素晴らしいテーマを使わせていただいてるのですから・・, cocoonでサイトタイトルの文字の大きさを変更したい。そのようなときは、僕が説明したやり方で変更してみてください。できるはずです。, テーマ(cocoon)で、ヘッダー背景画像の横幅をbody幅に合わせ、そして、固定させて表示させたい・・。今回は、このカスタマイズ方法についてまとめておきます。, cocoon（テーマ）で、childのCSS変更をしてみるが、「トップに戻るボタン」の変更ができない。困った・・。そこで今回は、この問題の解決策を考えてみます。, cocoonの「投稿SNSボタン下」に関連コンテンツを設置したい・・。そこで今回は、その手順をご説明します。（ちなみに、僕のような素人向けの記事です）, 【cocoon】トップページの記事一覧リストの説明文をdescription表示にする方法, テーマをcocoonに変更し、トップページを見たら、記事の説明文がディスクリプション内容で表示されていない。困った。そこで今回は、この問題について考えてみます。, ブログをしているたかぴろ☆です。ヘッダー下にエリアを設置して、アピールしてみたくなった・・。そこで今回は、ヘッダー下にエリアを設置する2つの方法をご紹介します。, wordpressの無料テーマ、「cocoon」の吹き出しイラストの、キャプチャー画像記事を保存用に作りました。よろしければ、ご活用ください。, 謎が解けた！Win10で解像度がフルHD(1920x1080)以上に設定できない理由と事例, Windows10の標準メールは使いにくい！代わりとなるおすすめメーラーソフトのご紹介, 【iphone】自動更新をオンにしてiosが最新にならない！意外な落とし穴と対処法, もしも「かんたんリンク」のボタンがデフォルトでカラフルになった！（20201年2月版）, 小型テレビを新規購入するときはどのネット通販サイトがよいか？～突然テレビが壊れたときの買い替え対処法. WordPressのテーマを無料で高機能なcocoonに変更しましたが、ブログタイトルに少しインパクトが欲しかったので、フォントを変更しました。, Google FontsというWebフォントを使用することで、各々のデバイス内に 存在しないフォントでも使用できるようになります。 現在はサイトロゴを使った運用に変えてみましたが以前はこんな感じ。, タイトルを入れたヘッダー画像作って設定する方法もありますが、画質が荒くて、大事なタイトルがボヤけてしまう事があります。, しかしながらGooglefontsを使用するということは、サイト表示のスピードに影響が出る場合もありますのでご注意を。 サイトスピードは遅いとSEO上評価が下がります。, 紹介した設定方法は、全部スマホで完結できます。ちょっとやりづらいですが。 ブログの大概のことはスマートフォンでできてしまいますね。スマートフォンだけで出来るWordPressでブログを立ち上げするときのやることリストと手順。, 設定したいフォントが決まったら、右上の➕マークをクリック。自分のブログタイトルの場合はJosefin Sansを選択。, フォントの種類によっては太さ、italic(斜めに傾ける)も選択できる。customizeをクリックすると太さの選択ができる。 太くしたければboldを選択。, すると、画面下部に「Family selected」と表示されるので、タップして、↗マークをクリック。, すると、「1.Enbed」に選択したフォントのhtmlコード、「2.specify in css」にcssコードが表示される。, まず、htmlコードは
内に反映させる必要がある。外観→テーマの編集に進み、Cocoon childを選択したままで→tmp-userをクリック。, 自分のサイトをAMPに対応させているようだったら、amp-head-insert.php にも同じコードを書き込もう。 それだけでAMPページでも反映する。, 本来は親テーマのheaderに書き込むところですが、cocoonは素晴らしいテーマなので、小テーマからheader.phpに飛ばしてくれます。 テーマの更新があっても安心です。, .site-name-text{ font-family: ‘Josefin Sans’sans-serif; font-size: 70px; color:#ffffff; }, このコードはサイトタイトルのフォントの種類、フォントの大きさ、フォントの色を指定している。, もしもフォントサイズが変わらない場合はfont-size: 70px!important; と、!importantを追記してみよう。 『この指示を優先してね』というコードなので、反映されるはず。 このブログでは!importantがないと反映されませんでした。, /*ヘッダーブログタイトル文字上からの余白*/ #site-title{ margin-top:45px; margin-bottom:20px; }, 設定してみると、何故かパソコンではフォントが変わってもモバイルでは変化がないことがたまにあります。, 理由は分かりませんが、自分の場合は１日待つと変わっていたので、ちょっと待ってみましょう。 (キャッシュをクリアしてみたけどすぐには変わらなかった), ブログタイトルとキャッチフレーズの位置を変更したい場合はこちらの記事を参考にして下さい。, 以上、wordpressテーマCOCOONでブログタイトルをGoogleフォントに変更する方法でした。, 節約の為にDIY に勤しむサラリーマン。 元芸人。元ピザ職人。 電子機械工学科卒。 エネルギー管理士。電気主任技術者。電気工事士。FP3級。甲種危険物取扱者。建築物環境衛生管理技術者。 ピルクルがないと生きていけない。, スマートフォンだけで出来るWordPressでブログを立ち上げするときのやることリストと手順。. 背景画像が固定 … モバイル端末で閲覧した際の、フォントサイズが設定出来ます。 ※推奨は12px位が適切です。 文字の太さ. 先ほどのグーグルフォントのボックスに戻ります。 ブログ全体のフォント設定の方法. (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); サイトタイトルを左寄せにする. Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。見出し1（H1)は記事のタイトルで使われますので、記事本文中はH2～を利用します。デザイン設定する為の指定方法と、まるごとコピー利用できるコードを載せています。カスタマイ c.getElementById(a)||(d=c.createElement(f),d.src=g, Cocoonでは、非常に親切設計であるため、簡単にフォントを設定することができます。 WordPress管理画面から、 【 Cocoon設定＞全体＞サイトフォント 】で簡単に変更することができます。 WordPressの無料テーマ「Cocoon（コクーン）」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。 Wordpressの無料テーマ、Cocoonに付属している文字フォントのサンプルです。画像ですので、実際の画面とは表示が異なります。画像では若干ぼやけたように見えると思います。また、フォントはお使いのパソコン環境などによって表示が変わる可能 サイト内でのフォントの文字太さを変更できます。 デフォルトの400で十分と思われます。 少なくなると細く、多くなると太くなります。 Cocoon. Cocoonをアップデートしたらフォントが変わった？WordPressのテーマにCocoonを使用しています。2020年3月1日、Cocoonのバージョンを「2.1.2.1」から「2.1.3.1」に更新しました。すると、サイトの見た目が変わ Cocoonロゴ画像の設定 Cocoonヘッダー画像の設定 ヘッダーロゴは指定しないとテキストタイトルが表示されます。 ロゴと背景が一体化された画像を使う場合は、CSSでタイトルを消す必要が … Cocoonのサイトマップ作成方法. 先ほどのグーグルフォントのボックスに戻ります。 投稿ページのタイトルのフォントサイズも解決できました。 このたびは2度も質問にお答えくださいましてありがとうございました。 困っていましたので本当に感謝しております。 フォントの色変更についても教えていただいたサイトを参考に勉強します。 フォントサイズなどの各種属性も指定できるので、ちょっとしたタイトルであれば、バナー画像を作るよりも簡単に柔軟な文字に仕上げることができます。 Google Fontsを使ってサイト名のフォントを指定する. WordPress テーマCocoonの全体設定をわかりやすく説明します。サイトキーカラー・サイトキーテキストカラー・背景色・フォント・フォントサイズなどを設定。図解入りで説 … 「cocoon」は高性能だし便利な機能も. Cocoonをアップデートしたらフォントが変わった？WordPressのテーマにCocoonを使用しています。2020年3月1日、Cocoonのバージョンを「2.1.2.1」から「2.1.3.1」に更新しました。すると、サイトの見た目が変わ というわけで、今回の投稿は、『タイトル・見出しの表現力を高める！ フォントの種類と、デザインとアイデア？』と題して、まず、表現力を高める上で重要となる、フォントの種類について紹介していく。続いて、さまざまなメディアや媒体でよく使われている、デザインとアイデアに … こんにちは！ サイトのタイトルを「567×283」で作成したのですが、小さく表示されてしまいます。。。推奨サイズなどあるのでしょうか。よろしくお願い致します。 Cocoonのヘッダー（サイト名）の位置を変えたいWordPress 無料テーマ Cocoon は色々な設定で自分好みのサイトにカスタマイズができる様になっています。ですが、本当に細かいところに関しては自分で行っていく必要があります。今回、 → サイトタイトルの文字の大きさを変える方法について | カスタマイズ相談 | Cocoon フォーラム, cocoonのフォーラムの回答記事なので、これでサイトタイトルの文字の大きさを変更できると思いやってみました。, ちなみに、以下のソースコードを子テーマのstyle.cssに追記すれば、サイトタイトルのフォント変更ができるとのことでした。（フォーラムの回答によれば）, .site-name-text-link { WordPressブログの上部に表示されるサイトタイトルのフォントサイズを変更する方法です。 Lightning、Cocoon等の無料テーマを中心に、文字サイズを変更するサンプルコードを公開しています。 初心者の方でも対応できる内容です。 ブログのタイトルロゴ画像を作成し、Cocoonのヘッダーに設定する方法を紹介します。iPadアプリとWindowsフリーソフトで世界にひとつだけのタイトルロゴを作成。ブログの顔ともいえるタイトルをおしゃれにカスタムしましょう！ WordPressテーマ Cocoonの設定フォントを「源ノ角ゴシック（Webフォント）」から内蔵フォントの「游ゴシック体, ヒラギノ角ゴ」に変更してみました。これにより「PageSpeed Insights」などのスコア向上を目指します。 こんにちは。さとみです。コクーンのテーマを使っています。ヘッダーに画像を挿入したのですが「ブログタイトルが邪魔だぞ」(； ･`д･´)と思いました。なんとか削除したい！と調べたところ、解決しましたのでお伝えします♪これを削除します！ ②サイトフォント・モバイルサイトフォントを変更 メディアファイルの画像サイズを変更する. Cocoonは無料のテーマなのにカスタマイズがしやすいと、かなり評判がいいWordpressテーマです。僕もその特徴に魅了されて、今でも愛用していますが、トップページをおしゃれにカスタマイズしていませんでした。ちょうどコーディングの勉強をしていたので、参考にしてみてくださ … サイトタイトルを左寄せにしましょう。 これはコードの記述も簡単にできますね。 要素を調べたところ、class=”logo”で行えるようです。 cocoonチャイルドのcss.styleに下記のコードを記述。.logo { text-align: left; } ワードプレスコクーン 初心者のかたやコクーンの設定をしている方、コクーン設定の中にあるタイトルタブの入力はしてみましたか？サイトタイトルやサイトの説明の入力なのですが、公開した時に見やすいように設定できているとアクセスが増えるチャンスかも。 Cocoonでブログ運営中だけど、検索上位表示が取れない。SEO対策や設定が悪いのかな？そんな方に読んで欲しい記事です。Cocoonは無料テーマなのに、SEO対策もされている超優良テーマ。検索上位を狙うためのSEO設定方法を徹底解説します！ WordPress テーマCocoonの全体設定をわかりやすく説明します。サイトキーカラー・サイトキーテキストカラー・背景色・フォント・フォントサイズなどを設定。図解入りで説明します。 WordPressの神テーマCocoonをインストールしたら記事を書く前に、最初にしておきたい初期設定を1ページにまとめました。要約すると新規サイトを作成する時などのカンニングペーパー的なものです。誰かのお役に立てれば幸いですが、記事は長いです。（笑） Cocoonでのサイトマップ作成と表示の方法を解説します。 サイトマップを作成するには、固定ページ⇨新規追加で固定ページを新しく作成します。 次に、固定ページのタイトルを設定します。(ここでは”目次”とします。 Cocoonのテーマのブログタイトルの文字をカスタマイズしました。もともとヘッダー画像に文字を入れて作っていた場合、文字を変えるときにはその画像ごと変更する必要があります。それを、コードを使って簡単に変更できるようにしました。 Cocoon設定ページ「 全体 」タブクリック Cocoon設定ページ内「全体」タブ内 「サイトフォント」-「フォント」 ここをクリックするとブルダウンでフォント名が表示されます。 結構長くなる傾向もあったので . Cocoonでのサイトマップ作成と表示の方法を解説します。 サイトマップを作成するには、固定ページ⇨新規追加で固定ページを新しく作成します。 次に、固定ページのタイトルを設定します。(ここでは”目次”とします。 (adsbygoogle = window.adsbygoogle || []).push({}); 僕のcocoonの小さな悩み、「サイトタイトルのフォント変更」ですが、よくあることです。, この問題で、ネットで調べてサイトタイトルの文字の大きさ変更、フォント変更をしたのですが、簡単にはいきませんでした。, cocoonでサイトタイトルの文字の大きさを変更したい。よくあることです。でも、ネット上で簡単にわかりやすい説明がありませんでした。, そこで、備忘録として残しておこうと思いました。僕と同じ問題を抱えている人の参考にしてください。. サイトのタイトルの画像が小さく表示されてしまう. font-size: 26px; WorpPress管理画面 「Cocoon設定」-「全体」. msmaflink({"n":"ロジクール MX MASTER 2S ワイヤレス マウス MX2100CR Bluetooth 無線 ワイヤレスマウス windows mac iPad OS グラファイト 国内正規品 2年間無償保証","b":"Logicool(ロジクール)","t":"","d":"https:\/\/m.media-amazon.com","c_p":"\/images\/I","p":["\/31jLZc7z4SL.jpg","\/41mKvU+RLiL.jpg","\/515hrRFA+WL.jpg","\/41Icr5FeQ8L.jpg","\/51+EAgRW1CL.jpg","\/41mLWTyi-tL.jpg","\/41SEJesNSML.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/B08K8PH9G3","t":"amazon","r_v":""},"aid":{"amazon":"1671106","rakuten":"1671105","yahoo":"1671107"},"eid":"BhdCT","s":"s"}); たぶんですが、cocoonでサイトタイトルの文字の大きさを変更したい。そこでググってみる。そうすると、この記事にぶつかると思います。, 参考記事 こんにちは、さいとう（@S41T0H）です。今日も今日とて喫茶店でブログ執筆中です。ところで、サイコーなWordPress用無料テーマ「 cocoonのサイトタイトルの文字の大きさを変更したい・・。よくあることです。そこで今回は、cocoonのサイトタイトルの文字の大きさ変更について考えてみます。, simplicityからcocoonにテーマを変更。そして、サイトタイトルを見てみる。なんとなく、デフォルトだと小さく感じる・・。, そこで、cocoonのサイトタイトルの文字の大きさを、もう少し大きくしたいと思いました。. サイトのタイトルフォントを変えることができました。おそらく追加CSS画面で変更が反映されると思います。サイトタイトルが思い通りになっているかどうか確認しましょう。 function.phpを更新したらエラー画面が出た. WordPress. ブログのタイトルロゴ画像を作成し、Cocoonのヘッダーに設定する方法を紹介します。iPadアプリとWindowsフリーソフトで世界にひとつだけのタイトルロゴを作成。ブログの顔ともいえるタイトルをおしゃれにカスタムしましょう！ フォントサイズを少し小さくしたい. というわけで、今回の投稿は、『タイトル・見出しの表現力を高める！ フォントの種類と、デザインとアイデア？』と題して、まず、表現力を高める上で重要となる、フォントの種類について紹介していく。続いて、さまざまなメディアや媒体でよく使われている、デザインとアイデアに … 多くhtmlが得意ではない私は本当に. Making the web more beautiful, fast, and open through great typography. Cocoonでビジネスサイト的な物は、作れないのか？と探していたら . Cocoonの設定で変更できるのでしょうか？ それともCSSなんでしょうか？ … PC. フォントサイズなどの各種属性も指定できるので、ちょっとしたタイトルであれば、バナー画像を作るよりも簡単に柔軟な文字に仕上げることができます。 Google Fontsを使ってサイト名のフォントを指定する サイトのタイトルに複数のフォントを使用している場合、フォントライブラリ全てを読み込まず、必要な文字のみを読み込む したがって、サイトのタイトルがKinstaだとすると、次のようなスタイルシートを作成することで、パフォーマンスを少し改善できます。 Cocoonでデフォルトで使えるフォント. こんにちは、Cocoonを利用させていただいていますtoshichanと申します。 サイトタイトル等のカスタマイズについてご教示ください。 添付画像のようにヘッダー画像の中に表示されているサイトタイトル及びキャッチフレーズの文字の表示位置や大きさを変更するにはどのようにすれば … サイトタイトルが長く、モバイル表示にするとタイトルと検索ボタン（虫眼鏡のボタン）がかぶってしまいます。 検索ボタンの位置を変更するか、非表示にするにはどのように操作すればよいでしょうか。 よろしくお願いいたします。 回答を見る headcocoro 2019/07/26 . Cocoon設定ページ「 全体 」タブクリック. cocoon関連記事のタイトルや画像周りなどをカスタマイズ。フォントサイズを小さくしましたが、コードを適用するには!importantが必要。太さも普通にして画像の枠線も色と丸みをつけてみ … Cocoonでサイトのタイトル名をCSSで操作するためのクラスは「.site-name-text」ですので、そのクラスに対してグーグルフォントが適用されるようにCSSを設定していきます。. Cocoonのサイトマップ作成方法. お問い合わせ. フォント自体をサイトやパソコンにインストールすることは全く不要です。 設定したいフォントを探す. Cocoonロゴ画像の設定 Cocoonヘッダー画像の設定 ヘッダーロゴは指定しないとテキストタイトルが表示されます。 ロゴと背景が一体化された画像を使う場合は、CSSでタイトルを消す必要が … Wordpressの無料テーマ、Cocoonに付属している文字フォントのサンプルです。画像ですので、実際の画面とは表示が異なります。画像では若干ぼやけたように見えると思います。また、フォントはお使いのパソコン環境などによって表示が変わる可能 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; Cocoonでサイトのタイトル名をCSSで操作するためのクラスは「.site-name-text」ですので、そのクラスに対してグーグルフォントが適用されるようにCSSを設定していきます。. 超初心者やブログ始めたての人用の、Cocoonタイトルロゴのフォント変更方法です。超初心者用にわかりやすく画像付きで説明しています。設定しながら記事を書いたので、同じようにすれば確実に出来ますので、頑張って挑戦してみましょう。 まずは、Google Fontのページを開きます。 Google Fonts. このサイトについて. ブログ初心者がブログの顔となるタイトル部分をカスタマイズに挑戦しました。今回は、Cocoonでタイトルのカスタマイズとして、フォントの種類やフォントサイズを変更することで、ブログのイメージを変える方法をご紹介します。 Cocoon設定ページ内「全体」タブ内 「サイトフォント」-「フォント」 ここをクリックするとブルダウンでフォント名が表示されます。 Cocoonで設定できるフォントは11種類 こちらのブログを見つけました、非常に助かりました。 お聞きしたいことが一点あるのですが、新着情報の投稿のタイトルやフォントサイズは. cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントのサイズや色、余白や位置を調整し全体はカラム幅にして見やすくなりました。パステルカラーでスタイリッシュに。 ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントのサイズや色、余白や位置を調整し全体はカラム幅にして見やすくなりました。パステルカラーでスタイリッシュに。 【Webフォント】をご存じですか？通常、フォントと言えばパソコンの中に保存されていて、ワードやエクセルなどで自分が使いたいフォントに変更したり、インストールしますよね。じゃあ、ウェブサイトでフォントを変えたい場合はどうしたらいいんだろう？ cocoonにヘッダー画像、ブログタイトル画像を設定したいですか？画像の作り方と設定方法をセットで解説しています。あなたのヘッダー画像のヒントになれば幸いです。okoblookoんにちは。マイナスからブログを始めたオコブロです。 WordPressの無料テーマ「Cocoon（コクーン）」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。 いろいろな知りたいを書き記しています. こんにちは、さいとう（@S41T0H）です。今日も今日とて喫茶店でブログ執筆中です。ところで、サイコーなWordPress用無料テーマ「Cocoon」（→5ステップ簡単Cocoonコピペカスタマイズ公開中です）では、標準機能でWebフォント ホーム. Wordpress無料テーマCocoonを使って、おしゃれなブログデザインにカスタマイズされているブログサイトをまとめてみました。シンプル・かっこいい・かわいい・オリジナリティの4部門でおしゃれジャンルを分けています。 WordPress. WordPressテーマ「Cocoon」のカスタマイズ方法が分からない初心者向けに、スキン作成者がカスタマイズツールを配布します。自作のオリジナルスキンSILK（シルク）、Cocoonテーマ専用プラグインなど多数あり！ 作者様に感謝しています。 そんな折、私がつける記事タイトルは. 音楽. 以前からPCでの記事タイトルの.ミヤリサン ビオフェルミン どっち, ガレリア キーボード 説明書, Conoha マイクラ Op権限, あつ 森橋 の下 通れる, シュタインズゲート ダイバージェンスアソート 中古,
コメントは受け付けていません。