※当サイトにはプロモーションが含まれています。
にゃのらいと
ワードプレステーマの「権威」を使って色々とカスタマイズしたいにゃ!
にゃテック
「権威」じゃなくて「賢威」だにゃ。
リクエストに応えて、このページでは「賢威」を使ったカスタマイズ方法をまとめてみたにゃ
このサイトは、ワードプレス(WordPress)のテーマである賢威(けんい)8.0を使用して作成しています。
サイト作成にあたって、賢威を色々とカスタマイズしたので、その内容を1つのページにまとめてみました。
賢威を使っている方の参考になれば幸いです。
デザインに関するカスタマイズ(初級編)
CSSの追加やclassの記載など、比較的、簡単にできるカスタマイズ方法をまとめました。
基本的なスタイルに関して
賢威のデフォルト設定では、文字を見やすくするためか、「行の高さ」や「行間」に多くの余白が取られています。 ちなみに、「デフォルト設定」と「調整した設定」を見比べると、次のようになります。 【デフォルト設定】 大谷翔平選手 …
通常、賢威の「見出し2(h2)」は、このように表示されます。 h2のタイトル(デフォルト) 少し、見た目が弱いので、装飾を追加してみました。 なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りで …
賢威には、次のような「記述リストのデザインその1」が用意されています。 記述リストのデザインその1 要素が横に並びます。モバイルなどでは、横並びが解除されます。また左よりも右の文字数の方が少なくなるとデザインが崩れます。 …
書いた記事をなるべく読んでもらいたい。 書いた記事を少しでも目立つようにしたい。 と思っている方もいらっしゃるのではないでしょうか? 自分も同じです。 その為、このサイトでは、記事エリア部分に薄い影を作って、記事の部分( …
賢威を使用されている方の中には、サイドバー(サイドメニュー)に、アフィリエイトバナーを貼り付けている方もいらっしゃるのではないでしょうか? ただ、ウィジェットの「カスタムHTML」「ブロック」「テキスト」に、コードを貼り …
賢威のサイドバーに表示されるタイトルは、デフォルトだと左寄せになります。 できれば、中央(センター)にしたかったので、CSSを追加してみました。 なお、自分が使っているテーマとワードプレスの環境は以下の通りです。 サイド …
(賢威7.1のテンプレートの種類によっては違うと思いますが、)賢威8.0ではグローバルメニューの位置は基本的に左寄せになっています。 ということで、グローバルメニューを中央(センター)にするCSSです。 なお、この記事を …
賢威8.0の設定では、グローバルメニューの背景色は白(#fff)で、設定から変更することができません。 そんな悩みを解決するCSSです。 なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。 …
賢威8.0では、デフォルトだとヘッダー上部に斜線が入ります。 この斜線を消したい方もいらっしゃるのではないでしょうか? その方法について解説します。 賢威のヘッダー部分の上部にある斜線を削除する方法 賢威のヘッダー部分の …
デザインパーツに関して
WEBサイト内を回遊してもらう事を目的として、使われることが多いのでリンクカード機能です。 といった、ショートコードを使う事で、下記のようなリンクカードを作ることができます。 そんな悩みを解決するCSSです …
賢威では、次のような「アコーディオン式のQ&A」が用意されています。 ここには質問文が入ります。 ここには回答文が入りますここには回答文が入りますここには回答文が入ります。 ここには回答文が入ります。 ここには回答文が入 …
賢威には、次のような「アコーディオン式のQ&A」が用意されています。 ここには質問文が入ります。 ここには回答文が入りますここには回答文が入りますここには回答文が入ります。 ここには回答文が入ります。 ここには回答文が入 …
賢威8では、プラグインを使わずに、人気記事のランキングをサイドバーに表示させることが可能です。 ただ、この人気記事ランキングは、マウスカーソルを画像の上に持っていっても、画像などに変化がないため、リンクであることがわかり …
商品やサービスなどのレビューなどで見かける「お客様の声」。 賢威には、下記のような「お客様の声」がテンプレートとして3つ用意されています。 にゃのらいと ご職業:WEBデザイナー ご購入年:2024年 ここにお客様のご感 …
ワードプレス(WordPress)を使ったサイトのサイドバー(サイドメニュー)などに使われることが多いタグ機能。 タグ機能は、投稿内容を細かく分類でき、関連性のある記事をグループ化することができ、検索エンジンがサイトの内 …
賢威には、吹出しを簡単に作ることができる「賢威キャラクター」のプラグインがあります。 しかし、ちょっと会話の行間スペースが少し気になります・・・。 今回は、そんな悩みを解決するCSSです。 ワードプレス環境とプラグインの …
賢威には、商品情報を紹介(比較)する下記のような基本スタイルが用意されています。 商品比較をする際に、採点表は重要な要素なので、もう少し目立つようにカスタマイズしてみました。 なお、この記事を作成している時点での、ワード …
賢威のテーブルは、予め用意されたで括って、widthを固定値にすることで、スマホで見た時にスクロールされるようになります。 ただ、固 …
デザインや機能に関するカスタマイズ(中・上級編)
function.phpへの追加の記述や、phpファイルの修正など、少し難易度が高いカスタマイズ方法についてまとめました。
賢威のフッターにあるコピーライト部分の年代表記を修正したいという方もいらっしゃるのではないでしょうか? この「年代表記」は、インストールした年が自動で入るようになっていて、ワードプレスの管理画面からは変更ができません。 …
賢威では、関連記事で表示される数は、デフォルトだと6つになっています。 この赤い四角の部分のスペースが勿体ないので、関連記事の表示数を8つに増やしたいと思います。 ただし、スマホやタブレットで表示された時は、縦に長くなっ …
賢威のカラム機能は便利ですが、横幅は等間隔での設定になっています。 その為、デフォルトだと、文章(最大横幅の30%)、画像(最大横幅の70%)といった調整ができません。 このように、左右ともに50%(等間隔)になってしま …
このサイトでは、ワードプレスの標準機能の「タグクラウド(Tag Cloud)」を使用して、タグを表示しています。 タグクラウドは、サイト内で使用されているタグを視覚的に表示するためのウィジェットまたは機能で、ウィジェット …
この記事では、WordPressのウィジェットの「カスタムHTML」で、ショートコートが利用できるようする方法を解説します。 具体的な説明に入る前に、この記事を書いた時点の環境を記載しておきます。 賢威を使っている方の参 …
賢威には、自動でパンくずリストを生成してくれる機能があります。 確かに、タイトル名が長いとスマホで見た時には2~3行になってしまうので、タイトルは非表示でいいかもしれせんね。 その為、パンくずリスト内のサイト名は非表示に …
賢威には、自動でパンくずリストを生成してくれる機能があるのですが、表示されるのは、フッター(footer)部分のみです。 その為、ヘッダー部分にパンくずリストを表示したいといった方もいるかと思います。 そんな悩みを解決す …
賢威には、自動でパンくずリストを生成してくれる機能があります。 しかし、パンくずリストが表示されるのは、フッター(footer)部分のみです。 その為、固定ページのヘッダー部分にパンくずリストを表示する方法を紹介します。 …
賢威の初期設定だと、ヘッダー部分はこのように表示されます。 パソコンで見た場合 スマートフォンで見た場合 今回、サイトタイトルを画像にして中央に寄せて、このようにしてみました。 パソコンで見た場合(修正後) スマートフォ …
賢威では、ロゴ画像(当サイトではサイトタイトルに使用)は、パソコンとスマホ共通のものを使用しています。 ちなみに、賢威の設定の箇所の「ロゴ画像」のことを指しています。 今回は、パソコンとスマホで、別々のロゴ画像を設定して …
ワードプレス(WordPress)テーマの賢威では、関連記事を表示する機能が搭載されていますが、そのタイトルを変更する事はできません。 つまり、画像のように「関連記事」というタイトルを変更する事はできません。 一応、賢威 …
ワードプレス(WordPress)のプラグインである「WP Super Cache」を導入してから、賢威の人気記事ランキングの順位が正常に表示されなくなりました。 例えば、読まれていない記事がトップ5に並ぶなど、そういっ …
ワードプレス(WordPress)では、投稿ページ(記事)の下にコメントを投稿できる機能があります。 ただ、賢威では、このコメントのタイトル部分(h2)は、「コメントを残す」の固定となっており、編集することはできません。 …
ワードプレス(WordPress)テーマの「賢威」では、記事を作成すると公開日や更新日などが表示されるようになっています。 この公開日や更新日は、デフォルトの設定で表示・非表示にすることは可能ですが、特定の記事や、特定の …
アフィリエイト広告やSEOに関するカスタマイズ
アフィリエイト広告や、SEO対策に有効と思われるカスタマイズ方法についてまとめてみました。
ブログやサイトにアフィリエイトなどの広告をは載せている場合、 「この記事にはプロモーションが含まれています。」 「このサイトにはプロモーションが含まれています。」 などの【PR告知文】を表示することが、令和5年10月1日 …
賢威では、デフォルトの機能として、投稿・固定ページの記事の下に広告などを設置することができます。 しかし、関連記事の下に設置する機能は提供されていません。 その為、テンプレートファイルに記述して、広告を表示させてみました …
ここ最近、PageSpeed Insights(ページスピードインサイト)で、モバイル表示される際のスピードの改善をおこなっています。 ページ速度が測定できる「PageSpeed Insights」はこちら そこで気にな …
プラグインに関連するカスタマイズ
プラグインに関連するカスタマイズ方法についてまとめました。
ワードプレスのブログなどでよく見かける、キャラの吹出し機能。 賢威もキャラ設定機能プラグインをダウンロードする事で作成できます。 下図のように綺麗な吹出し(会話)が作れます。 ただ、「名前表示は、写真の中央に持っていきた …
エンジニアさんのブログなど、技術メモを残したいとき、ソースコードが掲載されている事があります。 自分は、エンジニアとは程遠い職種でしたが、なんか格好いいので、やってみることにしました。 色々なプラグインや機能がありました …
カテゴリーに限らず、作成した投稿ページや固定ページ、タグなどの表示させる順番を変更したいといった事があると思います。 そんな悩みを解決するのが、「Intuitive Custom Post Order」というプラグインで …
固定ページやカテゴリーなど、ページの内容によって、サイドバー(サイドメニュー)に設置する内容を変えたいといったことがあると思います。 そんな悩みを解決するのが、「Widget Options」というプラグインです。 なお …
訪問者用のサイトマップを作成する、プラグインとして有名な「WP Sitemap Page」。 早速、プラグインを入れて作成してみました。 という事で、CSSを追加して、WP Sitemap Pageのデザインを変更してみ …
2024年8月~10月頃にかけて、賢威を使って「整骨院」のデモサイトを作成する予定です。
そして、その作成過程を録画して公開する予定です。
当初の予定より、アクセスが集まらないこともあり、デモサイトの作成は保留中です。スミマセン。