固定ページでTop Page をリニューアル

2021年3月24日

ず～～っと気になってた「固定ページ」の存在
「固定ページ一覧」には「サンプルページ」と「プライバシーポリシー」があって

これはサンプルページです。同じ位置に固定され、(多くのテーマでは) サイトナビゲーションメニューに含まれる点がブログ投稿とは異なります。まずは、サイト訪問者に対して自分のことを説明する自己紹介ページを作成するのが一般的です。たとえば以下のようなものです。（中略）

新しく WordPress ユーザーになった方は、ダッシュボードへ行ってこのページを削除し、独自のコンテンツを含む新しいページを作成してください。それでは、お楽しみください !

独自のコンテンツを含むページ？意味不明　f(^ ^;)）です
好きに作れってことかな（笑）

理解に深い段差があって最初は「ホームページの選択」を「最新の投稿」にしてた

考える余裕が出来たところで、これってホームページ（TopPage）に使うものかなと、

そういうことでした(*^ー゜)b

gooブログから引っ越して1年強、やっとトップページを理解できた

早速リニューアルしてみた
SEO対策は気にしてないので、全部画像を使って目次らしきものにしました

新たに実装した吹き出しのコードのみメモっときます

参考にしたのは「サルワカ」さんのCSSで作る！吹き出しデザインのサンプル19選
class名のballoonは他で使用していたのでclass名を変更して実装

HTML

<div class="balloon2">  */ fukidashi に変更
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon2 {    */fukidashi に変更
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;      */濃いグレーに変更　#696969
font-size: 16px;
background: #FFF;
border-radius: 10px;　　*/枠の角に丸みをつける
border: solid 3px #555;     */濃いグレーに変更 #808080
box-sizing: border-box;
}
.balloon2:before {      */fukidashi に変更
content: “”;
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF;
z-index: 2;
}

.balloon2:after {      */fukidashi に変更
content: “”;
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;      */濃いグレーに変更　#696969
z-index: 1;
}

.balloon2 p {     */fukidashi に変更
margin: 0;
padding: 0;
}

固定ページは苦手なブロックエディタになってて (“＞ω＜)っ))
でも使ってみたら意外に便利
まず頭にタイトルって邪魔！！と思ったけど間違い！
サイトを確認したら頭頂部分ではなくフッター部分に表示されるものでした
名無しと表示されてるのでタイトルを「TopPage」としました

↑↑こんな感じの吹き出しです（三角部分の位置調整可能）m(_ _)m
枠線なしで色だけとか、会話風とか、丸っこいのとか、とか、いろいろです
サルワカさんのサイトに行ってみてください（笑）