書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】人気記事に順位とview数を設定しオシャレにする

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

こんばんは。かきてぃーです。

昨日の続きですね。

https://kakitare.info/web/breadcrumbs-icon/

本日は、「書きタレ」のサイドバーやフッター部に設定している人気記事のデザインについてです。

この人気記事はプラグイン「WordPress Popular Posts」を使用しています。

サメくん
あれ?プラグイン嫌いじゃなかったっけ?
かきてぃー
全く使わないとは言っていない←

昔は開始タグ・終了タグがいじれなかったのですが、可変出来るようになってからは重宝させてもらっていますw

昨日は長くなってしまったので、今回の記事は簡潔にいきます。今回のメインは「style.css」って感じですね。

プラグインの導入から設定

「プラグイン」→「新規追加」

から「WordPress Popular Posts」を検索します。

有名なプラグイン過ぎて、既に導入済みの方も多いと思うので導入済みの方は、「ウィジェットから配置してコードをいじる」を確認下さい。

プラグインを導入したら、「有効化」します。

これで、プラグインが使えるようになりました。

ウィジェットから配置してコードをいじる

プラグインが使えるようになったら、ウィジェットから配置した場所に追加します。

ウィジェットの「WordPress Popular Posts」をドラッグ&ドロップするだけです。

大切なのは設定です。

以下のように設定して下さい。

投稿設定

タイトルの長さ上限:100

文字

アイキャッチ画像を表示にチェック

サイズを手動で指定

幅:300px

高さ:188px

統計タグの設定

閲覧数を表示 のみにチェック

HTML マークアップ設定

カスタム HTML マークアップを使う にチェック

後:

かきてぃー
これで、準備は完了です。
スポンサーリンク

「style.css」でデザインを調整する

何も設定していないので、デザインがかなり壊れていると思われます。

「style.css」でかっこよくしましょう。

レスポンシブを含めたコードになります。

そのまま設定すれば、全く同じデザインになってしまうので、色などいじって下さい。

以下を設定すれば、デザインが変更できます。

101行目…タイトル文字色

107行目…オンマウス時タイトル文字色

121行目…タイトルエリアのbackgroundカラー

125行目…オンマウス時タイトル文字色(107行目よりこっちの方が優先される)

147行目…各順位の背景色

156行目…1位の背景色

159行目…2位の背景色

162行目…3位の背景色

164~175行目…閲覧数のデザイン
width:横幅
height:高さ
z-index:背面・前面の優先度
position:ポジション設定
top:ポジションの上からいくつズラすか
left:ポジションの左からいくつズラすか
font-size:フォントのサイズ
text-align:フォントのセンタリング
color:フォントのカラー
background-color:背景色
transform:どれほど斜めにするか

 

以上が設定方法です。

大切なのは

  • プラグイン「WordPress Popular Posts」のHTMLマークアップを使用すること。
  • cssでポジションの設定・レスポンシブ設定を行うこと

この2点です。

かきてぃー
HTMLマークアップを使いこなせば、プラグインでもオリジナルのデザインにすることが出来るので覚えておいて損はないですね!
かきてぃー
本日もお疲れ様でした!
サメくん
え…まだ分からないところが…
イルカさん
そういう方は現状を「かきてぃー」さんにお知らせして教えてもらおう。
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. 匿名 より:

    ありがとうございます。
    他を参考にしてもうまくいかなかったので、助かりました。

  2. […] 【AFFINGER4-カスタマイズ】人気記事に順位とview数を設定しオシャレにする […]

  3. 北村伸一 より:

    初歩的な質問で申し訳ございません。
    style.cssに貼り付けた時、1行に全部入ってしまいます。
    どのようにコピーしたら良いのでしょうか?

    • かきてぃー かきてぃー より:

      貼り付け方法は以下の通りです。

      1、コード一覧の上部タスクバーの「copy」を押下する。

      2、キーボードの「Ctrl」+「C」を押下し、コピーする。

      3、自分の「style.css」ファイルに貼り付ける。

      以上です。

      ※注意点

      メモ帳のエディタではなく、サクラエディタや秀丸といったソースコードと相性が良いテキストエディタの使用をおススメします。

  4. しゅら より:

    かきてぃーさん、お忙しいところ返信ありがとうございます。
    そのようにやってるのですが、どうしても1行に全部が貼りついちゃうのです。
    仕方ないのでプラグインでカスタムCSS入れて対応しましたが、何でだか解らないです^^;

コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.