このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。, 今回は、WordPressテーマ Cocoonでの「サイドバーにピックアップ記事設置」のカスタマイズについてまとめてみました。, サイドバーに特定のエントリー記事を紹介するための「ピックアップ記事」のウィジェットを設置したいと思います。, その方法としては、WordPressテーマ Cocoonの機能の「(C)おすすめカード」のウィジェットを利用する方法があります。, この場合頻繁に記事を入れ替えると設定が面倒なので、一番簡単に設置する方法を考えてみました。, その方法として、WordPressテーマ Cocoonのブログカードの機能を利用することにしました。, 「カスタム HTML」のウィジェットに、表示させたいエントリー記事のURLを内容に記載するだけでOKです。, これでも十分なのですが、更に見やすいように「サイドバーにピックアップ記事設置」に関してカスタマイズしたいと思います。, WordPressテーマ Cocoonで「サイドバーにピックアップ記事設置」のカスタマイズを行います。, 「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。, 今回のカスタマイズによって、「サイドバーにピックアップ記事設置」のデザインは次のようになりました。, ピックアップ記事の表示をアイキャッチ画像、タイトル、ブログ名の表示とし、そのアイキャッチ画像に対して、シャドー(影)を付けて立体感を出し角にアールを付けてみました。, 「カスタム HTML」のウィジェットを利用して「サイドバーにピックアップ記事設置」を行ってみましたが、これで手軽にピックアップ記事を更新することができるようになり便利です。, また、コンパクトな表示の割には、ピックアップ記事と言う事でアイキャッチ画像が大きく意外と目立っているのも利点だと思います。, 大学生と高校生の二人娘のパパで弱小ブロガー。初めてのPCはMZ-80C、その後MZ-80B、PC-8001/8801/6601/9801/88VA等を経て現在のメイン機はRyzen 7 3700X搭載の自作PC。WordPressテーマ CocoonとTHE THOR(ザ・トール)を使って3つのWordPressブログサイトを運営中。このサイトのWordPressテーマはCocoonを使用。PC関連のレビュー記事ご依頼承ります!, ZMASAa.blog Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!.  MASAa.blog 「この記事読んで欲しいなぁ」と思っても、期待通りの結果にならないのが、サイト運営の難しいところ。, SEOの知識が豊富であれば、狙って検索エンジンに上位表示させることができるかもしれませんが、ほとんどの人にとっては至難の業であることは言うまでもありません。。, ただ、その問題を解決する簡単な方法があります。それは、よく読まれる記事を経由して読んでもらうこと。, どんなにPV数が少ないサイトにも、「他の記事よりも読まれる記事」というのは存在するので、PV数関係なく、どのサイトでもできる方法です。, ちなみに、トラフィックの多いサイトであれば、「トップページ(サイドバー)の一覧表示の先頭に固定する」という方法も効果的ですが、ほとんどのサイトでは効果がない方法です。, さて、先述のようなサイト構造にするためにはいくつか方法がありますが、今回は、「プラグインなしでピックアップ記事を表示するカスタマイズ」をご紹介します。, このカスタマイズをすると、“任意のタグ”を記事に追加するだけで”任意の場所”に”任意の記事”を横並びで表示させることができます。, そういったプラグインもありますが、非常に簡単なカスタマイズ(コピペOK!)ですので、プラグインを使う必要もないのかなと思います。, まずは、管理しやすいように、お使いのテーマの中に、空のファイル「pickup.php」を作成し、下記のコードをコピペします。, 今お使いのWordPressテーマのサムネイルが正方形の場合、先述のコードの「thum150」の部分を「thumbnail」にすればOKだと思います。, どんなサイズのサムネイルの画像を生成しているか調べる場合は「functions.php」を確認してみましょう。, 「横150px,縦113pxのサムネイル画像」を生成するために、fuctions.phpに下記のコードを追加します。(すでにコードがあれば、追加する必要はありません), また、ほとんどのテーマでサムネイル画像の表示をサポートしているはずですが、下記のコードがなければ追加する必要があります。, のどちらかがおすすめです。僕は、上記のコードを「single.php」に追加して、「記事下」に表示させています。, 人気記事をヘッダー下に横並びで表示させるカスタマイズ! Fantastech!! チメブロ, WordPress blog site specialized in PC produce by masaa, ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト, このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。, 【レビュー記事】CORSAIR HS70 PRO WIRELESS Gaming Headset, WordPressテーマ Cocoonの「SNSシェアボタン」のカスタマイズについてまとめてみました。今回のカスタマイズでは記事の上下(トップシェアボタン、ボトムシェアボタン)に表示されている「SNSシェアボタン」にシャドー等を付けてみました。, WordPressテーマ THE THOR(ザ・トール)での「エントリー記事カードのタイトルをホバー時に浮かす」カスタマイズについてまとめてみました。今回はエントリー記事カードのタイトルをホバー時に上へ移動する処理を追加しました。, WordPressテーマ THE THOR(ザ・トール)での「ピックアップ記事をホバー時に浮かす」カスタマイズについてまとめてみました。今回のカスタマイズはサイドバーエリアの【ピックアップ記事】に対しホバーした時に浮かす処理を加えました。, WordPressテーマ THE THOR(ザ・トール)での「サブメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、サブメニューの背景色をサイトカラーに変更、パーティションの強調、フォントの強調を行いました。, WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」についてカスタマイズをこれまで何度か行いました。今回は「ウイジェット カテゴリー」のホバー時を認識しやすくなるようにするカスタマイズを行ってみました。, WordPressテーマ THE THOR(ザ・トール)での「コメントを書く」のカスタマイズについてまとめてみました。今回のカスタマイズでは、フォントサイズを拡大とアイコンの追加表示、「コメントを書く」見出しのスタイル変更を行いました。, WordPressテーマ THE THOR(ザ・トール)での「ヘッダーのアイコン」のカスタマイズについてまとめてみました。今回のカスタマイズでは、「ヘッダーのアイコン」をFont Awesome 5のアイコンに変更してみました。, WordPressテーマ Cocoonのインデックスについては先日にもカスタマイズを行ってきました。今回そのインデックスをホバーしたときのタイトルに対して少しだけ変化(タイトルに対してサイトカラーのピンク枠線を表示するデザイン)を付けてみました。, 【レビュー記事】WonderFox HD Video Converter Factory Pro, 動画変換ソフトウェア『WonderFox HD Video Converter Factory Pro』のレビュー記事です。ビデオを500種類以上の形式に変換、切り取り/マージ/特殊効果などの編集、動画ダウンロード等を行うことができます。, EaseUSのiPhoneデータ管理ツールソフト『EaseUS MobiMover( モビ ・ ムーバー)』のレビュー記事です。数クリックだけで楽にiOSデバイス上のデータを移行/編集/添削することができる便利なソフトウェアです。, Hypamer『【高度昇級&安定性抜群】ノートパソコンスタンド PC タブレットスタンド 無段階高さ調整可能 姿勢改善 腰痛/猫背解消 人間工学設計 折りたたみ式 滑り止め アルミ合金製』のサンプル品提供頂いたのでレビュー記事作成しました。, Windows上でパーテーション操作や管理などのディスク管理ソフトウェア『MiniTool Partition Wizard 12』のレビュー記事です。無料版以外にプロ版、プロ・デラックス版、プロ・アルティメット版があります。, INDEX 1 Leawo Blu-rayコピー2 Leawo Blu-rayコピーの紹介2.1 Leawo Blu-rayコピーをインストールする2.2 Leawo Blu-rayコピーを使う!2.2.1 設定項目2.2.2 市販のDVD. WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新... クイックタグとは  MASAa.blog バージョンアップにより、ピックアップ記事を表示できる場所が増えました。 https://4536.jp/ver1-0-4 従来のピックアップエリア(本文の下部分)への表示と同じく、記事にタグを付けるだけで簡単に表示することが可能です。 WordPressでブログを書いている方で人気記事のランキングを表示させている方は多く、人気記事のランキングを表示させるのに便利なプラグイン「WordPress Popular Posts」を使うと簡単にウィジェットエリアに表示させることができます。実際、自分も使っていました。, しかし、ブログ運営を続けている上で人気記事のランキング表示では色々と問題になってくる部分があり、いっそのこと自分で選んだピックアップ記事を表示させてみよう!と思って表示させてみましたのでそのカスタマイズ方法となります。, 自分のサイトでも人気記事のランキングを表示させるのに便利なプラグイン「WordPress Popular Posts」を使って人気記事のランキングを表示させていましたが、色々と問題になってくる部分が出てきました、自分が問題だと思ったのは以下の部分です。, WordPress Popular Postsはサイトへアクセスするたびに集計して人気記事のランキング表示をするため、データ量や集計処理が膨大になってページの表示が重くなってしまうんですよね。, ブログを長く続けていくほどにデータ量や集計処理は膨大になっていくため、後々になってページの表示が重くなったり特定の記事がバズったとき(急激にアクセスが増えたとき)にCPU負荷が高くなりレンタルサーバーから警告を受けやすくなったりする可能性があります。, 以下のようなサイトでは人気記事のランキングが固定されやすく、使う意味がなくなってきます。(自分のサイトも含めでしたが。), 検索流入メインのサイトだと検索で上位に表示されやすい記事ばかりが見られる傾向が強く、さらに離脱率及び直帰率が高くてあまり頻繁には記事を書かないサイトだとそれが特に顕著に表れますからね。, サイト運営という意味では、ちょくちょく質の高い記事を書いたり離脱率及び直帰率を低くする対策をすべきですが・・・忙しくて記事を書けなかったり単に記事のネタがなかったりとなかなか上手くいかない部分があります。, 上記の問題があった為、いっそのこと自分で選んだピックアップ記事を表示すればいいんじゃないか?と思い、カスタマイズして表示させてみることにしました。, プラグインなしでWordPressに「おすすめ記事」を表示する方法 http://hapisupu.com/2015/11/wordpress-popular-posts-display-ranking-only-css/, 実装イメージとしては上図のように左側にアイキャッチを縮小した写真が入って右側に記事のタイトルが含まれたものです。これをサイドバーのウィジェットエリアに含めて縦に複数並ぶように実装しました。左上にCSSのカウンタも付けました。, まずは、あらかじめ自分でピックアップ記事として表示させる記事を選んでおき、その記事のアイキャッチを縮小した画像を作っておき「WordPress管理画面」⇒「メディア」⇒「新規追加」から画像をアップロードしておきます。, なお、自分のサイト用にはアイキャッチを縮小した画像は「80px × 80px」のサイズにしてアップロードしました。サイドバーの幅が300px程度であればこのぐらいがちょうどいいです。, 次は、「外観」⇒「ウィジェット」で「テキスト」というウィジェットを表示させたい任意の場所に入れます。, 「タイトル」はおすすめ記事やピックアップ記事などがいいですね。自分はピックアップ記事としました。, 「内容」に以下のようにHTMLのコードを記述します。(縦に3つ表示させる場合です。), 次に表示の調整のためにCSSを記述します。 記事タイプ 設定完了! これでピックアップ設定は完了です! ピックアップに表示される画像は、記事の「アイキャッチ画像」を取得してくるので、そちらも合わせて設定をしておきましょう。画像サ … ぶっちろぐ 別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。, 今回は、WordPressテーマ THE THOR(ザ・トール)での「サイドカラムにピックアップ記事設置」のカスタマイズについてまとめてみました。, 現状、WordPressテーマ THE THOR(ザ・トール)には、ピックアップ記事掲載についてのウィジェットはありません。, サイドカラムにピックアップ記事掲載を行うには、「カスタムHTML」や「[THE]スタイルテキスト」などのウィジェットを使って表示させる必要があります。, 「カスタムHTML」のウィジェットを使ってピックアップ記事を掲載しても良いのですが、記述が面倒なので今一歩やる気が起きません。, そこで「[THE]スタイルテキスト」のウィジェットを使って、ショートコードの「ブログカード」及び「サイトカード」を記述しピックアップ記事として表示する方法を行うことにしました。, しかし、ここでWordPressテーマ THE THOR(ザ・トール)の大きな欠点を発見してしまいました。, それは「[THE]スタイルテキスト」のウィジェットには、タイトル設定の項目がありません。, これはWordPressテーマ THE THOR(ザ・トール)側のミスだとしか思えません。, タイトル設定が不要の場合は何も設定しなければ良いので、タイトル設定の項目が有るべきだでしょう。, しかも「[THE]タブコンテンツ」のウィジェットには、タイトル設定の項目が用意されています。, そして検討した結果、「[THE]タブコンテンツ」のウィジェットを使って「サイドカラムにピックアップ記事設置」のカスタマイズを行いたいと思います。, なお、既に「[THE]タブコンテンツ」のウィジェットを使っている場合は、その設定されている「[THE]タブコンテンツ」の表示が崩れるため、今回の「サイドカラムにピックアップ記事設置」のカスタマイズが出来ないと思います。, WordPressテーマ THE THOR(ザ・トール)での「サイドカラムにピックアップ記事設置」のカスタマイズを行います。, 「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。, 今回のカスタマイズによって、「サイトカード」を使った場合の「サイドカラムにピックアップ記事設置」のスタイルは次の様になりました。, 次に、今回のカスタマイズによって「ブログカード」を使った場合の「サイドカラムにピックアップ記事設置」のスタイルは次の様になりました。, 今回「サイトカード」と「ブログカード」を使いましたが、他ブログサイトの記事もピックアップ記事として表示したい場合は「ブログカード」だけを使うのが良いでしょう。, 他ブログサイトの記事は表示しない場合は「サイトカード」だけを使うのが良いでしょう。, 自分の場合は他ブログサイトの記事もピックアップ記事として表示するので「ブログカード」だけを使う予定です。, なお、「[THE]スタイルテキスト」のウィジェットにタイトル設定できるようになればそちらで対応しようと思います。, 大学生と高校生の二人娘のパパで弱小ブロガー。初めてのPCはMZ-80C、その後MZ-80B、PC-8001/8801/6601/9801/88VA等を経て現在のメイン機はRyzen 7 3700X搭載の自作PC。WordPressテーマ CocoonとTHE THOR(ザ・トール)を使って3つのWordPressブログサイトを運営中。このサイトのWordPressテーマはCocoonを使用。PC関連のレビュー記事ご依頼承ります!, ZMASAa.blog

.

黒い砂漠 リベルト 修理, アドレスバー 非表示 スマホ, アクア 補機バッテリー交換 費用, 反対に 英語 文頭, 神保町 二郎 大 量, ポケモン ぬりえ ジガルデ, 筋トレ後 糖質 おすすめ, モンステラ 支柱 ココスティック, ホーム画面に追加 ない Ios14, カントリーロード 無料 楽譜, プレマシー 故障 多い, クロスバイク 後輪 外し方, 宅本便 クーポン 2020, 心不全 嘔吐 なぜ, 台風 動き方 理由, Gmail 迷惑メール 解除 ドメイン, パソコン 起動 黒い画面 英語 F1, 池袋 ハンバーグ 宮崎亭, ワード 表 ページまたぎしない, ケーブルテレビ 無料視聴 チューナー, Office365 プロダクトキー 確認, 印刷 レイアウト アプリ, ブライアン モノマネ 韓国語, クリスタ アニメーションセル 使い方,