Categories
Uncategorized

cocoon 新着記事 サムネイル 14

前回の投稿から二十日以上空いて二度目の投稿になります、網干と申します。 レイアウトがうまく変えれず、四苦八苦しているのです。, 最近の記事を3件表示して そのため「phpスクリプトを使用して固定ページにカテゴリー記事の一覧情報を載せたい!」と考えても実現できません。 いやこの「新着記事」の表示っていらない、というか余計じゃない?だって、訪れた読者が常にこのブログ見ていて新着記事を心待ちにしてるわけないし、新着記事!って表示しても人気記事みたいに面白いないかどうかもわからないんだよね?だったらわざわざ表示する必要ないじゃん..., その考えは基本的に今も変わってませんが、考え方が逆で「ブログのファンになってもらえるような、新着記事を待ち望んでもらえるようなブログにしていくこと」が重要であり、そういった未来のブログにとって必要な「新着表示」でもあるわけですね。, ブログが息をしていることの証明の1つでもあり、このブログは最近どんな記事を書いているか、その傾向を端的に示すのもこの新着表示。, あなたのブログも単に新着表示を形だけしている、というのではなく、訪れる読者にとって価値あるブログにすべく、記事も、みかけのデザインも、1つづつより良いものにしていきましょう!, ということで、テーマによっては元々新着表示の機能が付いているものも多くありますが、ここでは私も愛用のプラグイン「Newpost Catch」を使って、その使い方から、かっこ良く独自のデザインカスタマイズの方法まで解説します。, 別記事で解説している人気記事表示のデザインカスタマイズと合わせ、あなたのブログをかっこ良く飾って読者の心を ( ´∀`)bグッ! 今回は、WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事(サムネイル、タイトル、投稿日、記事概要のみ抜粋)の一覧を表示する方法を掲載します。WordPressのfunction.phpに本記事で掲載するプログラムをコピペするだけで記事の一覧が表示できます! そのため、コードを実行するとカテゴリー番号12の最新記事を二つ表示することになります。, ※カテゴリーの番号は下記の手順で確認できます。 今回は、WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示する方法を掲載します。 自由なスタイルでカテゴリー記事の一覧を表示することができます。, なお、今回の記事一覧を表示するために設定したスタイルは下記になります。 今回はプラグインをインストールせずに、ショートコードを使って固定ページにカテゴリー記事の一覧を表示する方法を掲載します。, ショートコードとは、複雑なプログラムを短いコードで動作させることができる機能です。 (低くしたければ 150px を 100px に、もっと高くしたければ 180px 等に変更すればOK), 背景色は background-color の値で決まります。 カッコいいレイアウトできると良いですね!, 名古屋大学大学院卒業後、大手電機メーカー就職。朝7時に家を出て帰宅は夜中を過ぎた後、といった多忙な時期を過ごした後、自由に憧れ早期退職。海外移住した後、本格的にネットビジネスの道へ入る。, ネットビジネスでは1年半独学でやって全くダメ。その後指導を仰ぎ、その1年目に月収20万円、2年目には年収1000万円達成。2018年にはコンサル生の平均月収最高200万円、2019年には最高500万円の達成など実績者を輩出中。, 現在は海外にいながら自分らしく生きることを追求するとともに、日本国内、海外に住むネットで収入を得たい方に対しネットビジネスを成功に導き、時間や場所、不要な人間関係にとらわれず自由を得る人、会社、社会に依存しないで自由に稼ぐ人を増やすことに全力を注いでいます。, 初心者だった頃「こういったものが欲しい!」と心に描いていた想いを形に制作した、ネットビジネス学習の決定版!, 知識ゼロ、これから始める初心者の方、年齢、性別問わず、初歩の初歩からどなたにも楽しみながら学べるコンテンツ。, 別記事で見たGoogle Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。実際に修正したり他から持ってきたCSSをブログに反映するには、1)使用しているテーマのスタイルシートに直に書き込む2)プラグインを利用したスタイルシートに書, WordPressでブログを運営する上で、なくてはならないものの1つが人気記事の表示です。まだプログに慣れてないと”いいなー、人気記事。どうやって表示するんだろう”なんて考えているかもしれませんね。(私がそうでしたし ^◇^)ゞ ) 続いてサイドバーに設置します。 ここではテーマ「賢威」を使いますが、他のテーマでも基本は同じです。 まずは変更前の外観を確認しておきましょう。 このテーマ「賢威」の場合、非常にシンプルに「最近の投稿」という形で、新着の投稿がテキストのタイトルだけで表示されています。 このテーマの良さでもあるシンプルさですが、この「最近の投稿」を今ダウンロードしてインストールした「Newpost Catch」と入れ替えて、かっこ良く見せよう!というわけです。 http://wpdocs.osdn.jp/テンプレートタグ/get_the_post_thumbnail, プログラムの仕込みは完了しました、さっそく使ってみましょう。 記事がお役に立てたようで嬉しいです。^-^) The following two tabs change content below.

CSSで、nth-child を調べてみてください。, 疑似クラスと呼ばれるものの1つですが、これを使うと何番目はどうする、ということができます。 プログラムの初歩的なミスで一時間ほど唸っていました、網干です。PHPで変数に代入した数値を使って計算を行った際に、正常に計算されないバグに1時間ほど悩んでいまし... ネット上で見かける言葉を誤解したまま使うことが稀にあります、網干です。数年前は'lol'(笑いを意味する英語スラング)を知り合い同士でよく使っていました... Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!, WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示して指定期間内の記事タイトルに文字列を追加する方法, カスタム投稿の指定タクソノミー(カテゴリ)の投稿記事のカスタムフィールドのラベルと値を取得する, // 一覧記事取得関数 --------------------------------------------------------------------------------, // 呼び出し元での指定も可能 -> [getCategoryArticle num="x" cat="y"], '&order=DESC&orderby=post_date&category='. 本記事のプログラムを使用して、新着記事に「NEW」の文字を追加する記事を追加しました!, [2018/02/26 追記] …と偉そうに終わらせようとしましたが、今回紹介したコードはもっと良い組み方があると思います。 コメントありがとうございます。

1. 1つ目の右隣に2個目、3個目を縦に並べたいのです。, レイアウトの話ですが、レイアウト自体はできると思います。 記事にサムネイル画像が設定されている場合は表示されて、設定されていない場合は何も表示しません。 「サルワカのトップページのように上部に人気記事一覧を設置したい」という要望を多く頂きましたので、カスタマイズの方法を紹介したいと思います。, スマホ表示の場合にも、次のように2列で表示されます(新着記事一覧は、通常通り1列での表示となります)。, ウィジェットを使って設置する場合は、「トップページ記事一覧上」のウィジェットに「カスタムHTML」を追加し、下記のコードを貼りつけてください。なお、ウィジェットのタイトルは空欄にしてくださいませ。,

が1つのカードを表現するカタマリです。上のコードでは、2つだけ載せています。必要に応じて複製しましょう。, 上で貼り付けたコードのうち、★の部分を書き換えます。「★リンク先URL★」と「★タイトル★」は説明するまでもないですね。「★★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。, 画像を貼り付けたら、ビジュアルではなくテキストエディタを開き、をコピーしてコードの方に貼れば良いわけですね。★は消すようにしてくださいね。ここまで出来たら一旦保存しましょう。, トップページ記事一覧上のウィジェットにより設置する場合にはCSSが上記とは少し異なります。以下のCSSを使うようにしてくださいませ。, 子テーマを使ったカスタマイズは、中級者〜上級者向けの内容です。HTMLとCSSの書き方がある程度分かる方のみカスタマイズを行って頂くようお願いします。, ここでは、子テーマを使ってのカスタマイズ方法を紹介します。導入方法は次の記事を参考にしてください。, まず、子テーマフォルダ(ディレクトリ)の中にpartsという名前のディレクトリを作成します。FTPソフトにもよりますが、右クリックで「ディレクトリを作成」というメニューが表示されるかと思います。名前をお間違えのないように。, ここで親テーマディレクトリを開きます。さらに、この中のpartsディレクトリを開きます(さきほど子テーマ内に作ったものとは別です。親テーマの中のpartsです)。すると、post-grid.phpというファイルが見つかるはずです。, このファイルを子テーマのparts内に複製します。そのために一旦post-grid.phpを開いて中身を全部コピーしましょう(一字一句モレのないように)。, さきほど作った子テーマのpartsディレクトリを開きます。その中にpost-grid.phpという名前のファイルを新規作成し、中身にコピーしたコードを貼り付けます。, これで準備完了。すでに子テーマ内のpost-grid.phpが読み込まれるようになっています。, 子テーマ(親テーマではありません)の中のpost-grid.phpを開きます。このファイルの先頭に以下のコードを貼り付けます。★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。, 保存すれば、カスタマイズは完了です。ブラウザのキャッシュ削除やキャッシュプラグインのキャッシュ削除をお忘れなく。, ちなみに上のCSSの/*タイトル*/部分で「人気記事」のテキスト装飾を指定しています。好みで変えるようにしましょう。, コメント失礼します。 こちらの記事を参考にウィジェットを使って人気記事を表示したのですが、ウィジェットの背景が白いので浮いてしまいます。 背景はグレーなのですが、特定のウィジェットの背景を透明に出来ないでしょうか? ご教授いただけると嬉しいです。, お世話になっております。 SANGOいつも利用させていただいてます。 こちらの記事にあるように、ウィジェットで人気記事を作成しましたところ、表示されましたが、PC表示の際、下の新着記事とのサイズ感がどうにも気になり,,,解消する方法を教えていただければ幸いです。 ちなみにスマホではちょうど良いサイズ感で表示されてます。, 以下3点についてお聞きしたいです。 ・トップページに「おすすめ記事」と「ヘッダー」の間に隙間が空いてしまいます。どうすれば隙間を無くせるでしょうか。 ・おすすめ記事に掲載した記事の画像とタイトルの間に1行空白ができてしまいます。空白を無くす方法を教えてください。 ・サルカワさんと同じように、「ーーーーおすすめ記事ーーーー」のように、横に線をつけたい場合はどうすればいいのでしょうか。 よろしくお願い…, >ウィジェットで設置する手順3:コードを書き換え >「★★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。 こちらhtmlでしか表示されず投稿ページのように「添付ファイルの表示設定」の表示が出ないのですがどの様に設定すればよろしいでしょうか?, お世話になります。 「SANGOのショートコード一覧」で紹介されていたcard2の形を表示させたいのですが可能でしょうか?, サイトは非公開でお願いします。 タイトルのとおり、トップのおすすめ記事と新着記事の横のアイコンや、個別記事下の関連記事のアイコンが表示されません。 どうしてなのでしょうか?, 一応手順通りやり、2列できちんと一覧で表示させることができました。 しかし、画像URLやページURLを直接打ち込んでいることから、自動化できず、人気のものを都度自分で変更しないといけないという仕様なのでしょうか。 また、デモサイトのようにトップの左右に新着記事と人気の記事のボタンがあり、ボタンを押したらそれに対応した記事が出るようにしたいのですが、どうすればいいでしょうか。 何卒よろしくお願いいた…, いつもお世話になってます。新着記事には左上にカテゴリー名のタグが貼り付けられますが、人気記事の方にも貼り付けたいです。どのようにすればよろしいでしょうか?宜しくおねがいします。, お世話になっております。 何度も申し訳ありません。 パソコンで見ると、人気記事の画像がうまくはまっていない現象に悩んでいます。 (画像が左に寄ってしまい、右に空白が見られる。) スマホやタブレットは、問題なく表示されていますが・・・。 ご教授お願い致します。, 先日購入させていただきました。 デザイン等、気に入っております。 こちらのページを参考にし、編集を行っています。 しかし、スマホだと2列に表示されません。 また画像がずれてしまいます。 この二点を解決したいと思っています。 この場合どのようにすればいいでしょうか? この件とは違いますが、もう一点。 新着記事もスマホで2列表示したいのですが、どうすればいいでしょうか・・・。 お忙しい所申し訳ありませ…, お世話になっております。 こちらのページを参考にし、編集を行ったのですが、スマホだと2列に表示されませんでした。 この場合どのようにすればいいでしょうか?, お世話になります。 素晴らしいテーマありがとうございます。 このページでは指定した記事が 2列で綺麗に配置されるように 説明がされているかと思いますが、 1列にして中央にすることはできますでしょうか? (1記事だけで綺麗に見えるようにしたいです。) お忙しい中恐縮ですが、ご回答いただければ幸いでございます。 何卒よろしくお願いいたします。, 何度もコメントすみません。サルワカくん(https://saruwakakun.com)のトップページのように、『人気記事』『新着記事』の両側にボーダーラインを挿入する方法を教えていただけますか? よろしくお願いします!, シンプルで可愛らしいデザインが気に入って愛用させていただいています。 ウィジェットで人気記事を表示させる際、できるだけ多くの記事を表示させたいので「関連記事」のように横スクロールで表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。何卒よろしくお願いします。, * は入力必須項目です。コメント投稿ガイドラインを読んでから投稿してください。メールアドレスは公開されませんが、名前は公開されます。.

トヨタ ディスプレイ オーディオ ウーハー 8, Chromebook Youtube 動画編集 4, M1 2004 感想 4, 父 は 私 たち を ビーチ に連れて行く という 約束を覚え て� 6, Toshiba Function Key 無効 18, セロー キャニスター 取り外し 22, ウイイレ2018 マスターリーグ 急成長 5, お み コン 消防士 4, ノブ ファンデーション ブログ 4, 帽子 おでこ かゆい 33, サイレン 手動 アプリ 10, 浜学園 西宮 講師 12, Zara プリーツバッグ サイズ比較 46, 石井 小学校 児童クラブ 4, ペルシアン 初代 強い 18, Kindleアプリ 表示 されない 16, Twice サナ 本名 8, トムクルーズ 子供 何人 4, ドラゴンズドグマ マクシミリアン クエスト 13, パセトシン 犬 膀胱炎 14, 京都大学 Mba 学費 4, Jira カンバンボード スイムレーン 19, マイクラ 茶色い 土 6, Apple Music 音質 設定 Pc 8, Ztt Ttt 廃止 理由 4, グリッドマン 抱き枕 炎上 6, 岡田准一 熱 小説 15, 2012 ロンドンオリンピック 開会式 コロナ 10, 予習シリーズ 応用演習問題集 難易度 5, セルフカット ショート 女性 バリカン 8, 石原さとみ 美容 健康 5, 妊婦 寝返り うてない 12,

Leave a Reply

Your email address will not be published. Required fields are marked *