WordPress のテーマ Cocoon のテキスト入力で文字色・背景色の変更、特に文字の一部の色変更についてGutenbergの機能とWordpressプラグインEditorsKitを使用した方法を紹介しています。 ブログ記事は誰が読んでもわかりやすい、読みやすいを意識していきましょう。 読みやすさを意識するとあなたのブログはより多くの人にシェアされ読まれるはずです。 たとえば、「この文章は表現が難しすぎやしないか?」「高齢者が見ても読みやすい文字のサイズか? 文字の背景色をつける方法は 楽天ブログからはてなブログに移行してきて、おそらく唯一の不満?(笑) カラーコード表を参照→html編集 の手順を踏むわけですが、その時使用するhtml用のコマンドがこちら。 カラーコード表を参照→html編集カラーコード表を参照→HTML編集, カラーコード表を参照→HTML編集, しかし、全てをHTMLで表記するとやはり編集スピードが下がってしまいます。そこで、編集スピードを上げるための小技を紹介します。, まず、文字に対してつけられるエフェクトの種類とそのショートカットキーをまとめます。, 太字(bold): Control + [B] または Command + [B], 斜体(italic): Control + [I] または Command + [I], 下線(under line): Control + [U] または Command + [U], 背景色をつけるために覚えるHTMLの書き方は大して難しくありませんが、何と言ってもカラーコードは覚えきれません。, そこで、文字の色変更ツールを使ってカラーコードをHTML編集欄に出してしまえばいいのです。そして、, 見たまま編集で文字の色をつけた後でHTML編集でbackground-をcolorの前に書き足す, ちなみに、白抜き文字を作るときの背景色に黒を選ぶ場合は、黒がデフォルトの色のため、HTML編集画面に文字コードが表示されません。ですが、黒の文字コードは簡単。, さらにちなむと、30色選べるカラーの一番左上が#000000ですが、デフォルトの文字は一番上、左から二番目です。, こうなります。って読めますよね。じゃぁこのデフォルトの濃いめの灰色の文字コードは??, こんな時に限らず、ウェブを閲覧していてすごく綺麗な色使いだなと感じたウェブサイトでは、デフォルトの色ではなく微調整した独自の色を使っていることがあります。, Windows 7, 8, 10は対応していると書いてありませんが、私は8と10で問題なく使えていました。, ・For Mac: DigitalColor Meter(標準アプリケーション、Finder→アプリケーション→ユーティリティ), デフォルトでシンプルなスポイトツールが使えるというMac神。ちなみにカラーコードは10進数ではなく16進数で表示されたものを#の後にR,G,Bの順で書いていくことになります。, [表示]→[値を表示]→[16進数]([View]→[Display Values]→[as Hexadecimal]), これがあれば、PCの画面上全ての色を自在にキャプチャーできるので、例えばMacアプリケーション「Photos」のアイコンなんかを活用すれば, また、ハイライトに使う色を選ぶ際には、干渉し合わない共存できる色同士を組み合わせないといけません。そんな時により良い色を作り出すためのおすすめウェブアプリを2つ紹介したいと思います。, どちらも、色の明暗、強度などを微細に調整でき、ある程度ランダム要素も含めて新たな色を作り出すことができるので非常に便利です。, この記事が参考になった!とか面白かった!と思ったらぜひはてブいいねをお願いします!, YMacさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog 今回は、はてなブログの文字装飾の方法を図解でお伝えします。文字ばかりで真っ黒な記事よりも、文字や背景に色がついていたり、文字の大きさや下線でメリハリがついていた方が見やすいですね。, そこで今回は「最低限これだけは覚えておきたい文字の装飾方法」をまとめましたので是非マスターして下さいね。, 追記:当記事は2017年11月4日に書いたものを2019年11月20日再編集したものとなります。この記事に書かれている内容は最新版にアップデートしましたので安心してご覧ください。, 文章の目立たせたい箇所は文字色を変更しましょう。記事の編集画面に移動してください。, 古くなった情報などは消してしまうのではなく「打消し線」を入れると、過去との比較ができてユーザーにも便利です。, ちなみに私はブログアフィリエイトで人生が激変しました。もし現状が不安な方はぜひ私の稼いでいる秘密をご覧ください。, 文章を並べる時は単純に「・」と入力していくのではなく、正式な箇条書きのタグを使った方がSEO的にも効果があると言われています。, 1はそのまま選択したテキストでリンクされます。2は上記のようにカードのように挿入されます。, 記事の文中にリンクを貼りたい場合は1、「参考文献」のように文章の終わりにリンクを貼りたい場合は2を選択すると見やすいと思います。, プレビューではリンクがきちんと飛ぶか確認できないので一度公開して確認してブログをチェックしましょう。, 通常はリンクをクリックすると、今のページが閉じてリンク先が表示されますねそこで。今のページを残したまま新しいタブでリンクを開くようにする設定を解説します。, 実は私が稼げるようになった理由は美しいデザインや画像、文章力などの小手先のスキルを諦めて「最短で稼ぐためのノウハウに集中して取り組んだから」です。, 上記、「”」と「>」の間に、「target=”_blank”」をコピーして貼り付けてください。, このように記述します⇒ , ただ、はてなブログは文字の背景色の変更をHTMLで行う必要があります。これもとっても簡単なのでサクッとやってしまいましょう。, テキスト, 今回は上記「ひつまぶし」という文字の背景をピンク(カラーコードffc0cb)にしてみたいと思います。, 他人の著作物を自分の著作物の中に取り込む場合,すなわち引用を行う場合,一般的には,以下の事項に注意しなければなりません。, 今回は、はてなブログの文字色や背景色の変更、文字のサイズ変更や、リンク掲載、引用文の挿入の仕方などをお伝えしました。, HTMLを覚えれば、まだまだ色々なカスタマイズはできるのですが、稼ぐ事を目的とした場合そこまで凝る必要はありません。, ブログの本質は簡単に言うと「アクセスを集めて商品を紹介する事」ですね。記事の見た目も多少は大切ですがそれよりも重要なのは、「アクセスアップ」であったり「売るための文章術」を学ぶことだと思います。, 下記にてブログで大きく稼ぐために学んでおきたいノウハウをまとめましたので是非ご一読いただければと思います。, 【追伸】 最近、一軒家の賃貸物件が増えてきました。愛娘も、あと半年もたてば歩き始めるころだと思うのでそろそろ引越を考えようかな・・・と思う今日この頃です。. © 2020 WordPressを徹底解説 - インストールから集客できるブログを作るまで. だけど背景画像のデザインや背景色によっては、文字が読みにくくなっちゃう。 ブログのデザインは可愛いとかおしゃれよりも、ブログを見に来た人にとって見やすいかどうかが大事。 なのでデザインを変更したよ。 ⇒「北っちさんって誰? こんにちは、愛弓です。 ブログを書くのにおススメなのは【背景色:白、文字色:黒に近いグレー】だそうです。 『本当は茶色の文字がいいな~』『背景は、淡い色にしたいんだよな~』という気持ちをぐっと抑えて、【背景色:白、文字色:グレー】にしてましたが… アメブロのボタンや文字色、背景色を変更する方法をご紹介します。デフォルトのcssに詳しくコメントが書いてあるので、基本的には該当箇所を探してカラーコードを変更するだけでokです。初めてアメブロカスタマイズをされる方、「新デザインとか旧デザインって何? WordPressのテーマ Luxeritas の文字全部の色変更と一部文字の文字色・背景色を変更します。次に、Luxeritas のカラーパレットを拡張をしたあと、プラグインを使用してさらにカラーパレットを追加してみましょう。, ページ作成の段落ブロックで右サイドにある色設定のカラーボタンを、例えば右図のようにクリックすると, 次に、カラー変更したい文字を①ドラッグして段落ブロックメニューの②をクリックし③文字色をクリックする。, すでに赤色に変更している文字に①ドラッグをしながら②をクリックして③背景色を選択しますと, カラーパレットの設定があります。すべて色を自由に変更できますし、拡張枠が6個有り自由に設定が可能です。例として図のカラーに設定してみます。, さらにカラーパレットを増やすにはプラグイン Central Color Palette を使用します。, プラグイン追加で、キーワードに Central Color Palette と入力し検索します。, プラグイン一覧画面が表示され、「有効化しました」のメッセージと一覧リストの中に Central Color Palette が有ればインストールの終了となります。, パレット設定で①と②にチェックを入れて、Active タブで③をクリックすると黒カラーが出るので④をクリック。, +をクリックすれば何個でも作れますが、例として3個作成して画面下にある Save ボタンをクリックして設定を保存します。, 段落ブロックの右サイド色設定には拡張カラーに続いて新たなカラーが3個追加されています。, これで紹介は終わりですが、プラグイン Central Color Palette はこちらを参照してください。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, WordPressのプラグイン Simple CSS は画面がシンプルなので、初心者でも直感的に使えるプラグインです。 ブログを報告する. はてなブログの文字装飾方法を図解でご説明いたします。ブログの記事でよく使う文字色変更、文字の背景色、サイズ変更、下線、テキストリンク、引用文、箇条書きなどを中心にお伝えします。またリンクを別のウィンドウで開く方法など小技もお伝えします。 (3)自分の著作物と引用する著作物との主従関係が明確であること(自分の著作物が主体)。. 【グーテンベルク(Gutenberg)対応】WordPressブログの書き方を知りたいですか? 基本的なブログの書き方、エディターの使い方、ブログをおしゃれにする装飾の方法、投稿方法までを分かりやすく解説 … WordPress のテーマ Luxeritas の文字全部の色変更と一部文字の文字色・背景色を変更します。次に、Luxeritas のカラーパレットを拡張をしたあと、プラグインを使用してさらにカラーパレットを追加して … ショートコード&CSS プラグイン Shortcodes Ultimate 紹介シリーズ 第4回, ショートコード&CSS プラグイン Shortcodes Ultimate 紹介シリーズ 第3回, ショートコード&CSS プラグイン Shortcodes Ultimate 紹介シリーズ 第2回, ショートコード&CSS プラグイン Shortcodes Ultimate 紹介シリーズ 第1回. ここに拡張色を設定して表示し、さらにカラーボタンを増やすプラグインCentral Color Paletteを紹介します。. プラグイン Getwidは、設定だけで見出しタイトルのカラー、サイズ、表示位置と見出し自体の背景色とサイズをカスタマイズできるものです。, WordPress のプラグイン EditorsKit はGutenbergブロックに関するユニークで便利な操作ができるすぐれたプラグインです。文字色や背景色の変更などのテキストの装飾、リストスタイルの変更と画像スタイルの変更 について紹介します。さらにEditorsKit にはGutenbergブロックのコピー&ペーストとインポート&エクスポートをする機能があります。, WordPress のテーマ Cocoon のテキスト入力で文字色・背景色の変更、特に文字の一部の色変更についてGutenbergの機能とWordpressプラグインEditorsKitを使用した方法を紹介しています。, WordPress のテーマCocoonのブロックエディタの右サイド色設定には拡張色ボタンがありますがカラーは設定されていません。 プラグインの紹介のあと、いくつかの多彩な文字表現ができるCSSサンプルを記載していますので、ぜひ見てください。, ブログでは目次を作る必要がありますので、シンプルだけどリンク先を目次にできる Heroic Table of Contents と細かい設定ができておしゃれな LuckyWP Table of Contents を紹介しています。, WordPressのおしゃれな見出しのデザインは魅力的ですが、カスタマイズは多少CSSなどの知識も必要で面倒なものです。 Copyright (C) 2020 自分の力でお金を稼ぐ方法|ネットで簡単に儲ける副業時代が来た All Rights Reserved.