毎日見ていると少しきつく感じてきたりはしないだろうか。有料版はテーマオプションでライン色も変えられるが、Liteでは自分でCSSを修正しなければならない。その他、有料版にはあるのにLiteにはなくて自力更生した機能などあれこれ。CSSでカスタマイズHTMLのタグやCSSをきちんと勉強するのは少しかったるい。色ぐらいは変えてみたいよね。だれも皆、最初はそんなところから始まるのだと思う。次はフォントのサイズだけでも、とか、ここの横幅を少し広げられたら...って具合に。CSSはどこで修正するのがいいのだろう。外観>テーマの編集>を見てみると、適応させているテーマのスタイルシート[style.css]が開いているはずだ。このファイルの該当箇所を修正すれば、とりあえずはOK。それではテーマの更新のたびにスタイルシートを書き変えなければならない。プラグインを利用するか、子テーマというのを作ってそちらのスタイルシートに書き込んでいくか。人が利用しているであろうJetpackには、カスタムCSSというのが組み込まれているので、これを有効化する。CSSというプラグインがある。いうエディター画面が追加されるので、ここに修正したいCSSを追記して行く。テーマのスタイルシートを触る必要はない(上書きされるので)。いうのがカラーコードである。外観>テーマのスタイルシートを開いて検索すると、37か所ほどでこの色を使っていることがわかる。この中からタイトルの部分を探していくのは少し大変。変えたい箇所のCSSはどのように書かれているのか、たとえばFireFoxでは、該当箇所を右クリック>メニューから[要素を調査](IEでは同じく右クリック>[要素の検査])をクリックする。Explorer])では、左ウィンドウにクリックした箇所のHTMLが反転していて、右にはそのHTMLに対応したCSSが表示されている。ブラウザ上で直接このCSSの値を変えると、それがサイトにすぐに反映されるので、感じをつかむのに便利(実際に変更されるわけではない)。ここで表示されたCSSをドラッグ&コピーし、[CSS編集]エディターにペースト(不要な部分は削除)、該当箇所を修正していく。フロントページのメインエリアやサイドバー、フッターのタイトル下のライン色を薄いグレーに変えるには、以下のようにする(フッターのタイトルも同時に変えてしまう)。...【便利なツール】PCにインストールして使う。Palette「少し明るく」「少し暗く」といった操作も可能なカラーピッカーフッターのタイトルはそのままでサイドバーとメインエリアのタイトルだけを変えるこの場合はh4というタイトルのクラスを修正する。某サイト(parisvsnewyork.com)を参考に、例えばこんなふうに。6px;}このサイトは基調色がグレーで差し色がワインレッド。タイトル回りを変えるだけで相当雰囲気が変わる。ちなみに当サイトではこの部分、クレヨン風のラインを画像で読み込ませている。同じテーマでこんなに雰囲気が違うのかと眺めて楽しい。どれも有料版を使ったものだが、それでもカスタマイズの参考になる。眺めて気付くのは、サイトの顔はヘッダーと基調色+差し色で決まる、ということだ。画像を選択すれば、ヘッダーに画像が表示される。推奨サイズは300×100ピクセル。大きな画像はここで切り抜いて設定することもできる。横幅いっぱいに表示させる場合は幅1080ピクセルの画像をアップし、切り抜きしない設定とする。このままでは画像の周囲に20ピクセルの空白が出てしまう。この空白を消すには以下のCSSを追記する。NavigationLiteにはパンくずリストがついていない。直接コードを書き込んでもいいが、プラグインで設定する方法もある。NavXTというプラグインを利用していた。パンくずリストを表示するWordPressプラグインただし、インストール・有効化するだけではだめで、外観>テーマの編集>でテーマファイルを触らならければいけない。single.phpなどに書き込むだけである。この時、[ファイルの更新]ボタンが出ていない(クリックできない)場合は、FTPでサーバーにアクセスし、ファイルのパーミッションを644などに変更する。}?></div>詳しい設定は上記解説サイトにある。もこの方法のネックは、テーマが更新されるたびにタグを書き入れなければいけないということ。私もいつしかこの事を忘れてしまい、ふと気が付いたらパンくずリストが無い、という始末であった。そんな必要のないプラグインもあるのかもしれないが、どうせ毎回書き込むのなら、プラグイン無しで直書きするほうがいいような気もする。更新のたびに書かずにすませるには子テーマを作成するのが良いのだが、それは次のステップということで...。ButtonsサイドバーなどのSNSフォローボタンはプラグインで気軽に設定できる。...記事の上下に設置するSNSのシェア用ボタンもプラグインがあるが、Jetpackを利用している場合は、[共有]を有効化するだけでボタンを設置できる。[共有ボタン]で、[利用可能なサービス]から[有効化済みのサービス]へアイコンラベルをドラッグする。デフォルトではTwitterとfacebook、Google+の三つが設置されている。足りないサービスは[新サービスを追加]から作成することもできる。[ボタンスタイル]でテキストのみや公式ボタンも選択できるので、[ライブプレビュー]で確認しながら設定する。[ボタン表示]で表示させるページを選択する。[投稿]を選択した場合、全ての記事ページの下部にボタンが表示される。[共有]の[□ソーシャル共有アイコンを表示する]のチェックをはずせば、その記事にはボタンは表示されない。...Jetpackに加えて以下のプラグインを入れると、自力で[新サービスを追加]しなくても、Feedlyとはてなブックマーク、RSSボタンが追加されるとのこと(未検証ながら便利そう。Feedlyの購読者をデータベースに保存し、グラフとして可視化する機能が柱のプラグイン。この一年ほど更新されていないようだけれど...)。購読者数をあれこれできるWoerdPressプラグイン専用公式ページ単品?プラグインではこれかな。Enabledを選択、あとはデザインや位置を決める。URL]に画像を置いたURLを記入するだけでOK。以外)外してしまっている。その後子テーマを作成するようになり、少しづつ子テーマのファイルに直書きするようになったからだ。最初はなんだか難しそうに思えた子テーマも、触ってみればそれほど複雑なものではなく(テーマファイルのコードは難しいけれど)、利用価値は大きい。次のステップは子テーマによるカスタマイズである。Awesomeが組み込まれるようになっていた。メタ情報のユーザーやアーカイブ、コメントのアイコンに使われている。Awesomeを利用すれば画像なしでSNSへのリンクボタンを設置できる。サイドバー(Home6)ウィジェットの[テキスト]で以下のようにHTMLのタグを記入する。</span>と、こんな感じになる。フォントなのでサイズや色を自由に指定できる。アイコンの数も豊富で、SNSアイコンもオフィシャルだけでなくスクエアタイプなど複数の種類がある。クラス名は以下の公式ページから好みのアイコンをクリックして調べるか、一覧表から探す。ここに用意されたアイコンだけでまかなえる場合は非常に便利(記事内に利用するにはひと工夫が必要だけど、それは別に書こう)。2019/08/03コメントコメントをキャンセルメールアドレスが公開されることはありません。PROVAI.ciao。