出来上がったHTMLがコレ不要部分の削除これで完成!見え方はどうかな?新着記事も追加する場合トップページを改造したい!記事が少ないのにトップページをいじりたくて、あちこちのサイトから知恵を拝借してトップページを作った。自分のサイトの記事の内容がバラバラなので、新着記事が積まれていくだけでは楽しくない!と思ったのがきっかけ。検索でどこかのページに飛んでも、トップページにわざわざ行く人は少ない。私は、気に入った記事を見かけるとトップページを見に行きたくなる。どのような記事を書いているサイトなのか、全体がわかる気がするからである。トップページを改造するぞ!と意気込んだ私にとって、実現に役立つ手助けをしてくれたのが以下のサイト。意図した記事一覧を作成できる「ナビカード」ショートコードの使い方サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。wp-cocoon.com【Cocoon】固定ページを使ってトップページを作る!【コピペOK】どうも。ままん(@maman_selfish)です。相変わらずカスタマイズ沼の中にいます。笑Cocoonはそのままでも十分活用できますが、わたしのようにデザインが決まってないとヤル気でないぜ!!という方も、カスタマイズについての記事がすでにmama-n.netさて実践!こんな形にしたい!トップページにはカテゴリ別のほかに、新着記事も出したかったので、画像のようなカタチを思い描いた。それぞれのカテゴリ別に「見せたい記事」のナビカードを作るところから始めた。カテゴリごとにナビカードを作る詳しくは、わいひらさんのページをご覧いただきたい。説明がちゃんとできる自信はないので(汗)意図した記事一覧を作成できる「ナビカード」ショートコードの使い方サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。wp-cocoon.com新規メニューの作成1.メニュー画面から新しいメニューを作成。作りたいナビカードのタイトルを入力。カテゴリごとなら、カテゴリに近い名前にするとか。場合「sumai」)これをカテゴリの数の分だけ行う。2.表示オプションの設定をする。ページの上、「ヘルプ」の隣に「表示オプション」というタブが出ているので、それをクリック!「cssクラス」と「説明」にチェックを入れる。先ほど作ったメニューを一つ選んだら、「メニュー項目を追加」の下にある「投稿」を開く。表示させたい記事を決めたらチェックを入れて「メニューに追加」をクリック!すると「メニュー構造」欄に表示されるので、並べたい記事の数だけ「チェック」→「追加」を繰り返す。記事の順番を入れ替える、タイトルを短くする、リボンを付ける等を、各メニューごとに行う。class(オプション)の欄に、用途に応じて以下の番号を入れるだけ。試しに新規ページにショートコードを入れてプレビューしてみるとわかる。例として「sumai」というメニューを表示させる場合は、と記入。プレビュー画面でちゃんと出ていればOK!「>」という矢印は自動的につくのでご安心を。文字の太さや大きさは、私がどこかをいじった結果こうなっているのか、何もしなくてもこうなるのかは今となっては不明。(結構いじり倒したため)こうやって、カテゴリの分だけメニューを作成。次は、それらを合わせて固定ページを作成する段階へ。次の作業として、2カラムにして固定ページを作り、作ってあるナビカードをショートコードで呼び出すだけ。実際やろうとすると、私の知識では難しく、そこで頼りになったのが「ままん」さんのサイト。【Cocoon】固定ページを使ってトップページを作る!【コピペOK】どうも。ままん(@maman_selfish)です。相変わらずカスタマイズ沼の中にいます。笑Cocoonはそのままでも十分活用できますが、わたしのようにデザインが決まってないとヤル気でないぜ!!という方も、カスタマイズについての記事がすでにmama-n.netコピペOKというありがたい言葉に甘えて、HTMLをそっくりコピー。いじってから、新規作成した固定ページに貼り付けた。出来上がったHTMLがコレ実際のHTMLではなく、ウチのサイト用の情報を省いたもの。見出しの装飾は私のサイトのものなので、HTMLをこのまま使っても、見え方はこうならないけれど。こんなHTMLでもいい!という奇特な方は、どうぞご自由にお持ちください。(このサイトの見出し装飾の場合)不要部分の削除トップページとして使うので、投稿ページとして備わっているものは不要。固定ページのタイトル、シェアボタン、フォローボタン、投稿日、更新日はさくっと消してしまっても問題無い。そのためのソースも、ままんさんのサイトからいただいた。個別に消したい場合のソースもあったが、私のサイトは全部非表示にした。none;}貼り付け場所は固定ページの記事投稿画面の下の方にあるカスタムCSSという部分。これで完成!見え方はどうかな?ウチのサイトのトップページはこちらPCだと横2列で見えるけれど、スマホからは1列に見える。ウチのサイトの場合は以下を入れているが、詳しくはわいひらさんのサイト等でご確認を!以上が私のトップページの改造法。何か参考になれば幸いです。素人なので、間違いや勘違いがある可能性大!お気づきの点があれば是非教えてください。占いなんか!と思いつつ気になる小心者シャンパンにバラ、ホテルの心づくし決して姉妹で入ってはいけません努力が嫌いだった。そんな私がいま思うこと成田の母。占いの結果はどうか?その言葉を励みにずっと生きてきた。見つかりませんでした。スポンサーリンクこの記事を書いた人うわわ家族の引っ越しや仕事でバタバタしてばかり。インテリアコーディネーターの経験を生かしたWEB関係の仕事をしています。迷惑かけずに観るならポップコーンは持たせない。コメントをキャンセルメールアドレスが公開されることはありません。*サイト記事を書いている人うわわ家族の引っ越しや仕事でバタバタしてばかり。インテリアコーディネーターの経験を生かしたWEB関係の仕事をしています。金運アップの御守りとドクターシンの言葉。自分を見つめるきっかけにベッド収納なら、清潔に保てるBOX構造チェストベッドがおすすめ!人気ソファカバー厳選!あちこちのページで迷った人は、ここで解決!ぴったりフィットのソファカバー!ハイグレードお買い得商品を紹介!ネット副業。一度やめたが再挑戦!スキルアップできて稼げる副業は?「努力」が嫌いだった。そんな私がいま思うこと勤務地いろいろ。庶民的な住宅地と都会の一等地。自転車通勤はおすすめ!電車通勤との比較でみた自転車通勤のメリット口内炎を早く治したいなら、うがい薬でブクブクうがいがおススメ!【お手軽!】ビニール傘の目印にタオルホルダーを差し込んでみた!【Cocoon】好きな記事をカテゴリ別に並べてトップページに!幼児と映画館。迷惑かけずに観るならポップコーンは持たせない。記事を書いている人うわわ家族の引っ越しや仕事でバタバタしてばかり。インテリアコーディネーターの経験を生かしたWEB関係の仕事をしています。金運アップの御守りとドクターシンの言葉。自分を見つめるきっかけにベッド収納なら、清潔に保てるBOX構造チェストベッドがおすすめ!人気ソファカバー厳選!あちこちのページで迷った人は、ここで解決!ぴったりフィットのソファカバー!ハイグレードお買い得商品を紹介!ネット副業。一度やめたが再挑戦!スキルアップできて稼げる副業は?「努力」が嫌いだった。そんな私がいま思うこと勤務地いろいろ。庶民的な住宅地と都会の一等地。自転車通勤はおすすめ!電車通勤との比較でみた自転車通勤のメリット口内炎を早く治したいなら、うがい薬でブクブクうがいがおススメ!【お手軽!】ビニール傘の目印にタオルホルダーを差し込んでみた!【Cocoon】好きな記事をカテゴリ別に並べてトップページに!幼児と映画館。迷惑かけずに観るならポップコーンは持たせない。