WordPressのテーマを作り，ウェブサイトを開設する．

HTML，CSS，PHPの勉強のためにWordPressを用いたテーマを作成し，ウェブサイトの開設をしてみることにした．
これは，その上で参考にしたサイトや何をやったかの覚え書きである．

テーマ作成

骨組み作り

オリジナルテーマの基となるものを作成する際に，主に次のサイトに沿う形で作成させていただいた．

また，以下のサイトも参考にさせて頂いた．

ヘッダー

ヘッダーメニューは当分使用する見込みがないことから削除．

代わりに，スマホ・タブレット版において，右上のメニューからサイドバーが表示されるように変更した．この動作にはもう少し検証が必要そうである．

サイドバー

長くなるので，このページにまとめたので参照のこと．

検索窓のスタイルは少しいじった．

タイトル回り

パンくずリストを追加（最大2カテゴリー←うまくいかなかったので廃止），最終更新日を追加，タグを移動，その他デザインの変更

フッター

フッターからトップに飛べるように変更

固定ページ

今のところ，固定ページはトップでしか使う予定が無いので，サイドバーを削除してしまった．これに伴い，スマホ・タブレット版の右上のメニューアイコンも固定ページでは表示しない．

アーカイブページ

サムネがある場合は，右に設置．テキストとかぶらないように，text-with -thumb 属性を付与し，右側に margin を取るようにした．

ない場合は text属性のみ付与されるので，右側の margin が付与されない．

本文の要素

見出し

デザインの変更，H5は1.5remだけindentすることにした．それに伴い，本文もindentさせるindentクラスを追加

引用

引用時のデザインを次のサイトを参考に作成した．

サンプルの20番を基に作成させて頂きました．

表

間隔と色味を調整した．

tableのwidthを100%→autoに変更した．

中央配置（fugure のクラス aligncenter），右揃え fugure のクラス alignright） を実装した．

箇条書き

黒丸だと味気ないので，オレンジの四角に．
さらに，2階層以下のものはオレンジの三角を導入した．

参考にさせて頂いたサイトは以下

before疑似要素で描いており，位置の微調整がフォントサイズによっては必要な可能性がある．

また，リストの直下のリストの終了後にスペースが開かないようにmargin-bottomを調整してある．

box

内容を強調したい時の書式としてboxクラスを導入した．div, p, ul, ol タグに対応．スマホ版のみ，レスポンシブルデザインに対応．

Mathjax

次の奥村先生のページから，スクリプトを利用させて頂きました．

奥村晴彦「MathJaxによる数式表示」 https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html

Highlight.js

書いていたら量が多くなりすぎてしまったので，これも別ページに移転

プラグイン

とりあえず入れてみたプラグイン一覧

  • Duplicate Post : 記事を複製するためのプラグイン
  • Easy Table of Contents : 目次作成をしてくれるプラグイン，サイドバーで使用
  • Redirection : リダイレクトを設定してくれるプラグイン

AweSome

AweSome のフォントがひたすら表示されなくて，とても困った．

そんな時に救ってくれたページがこちら

まさにドンピシャ，原因はフォントの指定でした．

.widget_nav_menu li a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f105';
}

こんな感じで，font-family に ‘Font Awesome 5 Free’ ときっちり書かないといけないそう．また，font-weight は free版だと，400 か 900 しか選べないそうな．

そういえば作り途中だった気がするものたち