(WordPressテーマ THE THOR 使用) パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト 自作PCやソフトウェア、WordPressなどPC関連専用のWordPressブログサイト 無料WordPressテーマ Cocoon WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新... クイックタグとは THE THOR(ザ・トール) バージョンアップにより、ピックアップ記事を表示できる場所が増えました。 https://4536.jp/ver1-0-4 従来のピックアップエリア(本文の下部分)への表示と同じく、記事にタグを付けるだけで簡単に表示することが可能です。 脱プラグインのために今後もできるだけ自分で実装できる機能は自分で実装していこうと思います!, Webサイト制作、情報セキュリティ、アート(デジタルで抽象画)などをやっているクリエイターです。2017年5月ごろよりベジタリアンでもあります。, 【WordPress】ウィジェットエリアに自分で選んだピックアップ記事を表示する方法, 「WordPress Popular Posts」はアクセスのたびにプログラムを実行する必要があるため、サイト表示が重くなる, WordPress Popular Postsはサイトへアクセスするたびに集計して人気記事のランキング表示をする, ※ ご使用のWordPressテーマによって「!important宣言」が必要だったり要らなかったり「margin」や「padding」の調整などを合うように調整してください。, WordPress の隠しページ!? この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 パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト (WordPressテーマ THE THOR 使用) 自作PCやソフトウェア、WordPressなどPC関連専用のWordPressブログサイト パソコン選びのコツ スライドさせることもできますよ、「JavaScript 横スクロール 自動」などで調べてみてください!, 国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。他のWordPressテーマと思いっきり差別化を図ってみませんか?, レビューが投稿できるよ!無料WordPressプラグイン「Shinobi Reviews」をリリースしました!. WordPressテーマ Cocoonの「サイドバーにピックアップ記事設置」のカスタマイズについてまとめてみました。今回のカスタマイズでは「カスタム HTML」のウィジェットを使ってサイドバーにピックアップ記事の項目を設置してみました。 「外観」⇒「テーマの編集」⇒「style.css」に記述しました。, 要するに、今回の方法は自分で選んだピックアップ記事をプラグインを使わずにhtml,cssを記述するだけで表示させよう!という方法です。 (WordPressテーマ Cocoon 使用), WordPressテーマ http://hapisupu.com/2015/11/wordpress-popular-posts-display-ranking-only-css/, 実装イメージとしては上図のように左側にアイキャッチを縮小した写真が入って右側に記事のタイトルが含まれたものです。これをサイドバーのウィジェットエリアに含めて縦に複数並ぶように実装しました。左上にCSSのカウンタも付けました。, まずは、あらかじめ自分でピックアップ記事として表示させる記事を選んでおき、その記事のアイキャッチを縮小した画像を作っておき「WordPress管理画面」⇒「メディア」⇒「新規追加」から画像をアップロードしておきます。, なお、自分のサイト用にはアイキャッチを縮小した画像は「80px × 80px」のサイズにしてアップロードしました。サイドバーの幅が300px程度であればこのぐらいがちょうどいいです。, 次は、「外観」⇒「ウィジェット」で「テキスト」というウィジェットを表示させたい任意の場所に入れます。, 「タイトル」はおすすめ記事やピックアップ記事などがいいですね。自分はピックアップ記事としました。, 「内容」に以下のようにHTMLのコードを記述します。(縦に3つ表示させる場合です。), 次に表示の調整のためにCSSを記述します。 パソコン選びのコツ WordPressでブログを書いている方で人気記事のランキングを表示させている方は多く、人気記事のランキングを表示させるのに便利なプラグイン「WordPress Popular Posts」を使うと簡単にウィジェットエリアに表示させることができます。実際、自分も使っていました。, しかし、ブログ運営を続けている上で人気記事のランキング表示では色々と問題になってくる部分があり、いっそのこと自分で選んだピックアップ記事を表示させてみよう!と思って表示させてみましたのでそのカスタマイズ方法となります。, 自分のサイトでも人気記事のランキングを表示させるのに便利なプラグイン「WordPress Popular Posts」を使って人気記事のランキングを表示させていましたが、色々と問題になってくる部分が出てきました、自分が問題だと思ったのは以下の部分です。, WordPress Popular Postsはサイトへアクセスするたびに集計して人気記事のランキング表示をするため、データ量や集計処理が膨大になってページの表示が重くなってしまうんですよね。, ブログを長く続けていくほどにデータ量や集計処理は膨大になっていくため、後々になってページの表示が重くなったり特定の記事がバズったとき(急激にアクセスが増えたとき)にCPU負荷が高くなりレンタルサーバーから警告を受けやすくなったりする可能性があります。, 以下のようなサイトでは人気記事のランキングが固定されやすく、使う意味がなくなってきます。(自分のサイトも含めでしたが。), 検索流入メインのサイトだと検索で上位に表示されやすい記事ばかりが見られる傾向が強く、さらに離脱率及び直帰率が高くてあまり頻繁には記事を書かないサイトだとそれが特に顕著に表れますからね。, サイト運営という意味では、ちょくちょく質の高い記事を書いたり離脱率及び直帰率を低くする対策をすべきですが・・・忙しくて記事を書けなかったり単に記事のネタがなかったりとなかなか上手くいかない部分があります。, 上記の問題があった為、いっそのこと自分で選んだピックアップ記事を表示すればいいんじゃないか?と思い、カスタマイズして表示させてみることにしました。, プラグインなしでWordPressに「おすすめ記事」を表示する方法 ぶっちろぐ 過去記事の内容を修正、追記したことをユーザーに通知したい時があります。ですが、WordPress には新着記事の通知ウィジェットはありますが、過去記事の修正通知をする機能がありません。, 前回記事で書いた、記事の公開日と更新日を判定して、新しい日時順に公開記事と更新記事を「新着・更新記事」として一緒に表示する方法を、サイドバーに表示できるよう、ウィジェット化しました。, ウィジェットは「初期化処理」、「表示処理」、「設定の更新処理」、「設定用フォーム」の4つのメソッドから構成されます。 「この記事読んで欲しいなぁ」と思っても、期待通りの結果にならないのが、サイト運営の難しいところ。, SEOの知識が豊富であれば、狙って検索エンジンに上位表示させることができるかもしれませんが、ほとんどの人にとっては至難の業であることは言うまでもありません。。, ただ、その問題を解決する簡単な方法があります。それは、よく読まれる記事を経由して読んでもらうこと。, どんなにPV数が少ないサイトにも、「他の記事よりも読まれる記事」というのは存在するので、PV数関係なく、どのサイトでもできる方法です。, ちなみに、トラフィックの多いサイトであれば、「トップページ(サイドバー)の一覧表示の先頭に固定する」という方法も効果的ですが、ほとんどのサイトでは効果がない方法です。, さて、先述のようなサイト構造にするためにはいくつか方法がありますが、今回は、「プラグインなしでピックアップ記事を表示するカスタマイズ」をご紹介します。, このカスタマイズをすると、“任意のタグ”を記事に追加するだけで”任意の場所”に”任意の記事”を横並びで表示させることができます。, そういったプラグインもありますが、非常に簡単なカスタマイズ(コピペOK!)ですので、プラグインを使う必要もないのかなと思います。, まずは、管理しやすいように、お使いのテーマの中に、空のファイル「pickup.php」を作成し、下記のコードをコピペします。, 今お使いのWordPressテーマのサムネイルが正方形の場合、先述のコードの「thum150」の部分を「thumbnail」にすればOKだと思います。, どんなサイズのサムネイルの画像を生成しているか調べる場合は「functions.php」を確認してみましょう。, 「横150px,縦113pxのサムネイル画像」を生成するために、fuctions.phpに下記のコードを追加します。(すでにコードがあれば、追加する必要はありません), また、ほとんどのテーマでサムネイル画像の表示をサポートしているはずですが、下記のコードがなければ追加する必要があります。, のどちらかがおすすめです。僕は、上記のコードを「single.php」に追加して、「記事下」に表示させています。, 人気記事をヘッダー下に横並びで表示させるカスタマイズ! Fantastech!! ピックアップ記事として一覧に表示したい数だけ入れておいてくださいね。 新規ウィジェット「WordPress Popular Posts」任意の場所に設置 「WordPress Popular Posts」をインストール&有効化すれば、ウィジェット一覧に「WordPress … WordPressで投稿記事内にコメントアウトを挿入する方法 WordPress の下 【WordPress】ウィジェットエリアに自分で選んだピックアップ記事を表示する方法 WordPress の下; クリエイティブな変人社員が会社にイノベーションをもたらす ライフスタイル の下 以前作成した、最新更新日順に公開記事と更新記事を「新着・更新記事」として一緒にサイドバーに表示する「... ///////////////////////////////////////////////////, 'border-radius:10px;width:75px;height:75px;float:left;margin-bottom:13px;', WordPress にYouTube動画やGoogleマップなどのメディアを表示する, WordPress の自動アップグレード中にメンテナンス中エラー表示がでた時の対処, WordPressの「インポート/エクスポート」を使ってサイトをバックアップし復元, WordPress Popular Posts ショートコードでカテゴリー別人気ランキングを表示, WordPress Popular Posts ショートコードで人気ランキングを表示する, WordPress Popular Postsの活用:閲覧数、人気ランキングを表示する, Simplicityの全体レイアウトを変更して低解像度のパソコンでも表示できるようにする, SEO対策に必須のSearch Consoleの活用法(キーワード分析と最適化編), 7行目:「僕のウィジェット」はウィジェットボックスの名前、「直近の新着・更新」はそのボックスの下に表示される説明文です。あなたの好きな名前と説明文に変更します。, 31行目:サムネイル画像は、WordPressの初期設定で100×100(thumb100)が作られていますので、CSSでそれを75×75に縮小し左寄せにして利用しています。, 25行目、31行目:表示を統一するため、人気記事表示ウイジェット「WordPress Popular Posts」の class:「class=”wpp-list”」(リンク表示)と「class=”wpp-views」(日付のサイズ縮小・イタリック表示)を流用しています。, 「更新記事(更新日順)」or「新着記事(公開日順)」のどちらを表示するか、をウイジェットから選択できる「表示モード」を追加. (WordPressテーマ THE THOR 使用) MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイト Copyright © 2018 MASAa.net All Rights Reserved. ウィジェットの設定. MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイト からあげ棒、ありったけ WordPressで投稿記事内にコメントアウトを挿入する方法 WordPress の下 【WordPress】ウィジェットエリアに自分で選んだピックアップ記事を表示する方法 WordPress の下; クリエイティブな変人社 … 全オプションが変更できる「All Options」, WordPressでブログサイトに海外テーマを使い続けてきて日本のテーマを使わなかった理由, 【WordPress】サイトを高速化するためにデータベースの最適化をして大幅に容量を削減できた方法, 【WordPress】プラグイン「Contact Form 7」のjsファイルとcssファイルを特定のページにだけ読み込む方法, WordPressで記事を読むのにかかる所要時間を表示させる方法2~WPtouchでのスマホ表示への対応方法~, 【WordPress】プラグイン「PHP Compatibility Checker」でPHP互換性チェックをしてみました, http://naokixtechnology.net/wordpress/951, http://hapisupu.com/2015/11/wordpress-popular-posts-display-ranking-only-css/, 【WordPress】プラグイン「Theme Check」でのテーマチェックの仕方, 【スマホ】タッチペン(The Friendly Swede マイクロニットハイブリッド繊維ペン)を使ってみた感想, 幻想的で美しいフラクタルアート[Fractal art] – Silvia Cordedda, 【WordPress】WP Super Cacheが有効化も削除も出来なくなった状態から削除できた方法, アイキャッチ縮小画像のURL⇒「WordPress管理画面」⇒「メディア」⇒「ライブラリ」からアップロードしたアイキャッチ縮小画像を選択して「URL」をコピーして貼り付けます。, アイキャッチ縮小画像の説明⇒「WordPress管理画面」⇒「メディア」⇒「ライブラリ」からアップロードしたアイキャッチ縮小画像を選択して「代替テキスト」をコピーして貼り付けます。. からあげ棒、ありったけ 別ブログの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 ぶっちろぐ Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!. (WordPressテーマ Cocoon 使用), WordPressテーマ チメブロ, WordPress blog site specialized in PC produce by masaa, MASAa.net | WordPress blog site specialized in PC produce by masaa, このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。, このMASAa.netを2018年9月25日に開設してから1年が経過しました。その間でWordPressテーマ Cocoonは大幅に機能が強化されています。と言う事で、現時点でのWordPressテーマ Cocoonの設定内容についてまとめてみました。, WordPressテーマ THE THOR(ザ・トール)での「ブログカードのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。ブログカードのアイキャッチ画像にホバーしてもズームされなくしてみました。, WordPressテーマ Cocoonでの「エントリーカード メタディスクリプション」のカスタマイズについてまとめてみました。今回のカスタマイズではメタディスクリプションにアンダーラインの表示や表示範囲に合わせて改行設定を行ってみました。, WordPressテーマ THE THOR(ザ・トール)での「関連記事の全域でホバーを有効にする」カスタマイズについてまとめてみました。今回のカスタマイズは関連記事の全域でホバーを有効にしホバー時の背景色に変化を付けてみました。, WordPressテーマ THE THOR(ザ・トール)での「ピックアップ記事をホバー時に浮かす」カスタマイズについてまとめてみました。今回のカスタマイズはサイドバーエリアの【ピックアップ記事】に対しホバーした時に浮かす処理を加えました。, WordPressテーマ THE THOR(ザ・トール)での「ヘッダーのメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、ヘッダーをグラデーション化するとメニューが目立たなくなるため、メニューの文字色を変更してみました。, WordPressテーマ Cocoonの「画像リンクのエフェクト処理」のカスタマイズについてまとめてみました。今回のカスタマイズでは、全ての画像リンク(一部アフェリエイト画像除く)に対しホバーエフェクト処理が実行されるようにしてみました。, 2020年8月11日にWordPress 5.5 “Eckstine”がリリースされました。今回はメジャーリリースとなるため手動でのアップデートとなります。と言う事で、WordPress 5.5 “Eckstine”についての記事です。, 【レビュー記事】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.

母の日 2019 花 12, パラブーツ タグ 切る 40, 日立 Yt T1 取り付け 4, フラダンス のイラスト の 描き方 4, 犬 死に際 隠れる 8, グループ通話 寝落ち 切り方 23,

Write a comment