サイトのデザインを改善する－備忘録

2019-09-062019-10-31

Contents

1. サイトのデザインを改善する４つの方法

サイトのデザインを改善する４つの方法

　この記事は、今実行しつつあるWebサイトの移行の際に、サイトのデザインを改善する方法を、備忘のためにまとめたものである。参考になる人もいるだろう。

　WordPressのサイトのデザインを改善する方法として、大別して４つの方法がある。

　①　エディターによる

　②　「カスタマイズ」する

　③　ＣＳＳを編集する

④　テンプレートを編集する

①のエディター

　①は、そのページの文書に手を入れるというワープロレベルの文字の装飾作業なので、誰でも多少なりともしていることだろう（プラグイン「TinyMCE advanced」を導入するとできることが少し増える。なおこのプラグインの高度なオプション「Keep paragraph tags in the Classic block and the Classic Editor」をチェックしておくと、ビジュアルとテキストを行き来するときに起こる整形崩れを防止できる。）。エディターをGutenbergにすると更にいろいろなことができそうだが、その分、混乱しそうだ。Gutenbergへの移行は、後日とする。「TinyMCE advanced」は、Gutenbergにも対応している。

②の「カスタマイズ」

②の「カスタマイズ」には、WordPress本体、テーマ（私は、今は、Lightning Proを使用している。これにデザインのための専用のプラグインが二つ付加される。VK ExUnitとLightning Fortである。）、そしてプラグインによって設定できる項目の大部分が集まっている。「カスタマイズ」に表示される項目は、使用するテーマによって全く異なっているようだ。WordPress本体やプラグインでの設定との関係が分からない点もある。これらのプログラム全体は非常に複雑になっているので、当然、バグもある。したがって「正解」を求めてその解明にこだわるのはあまり生産的ではない。触って少しずつ理解し、できる範囲で設定するのがいいのだろう。
因みに私の上記の環境での「カスタマイズ」項目は、「サイト基本情報、メニュー、ウイジェット、ホームページ設定、追加 CSS 、関連記事、Lightningライセンスキー」、「Lightning font awesome」、「Lightningヘッダー上部設定」、「Lightningデザイン設定」、「Lightningトップページスライドショー」、「Lightningトップページ PR Block」、「Lightningページヘッダー設定」、「Lightningコピーライト設定」、「Lightningアーカイブページレイアウト」、「Lightningフォント設定」、「Lightningモバイル固定ナビ」、「Lightning Google タグマネージャー」、「ExUnit設定」である。
ウイジェットと「ExUnit設定」の詳細が今ひとつピンとこない。Lightning ProかLightning Fortは、最初からサイドにウイジェット設定しているのか、あるいは原因は他にあるのか、今のところ、投稿画面でずらずらと並んだアーカイブが消せない（→そのとおりだと、サイドバー（投稿）のウイジェットに説明があった。おやおや。）。その他にも今一つ分からないものがある。それはどうでもよさそうだ。

③のＣＳＳの編集

これは今までもやってきたことだが、改めてやろうとすると、混乱してしまう。

要は、ＣＳＳを書ける場所を探し（今の私の環境では「カスタマイズ」の「追加 CSS」）、そこにセレクタとＣＳＳを書けばいいだけだ。ＣＳＳの書き方と種類はいろいろな情報をみていくとどうにかなるが、問題は、セレクタだ。特にClassセレクタ（.）とidセレクタ（#）、子孫セレクタ（半角スペース）、複数セレクタ（,）、疑似クラス（マウスが載っている場合は :hover）の書き方は、すぐに忘れてしまう（「WordPress はじめてのデザイン＆カスタマイズ入門」の２２２頁以下参照）。

　さらに問題は、ＣＳＳを適用したいセレクタの見つけ方だ。これもやり始めると嫌になるが、とにかく、「①変えたい場所を右クリック、②「検証」をクリック、HTMLがElements、CSSがStyles、③「４角で左上矢印の記号」をクリック、変えたい場所にマウスを持って行く（変えたい場所とElements、Stylesの色が変わる）、④そこで該当すると思われるElementsを右クリック、でてくるCopy→Copy selectorをクリックすると、該当するセレクタがコピーされるので、貼り付けて加工する」という手順だ。シミュレートもできる（上掲書２２８以下参照）。
下線部分が、胆だ。