WordPress Popular PostsのデザインをCSSで自由にカスタマイズする方法~肩番40

WordPress Popular PostsのデザインをCSSで自由にカスタマイズする方法~肩番40

ワードプレス(WordPress)で人気記事を
サイドバーに設置し、ランキング順に表示
させることができる
「WordPress Popular Posts」プラグイン。
(*肩番通りに進めていれば、既に実装済み
です。)

このプラグインを使い人気ランキングとかを
設定しましょう。

詳細は、この記事を参照してください。

WordPress Popular Postsの設定

この記事を参考に記事設定を使い自分流に
カスタマイズしてみましょう。

非常に簡単かつ便利なプラグインですが、
デフォルトデザインの表示のままでは見た
目が今ひとつなのでなんとかカスタマイズ
して変更したいと思われている方も多いの
ではないでしょうか。

そんな時はワードプレスの「CSS」を編集
すれば、自分好みのデザインにアレンジする
ことができます。

ところでCSSって何?
という方に参考になる記事があります。
[初心者]CSSってなに?という質問にWEB歴10年の人が全力で答えてみる

 

で、ですね、、、

そこで今回は「WordPress Popular Posts」
のデザインを、「CSS」を使って自由にカス
タマイズする方法についてご紹介したいと思
います。

カスタマイズする場合は、親テーマではなく
子テーマを使いましょう。

ちなみに親テーマのCSSをカスタマイズする
事は非常にリスキーです。
ワードプレスのデザインが壊れてしまったり
1度デザインが壊れてしまうと元に戻すこと
も容易ではありません。

その点、子テーマなら失敗しても何度もやり
直せます。

ちなみにわたしが使っている
LIONの子テーマをアップロードする方法は
肩番7で述べています。

*検索窓に肩番7と入力して検索すると
見つけやすいです。
ちなみに肩番7の記事の後半戦で記述されて
います。

わたしと同じLION MEDIAにされた方は
既に子テーマもアップロードして有効(=
子テーマがいつでも使える状態)なって
いるはずです。

でも、私たちアラカンはつい忘れがち、、、
復習のいみでも、親テーマと子テーマの
関連性を把握してみましょう。

「急いては事をし損じる!」って言いますから、、、。

まずこの記事を参考になさってください。

WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など

ワードプレスの「子テーマ」とは?【誰でもできる作り方まとめたよ!!!】
エックスサーバー上での子テーマの作成方法が書かれています。
*この記事を参考にして自分の入れてあるテーマの子テーマを
入れてみましょう。

ちなみにわたしと同じテーマ LionMediaの
子テーマをエックスサーバー上でアップロ
ードする方法についてもう一度復習してみましょう。

子テーマがあらかじめ存在するものを選ぶ
なにかと便利です。

で、動画で紹介されているバズ部のテンプレ
ート(=テーマ)でも構わないのですが、
わたしのおススメテーマはLION MEDIA
です。
*無料でありながらコレだけのことができる
テーマはなかなかないかと考えます。
他の方の記事をみても評価は非常に高いです。

推奨:テーマは総合評価の高いLION
MEDIA
でしませんか?

もし、わたしのこのワードプレスと同じテー
マに
されたい場合は、わたしは、無料テーマ
LION MEDIAを使っていますので、よろ
しかったらダウンロードして使ってください。
LION MEDIAダウンロード
無料テーマ-ダウンロード(親テーマ)
子テーマ‐ダウンロードの両方とも
ダウンロードしてデスクトップに保管
してください。
*デスクトップにダウンロードしたら、親
テーマ子テーマも順に自分のワードプレス
にインストールしましょう。

やり方は以下の記事の通り行ってください。
*デスクトップのどこに保存されているか
先に確認にしてください。

*また、保存されているフォルダは解凍せず
そのまま使います。

以下の記事を見ながら進めて下さい。

WordPressのダッシュボードからテーマをインストール

問題なく出来ましたでしょうか?
ちなみにこの方法がもっとも簡単な方法です。

*なお、わたしがLION MEDIA(無料)
を自分のワードプレスに入れて使っている
理由は以下の記事に記載されています。

WordPressの無料テーマLION MEDIAがスゴイ理由!

また、この記事には以下の内容も記載されて
いますので、参考になさってください。

●LION MEDIAがスゴイ理由
●LION MEDIAを使うには?
*ワードプレスにLION MEDIAのテーマ
を取り込む方法が記載されています。
親テーマだけでなく子テーマも同時に
入れてアップロードしたら、親テーマでは
なく子テーマを有効化してください。
理由は記事内に記載されています。

*親テーマを入れて有効化しても後から
子テーマを入れて有効化すれば親テーマ
の有効化は解除されるようです。
(これで問題はありませんので、ご安心を)

*以下の記事内に
●WordPressのダッシュボードからテーマを
インストールという表題があります。
この表題の内容通り進めて親テーマと子テーマ
両方をインストールしてください。
*ただし、有効化するのは子テーマだけです。

では、ながながと説明しましたが、以下の記事
を参考に親テーマと子テーマをワードプレスに
インストールしてください。

●WordPressのダッシュボードからテーマをインストール

3. LION MEDIAを使うには?

[PR]

今後カスタマイズする場合は、子テーマで行う
事になります。

*子テーマが有効になっているはずですので、
以下の「アフィリエイト中学」#9動画でも
触れているようにCSSを編集(=カスタマイ
ズ)するばあいは、子テーマで行ってください。

*記事制作のさい、グーグル翻訳が必要に
なります。
この時点で、入れておいてください。
わたしは、お気に入りに入れていつでもツー
ルバーから使えるようにしています。

この他、こんな内容もCSS編集でやってみたいですね!?

WordPress Popular PostsをCSSカスタマイズしてカッコよくする方法。

見た目が良いとサイトも洗練された感じに
なるからCSSをいじりたくなることもやむ
を得ません。

でもその時は子テーマでCSSの編集をするようにしてください。

[PR]

ワードプレスカテゴリの最新記事