少しでも読者のためになる作り、内容を目指していきましょう。, プラグインでサイドバーには表示させず、 レイアウトがうまく変えれず、四苦八苦しているのです。, 最近の記事を3件表示して コメントありがとうございます。 [npc]を使って表示させようと思ってるのですが、 CSSで、nth-child を調べてみてください。, 疑似クラスと呼ばれるものの１つですが、これを使うと何番目はどうする、ということができます。 「サルワカのトップページのように上部に人気記事一覧を設置したい」という要望を多く頂きましたので、カスタマイズの方法を紹介したいと思います。 目次カスタマイズの完成イメージその1：ウィジェットを使った方法（簡単） … 本記事を参考にすることで、下記のようなページを表示することができます。, [2016/09/27 追記] [投稿]→[カテゴリー]のカテゴリー項目をクリックする, 2. 本記事のプログラムを使用して、新着記事に「NEW」の文字を追加する記事を追加しました！, [2018/02/26 追記] そのため、コードを実行するとカテゴリー番号12の最新記事を二つ表示することになります。, ※カテゴリーの番号は下記の手順で確認できます。 自由なスタイルでカテゴリー記事の一覧を表示することができます。, なお、今回の記事一覧を表示するために設定したスタイルは下記になります。 別途プラグインをインストールすれば、固定ページでphpスクリプトを機能させることも可能ですが、 使い方は非常に簡単で、固定ページに下記のコードを記述するだけでカテゴリー一覧を表示できます。, このように表示されます。 The following two tabs change content below. 1つ目の右隣に2個目、3個目を縦に並べたいのです。, レイアウトの話ですが、レイアウト自体はできると思います。 そのため「phpスクリプトを使用して固定ページにカテゴリー記事の一覧情報を載せたい！」と考えても実現できません。 一般的には”[xxx]”のように定義した名前をブラケット（大括弧）で囲って使用します。, コードの7行目で”num” => ‘2’と指定しているのは表示する記事数、 http://wpdocs.osdn.jp/テンプレートタグ/get_the_post_thumbnail, Googleストリートビューの過去画像でタイムスリップ！過去の建物や街並みをみて懐かしい気分に浸りましょう, ファッション系のECサイトで役立つ！服やアクセサリー画像の「着せ替えアプリ」機能の実装方法, WordPressのカスタム投稿の記事内に異なるカスタム投稿の共通カスタムタクソノミーターム一覧を表示させるループの作り方, GoogleAnalyticsのセグメントを活用してリファラースパムを除外したデータを取得する方法, 画面をキャプチャしてすぐに矢印や文字などの注釈を書き込める「SCREENPRESSO」が便利すぎる, 「Googleが掲げる10の事実」から学ぶWEBサイト作り Part4：努力は報われる, 【Photoshop】Photoshopで作ったテクスチャを使ってテキストをがっつり装飾するチュートリアル, Simplicityの固定ページに特定のカテゴリを表示する方法 | 時代は変わる(webdrawing), WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事（サムネイル、タイトル、投稿日、記事概要のみ抜粋）の一覧を表示する方法. 色のコードは、WEB色見本 原色大辞典 – HTMLカラーコード のサイトなどを参考にしてみてください。, 最後のカード型デザインのテストサイトとCSS全体は以下のとおり。 カテゴリーの編集画面のURLに記載された”tag_ID=xx”の”xx”部分がカテゴリー番号になります, functions.phpに記述する内容は以上になります。 「サルワカのトップページのように上部に人気記事一覧を設置したい」という要望を多く頂きましたので、カスタマイズの方法を紹介したいと思います。, スマホ表示の場合にも、次のように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：コードを書き換え ＞「★★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。 こちらhtmlでしか表示されず投稿ページのように「添付ファイルの表示設定」の表示が出ないのですがどの様に設定すればよろしいでしょうか？, お世話になります。 「SANGOのショートコード一覧」で紹介されていたcard2の形を表示させたいのですが可能でしょうか？, サイトは非公開でお願いします。 タイトルのとおり、トップのおすすめ記事と新着記事の横のアイコンや、個別記事下の関連記事のアイコンが表示されません。 どうしてなのでしょうか？, 一応手順通りやり、2列できちんと一覧で表示させることができました。 しかし、画像URLやページURLを直接打ち込んでいることから、自動化できず、人気のものを都度自分で変更しないといけないという仕様なのでしょうか。 また、デモサイトのようにトップの左右に新着記事と人気の記事のボタンがあり、ボタンを押したらそれに対応した記事が出るようにしたいのですが、どうすればいいでしょうか。 何卒よろしくお願いいた…, いつもお世話になってます。新着記事には左上にカテゴリー名のタグが貼り付けられますが、人気記事の方にも貼り付けたいです。どのようにすればよろしいでしょうか？宜しくおねがいします。, お世話になっております。 何度も申し訳ありません。 パソコンで見ると、人気記事の画像がうまくはまっていない現象に悩んでいます。 (画像が左に寄ってしまい、右に空白が見られる。) スマホやタブレットは、問題なく表示されていますが・・・。 ご教授お願い致します。, 先日購入させていただきました。 デザイン等、気に入っております。 こちらのページを参考にし、編集を行っています。 しかし、スマホだと２列に表示されません。 また画像がずれてしまいます。 この二点を解決したいと思っています。 この場合どのようにすればいいでしょうか？ この件とは違いますが、もう一点。 新着記事もスマホで２列表示したいのですが、どうすればいいでしょうか・・・。 お忙しい所申し訳ありませ…, お世話になっております。 こちらのページを参考にし、編集を行ったのですが、スマホだと２列に表示されませんでした。 この場合どのようにすればいいでしょうか？, お世話になります。 素晴らしいテーマありがとうございます。 このページでは指定した記事が 2列で綺麗に配置されるように 説明がされているかと思いますが、 1列にして中央にすることはできますでしょうか？ （1記事だけで綺麗に見えるようにしたいです。） お忙しい中恐縮ですが、ご回答いただければ幸いでございます。 何卒よろしくお願いいたします。, 何度もコメントすみません。サルワカくん（https://saruwakakun.com）のトップページのように、『人気記事』『新着記事』の両側にボーダーラインを挿入する方法を教えていただけますか？ よろしくお願いします！, シンプルで可愛らしいデザインが気に入って愛用させていただいています。 ウィジェットで人気記事を表示させる際、できるだけ多くの記事を表示させたいので「関連記事」のように横スクロールで表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。何卒よろしくお願いします。, * は入力必須項目です。コメント投稿ガイドラインを読んでから投稿してください。メールアドレスは公開されませんが、名前は公開されます。.

.

Jabra Elite Active 75t ノイズキャンセリング 7, アニマウェポン 見た目 ナイト 8, ラズパイ Usbカメラ Python 5, Http Tmqa Jp Dm 7, 一条 工務店 風呂 蛇口 7, パチンコ 釘 通報 4, The Best 使い方 4, 保育園 4月入園 6月復帰 7, レゴ マーベル スーパー ヒーローズ2 クリア 後 12, 犬 皮下点滴 嘔吐 26, 壁紙 補修 100均 4, 面接 遅刻 辞退 5, ドキュ ワークス ライトプロテクト 9, カナレ など の 国産 メーカー スピーカー ケーブル 5, 前髪 薄くする ポニーテール 5, Autocad 引き出し 線 消える 6, ポケモンgo シャドウウツボット 技 15, Esp32 Cam 人感センサー 5, Ykk 取 説 4, コストコ フードコート ピザ 何人前 10, Ja 山梨 桃 5, オリックス 配当 いつ 25, ジョブ ディスク リプション 日本企業 12, Amd Cpu Ryzen 4, 水道使用量 平均 一人暮らし 4, 宇部商 野球部 古谷 6, 高校生カップル 妊娠 炎上 15, Vscode 自動整形 C++ 8, Access Vba Excel エクスポート フィルタ 6, Iphone Se ガラスフィルム 浮く 13, 手ぬぐい ロンパース 作り方 6, Kスタンプ Windows10 使い方 5, 横断歩道 設置基準 間隔 12, 鬼滅 の刃 グッズ 大須 8, F36 デイ ライト 4, 第五人格 ガチャ 確率 リセット 10, Game Watch Crack 5, 総合 格闘技 ジム 11, 故 亡き 違い 11, Capture One 調整 コピー 8, 変圧器 Va 計算 5, 猫 初日 寝ない 4, 勝 富士 相撲 4, Hori Hp3 185 A 説明書 8,