【コピペでOK】WordPressのカスタマイズ集21選【ほぼ必須のカスタマイズあり】. technology. Lightningのヘッダーをカスタマイズするパターンをいくつか紹介します。横並びのサイト名とグローバルメニューを上下に表示したり、グローバルメニューのフォントサイズ、ヘッダーの背景画像、ロゴ下の電話番号などを設定してみます。検証したバージョンはLightning 3.0.2です。 ◇Mac：ヒラギノ角ゴシック Font Awesome で提供されているアイコンをテーマ内で利用できるようになります。, 機能を有効にすると Font Awesome のフォントを CDN で読み込む link style タグを html head タグ内へ出力します。, ↑の先頭に というのがありますよね？ こんな感じで文中にアイコンを挿入出来るようになっています。, 薄いグレーで表示されているものは利用できないので、それ以外で任意のアイコンを選んでクリックしてください。, 左側のメニューの【 FREE 】をクリックすると、利用できるアイコンの一覧が表示されます。, これを挿入したいページの編集画面でテキストモードで貼り付けます。ビジュアルモードで貼り付けてもタグがそのまま表示されますので注意してください！, WEBフォントアイコンなので色や大きさの変更が画像と違って、とても簡単にできます。, class による変更が可能な方はclassを追加して、CSS 指定してください。. るーしーです。 今回は「WordPress(ワードプレス)のパーマリンク設定を「%postname%」にすべき理由」についてです。 「パーマリンク？どれに設定したらいいのか分からないよ」 ... こんにちは! なんでしょうね、この残念仕様は。, さて、Lightningの背景色はデフォルトでは白です。 「フッターウィジェットエリア１」 © 2020 ぴょんなことから All rights reserved. （ちなみにWindowsなら7-zipを使うのがオススメ）, この拡張子がついているファイルがフォントを変更するのに必要になるので確認してください。拡張子は「.ttf」や「.woff」になっていることが多いと思います。, では次にWordPressでフォント管理を行える Font Organizer というプラグインをインストールしましょう。その手順は次の通り, そして新規追加画面からプラグイン名で検索すると次のプラグインが見つかるのでに「今すぐインストール」を押してインストールしてください。, https://ja.wordpress.org/plugins/font-organizer/, あとインストールが終わったら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押すのも忘れずに, Font Organizerでは「設定」ー＞「Font Settings」から設定画面を開けます。, その中に次のような「Custom Fonts」という項目があるのでそこでダウンロードしたファイル(.ttfなど)をアップロードしてください。, 「Font Weight File」というところで「ファイルを選択」ボタンを押し、ダウンロードしてきたフォントファイルを選択してください。, 「Font Name」には任意の分かりやすいフォント名を入力、そして「Upload」ボタンを押すとサーバー上にフォントがアップロードされ利用可能になります。, 実際にフォントをサイト全体に適用するには「Known Elements Settings」の「
Font」からアップロードしたフォント名を選び、下の方にある「変更を保存」ボタンを押すとフォントが反映されます。（下画像参照）, もしフォントを変更したのに反映しないというときはChromeブラウザなら「Shift+F5」でキャッシュを削除して更新すれば変更が反映します。, もちろんブログ全体ではなく、h1タグやpタグなどタグごとにフォント設定することも可能。そこは好きなように試してみてください。, 「Manage Fonts」からアップロードしたフォント名を選び、「Delete Font」ボタンをクリックするとサーバー上からフォントファイルが削除され元に戻ります。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします, 「WordPressは難しい」、「ブログ初心者には向いてない」・・・こういう固定観念を捨てればWordPressほど効率よく記事編集できて安全にブログ運営できるツールはありません。Let's ワードプレス！, 「やることが多くてブログを継続できない」、「中々成果が出なくて挫折しそう」・・・こういう方に役立つブログ更新を継続するコツ・挫折しないためのブログ術をまとめました。, 昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい＆楽しい記事作りを心がけています。, 自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします。好きな言葉は「不言実行」「千里の道も一歩から」. ◇CSSで消す WordPressのフォント部分のCSSを書き換えたのに変更できない！原因と、より簡単なフォントの変更方法を紹介します。GoogleFontsを使用して、気に入ったフォントに変更するのが簡単です。 ◇Mac（Mavericks以降）：游ゴシック Copyright © Lightning - シンプルでカスタマイズしやすいWordPress.org登録無料テーマ - All Rights Reserved. 小規模サイトの場合はわざわざ何かを入れる必要性を感じません。, よって、ここはCSSで無理矢理に非表示に変えます。 Copyright © VK All in One Expansion Unit - WordPressでのサイト構築が飛躍的に楽になる多機能統合型プラグイン - All Rights Reserved. の２パターンあります。, WordPressテーマ「Lightning」をカスタマイズ（その９）よくある御質問ページの作成, WordPressテーマ「Lightning」をカスタマイズ（その８）スライドショーの調整・他, WordPressテーマ「Lightning」をカスタマイズ（その７）全幅コンテンツの実装, WordPressテーマ「Lightning」をカスタマイズ（その６）インフォメーションの設置, WordPressテーマ「Lightning」をカスタマイズ（その５）3PRの変更・その他, WordPressテーマ「Lightning」をカスタマイズ（その４）見出しの変更・その他, WordPressテーマ「Lightning」をカスタマイズ（その２）WP管理画面からのカスタマイズ, WordPressテーマ「LIQUID CORPORATE」 WordPressテーマ「Lightning」をカスタマイズ（その3）フォントの変更・クレジットの非表示 icon-clock-o 2017.9.4 icon-refresh 2017.10.28 WEBデザイン souken ツイート るーしーです。 今回は「WordPress(ワードプレス)のデータバックアップをBackWPupで簡単に行う方法」についてです。 早いもので、当サイト「膠原病でした」も開設して半月が経ち ... こんにちは! ヘッダーロゴ、グローバルメニュー、タイトル、テキストの4つの項目でそれぞれフォントスタイルを変更できます。フォントスタイルは明朝体とゴシック体、游ゴシックから選択できます。【 カスタマイザー 】>【 Lightning フォント設定 】から設定してください。 WordPressをインストールしてLightningを適用したばかりのサイトは、トップページが下記のように … 2018/5/4 WordPressを使っていて「デフォルトのフォントが読みにくいな」「お洒落なフォントにしたい」という人向けにフォントを変更する方法をまとめました。プラグインを使うので数分くらいでできます。 (adsbygoogle = window.adsbygoogle || []).push({}); ファイル名は「現在この内容を使っている」という事が分かるように、「【20180201使用中】スタイルシート.txt」という具合にしましょう。, テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記しましょう。, たかが文字サイズ、行間、文字間ですが少し変わっただけで印象はガラリと変わりました。, やり方は沢山ありますが、あれこれ試行錯誤した上でこの手順が最も手軽に実行できる手段だと判断しました。, 商用のしっかりしたサイトでやるべきではない手段なのですが個人サイトにつき許して……という感じです。, なので今回の方法もやるやらないは皆さんの判断にお任せします。※結果も自己責任でお願いします。, とはいってもこれからもどんどん役に立つような情報を発信していきますのでまたこのブログを見に来てくださいね！！. ©Copyright2020 創kenブログ.All Rights Reserved. 2019/11/17 プラグインやウィジェットの使い方がわからない場合、まずは設定ガイドのページをご確認ください。, Lightningをコンテンツマーケティングやメディアサイトとして活用するためにデザインと機能を強化したのが有料の拡張デザインスキン「Variety（ヴァラエティ）」です。. WEBデザイン ◇スマホ・タブレット：OSのデフォルトフォント, Win7では相変わらずメイリオで表示されますが、どうせ今後減っていくOSバージョンですからw, 他にはGoogleフォントの「Noto Sans」を使うという選択肢もありましたが、今回は「游ゴシック」を使用しました。, PCで見るとPタグのフォントが小さく感じるので、PC閲覧時（画面幅992px以上）のフォントサイズを変更します。, さらに、「游ゴシック」に切り替えるとメニュー（ナビゲーション）の文字が見づらくなったので、太字にします。, 「Lightning」で気に食わない点の２番目ですが、背景色がWordPressの設定画面から変更できないんです。 たとえば当ブログもWindowsで見ると「メイリオ」で表示されます。, で、この歯科サイトでは真面目さを重視して、フォントは「游ゴシック」をメインにしたいと思います。, ◇Windows8.1及び10：游ゴシック WordPressテーマ「Lightning」をカスタマイズ（その3）フォントの変更・クレジットの非表示 icon-clock-o 2017.9.4 icon-refresh 2017.10.28 WEBデザイン souken ツイート 解説記事. また、レイアウトが崩れてしまった等の結果についても自己責任でお願い致します。, 「/」は閉じタグと言われ、「/」無しのタグで始めて「/」付きのタグで閉じるのが基本。, このソースを見てみると ◇phpファイルをいじる方法 1.5.0: 20180601 [ 仕様変更 ] Font Awesome5 対応: 1.4.2: 20180508 [ 仕様変更 ] スライドショーに指定された画像サイズが小さい場合でも横幅100%になるように変更 [ その他 ] Lightning JPNSTYLE クイックスタートデータのダウンロードURLとパスワードをreadme.txtに追加 1.4.1: 20180428 ということは、h4のHTMLタグが付いた文字だけ表示が変わっていたんですね。, その為、全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります。, 今回はCSSでpタグに囲まれたフォントのサイズ、行間、文字間を変える設定をします。, そうする事でpタグに囲まれたフォントは全てサイズ、行間、文字間が変わります(例外あり)。, 段落として定義されている部分全てpタグが入っている(はず)なのですがどうなるかは実物を見た方が早いと思います。, ファイル名は中身が何かわかればいいので、「20180201バックアップしたスタイルシート.txt」等で大丈夫です。, 「.txt」は拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。, これで今回作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。, 以後の操作でレイアウトが崩れてしまった場合は、現在使用しているテーマのstyle.cssファイルへ今回作成したバックアップファイルの内容をコピペすれば復旧しますので大事に保存してください。. 「Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. この記事で使った画像： Image.zip ロゴ画像を設定する. 現在は有料テーマのSANGOを使用しており、デフォルトのフォントですが、以前はフォントをいじって見やすいサイトにしていました。, フォントを変更することでブログのテーマに合わせた印象に変えることが簡単にできますので、是非試してみて欲しいです。, 記事の前半ではフォントの変更方法、記事の後半では文字の色や大きさの変更方法について書いていきます。, ConoHa Wingで提供されている無料のフォントを使用する方法(有料の物が無料で使える), WordPressのCSSのfont-family{..., ..., ...}の部分を変更するだけです。, 私の場合、最初にかわいげなフォントを検索して、設定してみたものの、全く変わらないということが起きました。, これを解消するためには、フォントファイルをどこからかとってくる必要が出てくるわけです。, 日本語フォントは普通読み込みが遅いものなのですが、このサイトのフォントならば読み込み速度も速いので、サイトが遅くなるということもないためおすすめです。, 文字（テキストの部分）をクリックすることで自由に書き換え/フォントサイズの調節などもできます！, 気に入ったフォントのタイトル（＋ボタンも可)をクリックすると次のページに飛びます。, style.cssの一番上に、オレンジ色で囲った部分をコピペします。 の部分は必要ありません。, 次に、取り入れたフォントを全体で使用するために青色で囲った部分を以下の部分にコピペします。, となっている部分のfont-familyの所を青色で囲ったコードに書き換えれば全体に反映されます！, 記事全体のフォントが書き変わるので、変更後はざっとみてイメージ通りか見てくださいね。思わぬ部分も変わっている可能性があります。, CSSを変更したのにフォントが変わらないという場合、以下の原因があるので探ってみてください。, 現在国内最速と言われているサーバーであるConoHa WINGでは、「モリサワWebフォント」が提供する「TypeSquare」から33書体無料で利用できます。, 3ドメインのみ使用でき、月間75000PVまででの使用が目安のようなのですが、設定方法も簡単です。, ConoHa WINGのサーバーを私も使用しているのですが、以前使っていたロリポップと比較してページの表示速度も大きく変化しましたし、管理画面での操作のスピードもサクサク動くようになりました。, その結果、回遊率も上がりPVも増えましたので、乗り換えてフォントも新しくする！というのもアリです。, ConoHa WINGは乗り換え用のツールがあるので、乗り換えもかなり簡単でした！, せっかくなら、この機会にフォントだけでなく、フォントのサイズ・色も変えてみましょう。, 変え方は、同じくstyle.cssにて、pタグとbodyタグの部分を以下のコードに書き換えるだけです。 style.css内でctrl＋Fを押して文字検索をし、pタグとbodyタグに関する設定の部分を探し、以下のように書き換えましょう。, bodyタグでサイト全体のフォントの大きさを17pxに指定（16～17pxが見やすい)し、pタグの文字の大きさも同じになるよう、1emにしています。 単位が違いますが、どちらも同じ文字サイズです。, これで、一気に見やすくなると思います。文字の大きさも大きくなり、行間や段落の間も大きくなって見やすくなります。, 色を選択する際には原色大辞典が一番見やすいと思います。 少し灰色にするのがポイントで、真っ黒(#000)よりも目に優しくなります。, フォントを変えようと思ったときにうまくいかずに悩んでいる人もいたのではないでしょうか。, 「読まれるサイト」は「見やすいサイト」だと思っていますので、これからもちょくちょく見やすくできるように工夫を凝らしていこうと思います。, Web系エンジニアのうさぎ。 プログラミング・ブログ運営・生活の質を高める方法やお金に関する知識(FP2級取得済み)を書きます。 「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。.Jaejoong ブログ 聞こえ ますか 4, Windows10 ディスクの管理 未割り当て 結合 5, ソニー ブルーレイ 故障 システムエラー 10, ガーミン 25j バッテリー 交換 8, 影山 本音 Pixiv 4, ブライス サロペット 型紙 10, テリーのワンダーランド レトロ 攻略 9, レポート 考察 例 5, デジーノ スラング デュード 41, Ykk Ap 株価 4, Bitlocker 回復キー 入手 4, Java Replaceall 空白 9, 車 灰皿 場所 7, 車 内装 深い傷 4, 大東建託 シャワーヘッド 交換 24, 注告 忠告 違い 7, トイレ 電池切れ 流れない 6, Zero 808lv 価格 6, Sharepoint Excelにエクスポート 非表示 6, I Was Born To Love You 和訳 4, アイズワン カムバ 6月 8, メダカ 稚魚 餌 食べない 15, 女友達 彼女 嫉妬 10,