アイキャッチ画像は左寄せがデフォルトらしいです。 これをどうにかしてセンタリング(中央寄せ)したいと思ったのですが font-family: 'Arvo', serif; font-family: 'Arvo', serif; Copyright © 2013-2020 booboomasa.com All Rights Reserved. #header .site-name-text{ Cocoonには既にたくさんのボックスがありますがデザインが窮屈だったりで少し扱いにくいなと思ってました。 この「48px」というのは、お好きな数字に調整してみてください。, .logo-header a span{ たくさんのスタイルが探せる「Google Fonts」というサイトを使います。, ②すると、下の画像の赤枠のようにコピペするためのコードが出てきますのでコピーしておきます。, ③ここからWordPressの操作に移ります。まず子テーマのheader.phpを開きます。, 管理画面から、「外観>テーマの編集」に進み、右上の編集するテーマが「Cocoon Child」になっていることを確認します。, きちんと子テーマに用意できたら、テーマヘッダー(header.php)というファイルが増えているはずですので、このファイルを選択して開きます。, ※これは43行目である必要は特になく、11行目の〜55行目のの間なら基本的にどこにコピペしても大丈夫です。, 今回のまめハムさんのカスタマイズでは、「Arvo」というスタイルを使っていますが、この部分があなたの好みのスタイルによって変わります。, つまり、違うスタイルであればこのコピペするコードが変わってきますので、スタイルを変更したいときは再度このサイトからコードをコピーしてきてください。, ⑤子テーマにコードをコピーできたら、今度は先ほどのGoogle Fontsのサイトで、下の画像の赤枠にあるコードをコピーします。, ⑥今コピーしたコードを、WordPress管理画面の「外観>カスタマイズ>追加CSS」に貼り付けます。, 下の画像がその貼り付ける場所なのですが、ただ貼り付けるだけでは足りないため、対象箇所のクラス名(.logo-header a span)を一緒に記載します。, 「CSSのクラス名」とは、簡単にいうと「各コードに名前をつけて、その名前の所にどんなデザインを適用するか?」指示するものです。, これにより、記事の本文やその他の文字には影響を及ぼさずに、ヘッダーのサイトのタイトル部分だけに文字の色・スタイル・大きさが適用されるというわけです。, .logo-header a span{ Yahoo!ショッピング. WordPressでテーマはCocoon。Cocoonは便利で様々な機能が搭載されています。目次を中央にする設定もあり。しかし実際のページを見ると中央になっていない。原因は本当は便利なはずのプラグインでした。このプラグインを「無効化」にすることでCocoonの設定通り中央表示に。 font-size:48px; サイトタイトルとキャッチフレーズを中央寄せにする 2017.07.03 2018.09.24 固定ページの幅をいっぱいに広げる方法(1カラム) 今回はCocoonのSNSシェアボタンのカスタマイズです。記事の拡散率が上がるように、シンプルながらもパッと目につくような丸型デザインにしてみました。Cocoonデフォルトのシェアボタンが優秀なので、後はオリジナリティを出すためにちょっとcssを加えてあげるだけ。 Cocoonのテーマのブログタイトルの文字をカスタマイズしました。もともとヘッダー画像に文字を入れて作っていた場合、文字を変えるときにはその画像ごと変更する必要があります。それを、コードを使って簡単に変更できるようにしました。 Copyright © 2019 ぽんひろ.com All Rights Reserved. color:#333; } 使いやすいワードプレスのデフォルトテーマ、Twenty Seventeen。このテーマでブログを始めて1カ月以上たちました。慣れてくると色々とカスタマイズしたくなってきます。今回は、初期状態では左寄せのヘッダー部分のサイトタイトル、キャッチフレーズを中央寄せにしてみます。ほんとに数十秒で終わります。, このように左に寄ったタイトルとキャッチフレーズを綺麗に中央寄せにするためには、タイトルの部分を個別に指定するのではなく、custom-headerでヘッダー全体を指定して、中央寄せの文を記述します。, サイトタイトルにテキストではなくロゴ画像を使用している場合も、先ほどの記述をすることによって中央寄せにできます。, 中央寄せに関しては以上で終わりですが、ついでにヘッダーの高さも調整したいと思います(完全にお好み設定です)。個人的な印象ですが、デフォルトの状態ではロゴの大きさに対してヘッダーの縦幅が広すぎる気がします。なんとなくもっさり感があるので、ヘッダーの縦幅を狭くしてスリムな印象に仕上げたいと思います。, ヘッダーの高さをちょうど良い具合に調整するには、style.cssに以下の記述をします。, これでヘッダーがスリムになって、ロゴとのバランスもとれたと思います。一方で、人によってはくっつきすぎとか窮屈とか思われるかも知れません。好みによって数値を変えてみてください。, 最後に一つ問題が。ホーム画面だけはほかの画面と仕様が違うのか、上記の記述をするとヘッダー部分が狭くなりすぎてロゴが隠れてしまいました。ホーム画面の調整だけは以下のように別途記述します。, 本当に一瞬でできました。この程度のカスタマイズでも超初心者の僕は分からない部分を検索しながら1時間くらいかけてやっています。道のりは険しいです。, Twenty Seventeenのテーマに関しては、ホーム画面だけはヘッダー部分の仕様が違うみたいなので注意です。ちなみに、僕はヘッダーに画像を使っていないので、画像を使っている場合はヘッダーの縦幅を狭くする際に画像の見せたい部分などの調整も必要になってくるかも知れません。. Cocoon設定で中央寄せにする設定をしていても左寄せになってしまう(下画像参照), 【VBA】5行で対策可能。Excel2010でPictures.Insertで画像貼ったらリンクが付く不具合の対象法, 【ダーツ】DARTSLIVE-ZERO BOARD分解した|折れたチップ処理、セグメント交換時に. 今回は、Cocoonのサイドバーの見出しをカスタマイズする方法をお届けします。Cocoonのサイドバーは、初期設定ではとてもシンプルなデザインになっています。この見出しの色やデザインを、自分好みにするカスタマイズです。どのカスタマイズもコピ Cocoon愛用者のみなさん、こんにちは!ぽんひろ()です。今回は タイトルを自由に入力できるおしゃれなボックス を作ります。. まとめると次の通り。 ヘッダー幅 < 1240pxの場合:画像の真ん中を中心に幅だけ変わる。 ヘッダー幅 > 1240pxの場合:途中から中央に向かって拡大し … 楽天. }, .logo-header a span{ こんにちは、WEBデザイナーのおかぴーです! WordPressで子テー[…], この記事の「編集したいテーマを親テーマから子テーマにインストールする流れ」を参照してください。, STORKの親テーマ(jstork)から子テーマ(jstork_custom)への操作方法を画像を使って解説していますが、, Cocoonの場合は親テーマ(cocoon-master)から子テーマ(cocoon-child-master)と名称が変わるだけで、操作方法は同じです。, まずは文字スタイルを変更です。 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。 Cocoonのテーマのブログタイトルの文字をカスタマイズしました。もともとヘッダー画像に文字を入れて作っていた場合、文字を変えるときにはその画像ごと変更する必要があります。それを、コードを使って簡単に変更できるようにしました。 このサイトは「Cocoon」というWordPressテーマを使用しています。  先日別のサイト(そこもCocoon使用)でテーマのバージョンをアップしたら、カエレバのリンクの背景が変なことになってしまったのですが、原因を調べたところ... 【20年8月更新】オススメ・人気の練習用ダーツボード(ソフト・ハード)ベスト4(+スタンド), 【試乗】Audi A3 Sportback(2019年~)試乗レポート:軽快な走行が魅力、最安300万以下と価格も魅力?. Cocoonヘッダー画像が幅によって表示が変わる様子. これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o), 「リサーチ力・ターゲット理解力・考える力」を高める!収益化できるビジネスモデル作りを学べる無料動画, Cocoonの子テーマにheader.phpを用意(このファイルもカスタマイズします), 具体的にどんな人がその需要を求めているのか、また、その商品を提案することで具体的な悩みが解決できそうか?, 「秀でたものがない」と考えるのは勘違い。大事なのは「自分の持ち得る知識」と「ニーズ」の掛け合わせを見つけること, 思いついたことをなんとなく書いてるから、結局自分でも何を書いてるのかよく分からなくなる・・・. タイトル下にスッと配置されるんだ!と感動してたんですが。 何も設定は変えていないので、どうやらCocoonでは. Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介して … 初心者向けにHTMLで右寄せ・中央寄せ・左寄せの指定方法を解説しています。テーブル作成の際などに役立つ知識なので、実際にソースコードを書きながら慣れていきましょう。align属性を使って説明して … font-family: 'Arvo', serif; WordPress(ワードプレス)無料テーマのCocoonを利用していますが、今回は外部メディア(YouTubeやツイート)の貼付けを中央揃えするCSSカスタマイズ方法のご案内。 こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーを選んだプロフィールはこちらへ。 稼げるブログを作りたい人はこちらへ。 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。, 今回は、Twitterでよく直接質問をしてくれる「まめハムさん」から、Cocoonのテーマでサイトのタイトルの文字をカスタマイズをしたいとの相談を頂きました。, おかぴーさん、こんにちは。今Cocoonの設定の「サイトのタイトル」の部分にブログのタイトルを入力しているんですけど、その文字をもう少し目立たせたくて。, 確かに、現状だと文字サイズが小さく、文字色も白のため背景に隠れてしまってる感じがあり目立ちませんね。, ここにはトップページへ飛ぶリンクもあるため、できれば大きくして目立たせた方が良さそうです。, この文字は、WordPressの管理画面の「設定>一般>サイトのタイトル」にブログのタイトルを入力している場合に表示される文字なので、同じように設定されていれば上の画像以外の文字スタイル・色・サイズにも変更可能です。, また、作業を始める前にFTPソフトを使って、Cocoonの親テーマから「header.php」を子テーマに用意しましょう。, 親テーマから、子テーマにFTPソフトを使ってファイルを用意する方法はこちらの記事で解説しています↓, おかぴー