今回はwordpressのtopページをオリジナルのhtmlでカスタムしてみたことについて書いていこうと思います。
HTMLファイルの作成
まずはwordpressの画面から「固定ページを追加」を選択。
次にカスタムHTMLから直でHTMLを書いていきます。
初心者の方はAIに「ブログのTOPページに使えそうないい感じのhtmlのサンプルください」なんて言えばすぐに作ってくれるので、それを張り付ければOKです！後から修正できますので。
下記のように、HTMLを張り付けたら右上の公開ボタンで公開します。インターネット上に公開されますが、このページへ遷移するリンクが存在しないので誰かに見られる可能性はとても低いです。
記事公開
公開すると、そのHTMLがブラウザ側で解釈されてwebページとして表示されますが、wordpressのデフォルトでサイドバーや、ヘッダーが付与されています。
本来こうなるはずが
下記のように、デフォルトの設定の中にページが表示されてしまっている。
このまま使えそうと判断した場合はこのままでOKで、細かい部分をAIと相談しながら先ほどのHTMLを編集していけば問題ないです。
一方で、完全に元のHTMLファイルの通りに表示させたい場合は、ページ設定から、「本文のみ」の項目からどれかを選択すればOKです。
ページ上部の空白削除
これもwordpressのデフォルトの設定かと思いますが（あまり詳しく調べてません）ページの上部に空白が表示されてしまうようです。
これはまず、webページの開発者ツールから、どの要素が空白を作っているかを見る必要があります。開発者ツールは該当ページでF12キー、もしくは該当ページを右クリック→開発者ツールで調査する、もしくはコントロールキーとシフトキーとiキーで開けます。
開いた後、一番左上のマークを押して、web画面にカーソルを合わせると、どこが該当のコードか教えてくれます。これを頼りに空白が構成されている箇所を探します。
私の場合は下記の要素が空白を作っていそうです。
そしたら次は下のタブの「Style」の一番下を見ると、その要素のどの部分が空白を作っているかが見れます。私の場合は、オレンジの部分が「margin」という空白になっていることがわかります。
同じように、緑の部分は「padding」という空白ということがわかります。
最後はこの空白を消す作業になります。
固定ページの編集画面の下に、カスタムCSSというところがあると思います。ここに不要な空白を消すコードを書けばOKです。コードに必要な情報は要素のクラス名です（IDなどでも問題ないです）。クラス名がわかれば後はAIに「○○というクラスに○○して」なんて言えば書いてくれます。
私の例ですと、contentクラスのmargin、mainクラスのpaddingを消せばよいことがわかります。オレンジの枠のクラスについて「content cf」とありますが、これは、「content」でも「cf」でもどちらでも使ってOKという意味です。ただ、他に同じクラスの名前がある場合はその要素にも同じ変更がされてしまうので、ご注意ください。
また、wordpressのデフォルトのmarginやpaddingの設定が優先されてしまうため、「!important」という要素を付けて、優先順位の高い要素であることをwebサイトに教えてあげる必要があります。
.content {
margin: 0 !important;
}
main {
padding: 0 !important;
}
すると、下記のように想定通りのwebサイトが表示されました。
まとめ
「ページ上部の空白を消す」ことを記事にしている人がいないように見えましたので、誰かのためになればと公開いたしました。これは需要がないのか、又はそんなこと誰でもわかるわ！って感じなのかわかりませんが、見ていてくれた方いればうれしいです。。。
コメント