カテゴリーを自分の好きなように並べたい

wordpressではカテゴリーは勝手に順序を入れ替えられてしまう。自分の並べたいように並べたいので、調べて「Category Order and Taxonomy Terms Order」というプラグインを導入。

「投稿」の部分に「Taxonomy Order」のサブメニューが出るので、それでドラッグアンドドロップできるようになりました。

だがサイト作成していると、パンくずリストにカテゴリーが反映されないケースあり。このCategory Order and Taxonomy Terms Orderを無効化すると直るので、パンくずリスト用プラグイン「Breadcrumb NavXT」と相性が悪いのでしょう。むむむ

ちがうプラグインを探したところ、「Intuitive Custom Post Order」というものにたどり着く。なんか和風な画像。作者が日本人とのこと。

こちらはパンくずリストには今の影響が出ていないです。こちらを継続ということで。

ロゴにもpixelatedをかける

サイト上部に表示されるロゴもドット絵で作っているのですが、拡大されているのか縮小されているのかぼやけて見える。

ので、ロゴにもドット絵作品画像のようなpixelatedなCSSを適応させたい。

wordpressのテーマ「Twenty sixteen」使用中。子テーマ「Twenty Sixteen child」を作成済。しそこに「header.php」を親テーマからコピー。それをいじる。

浅い知識でphpファイルを眺める。と「<?php twentysixteen_the_custom_logo(); ?>」の記載を発見。カスタムロゴ?ここか。
その上のdivタグのclassにpixelatedを追加。

するとロゴ画像の表示がぼやけず拡大されるようになりました!やったやった!予想があたるの嬉しい!やればできるもんだ。
こうやって解読していくのとHTMLとかPHPの勉強にもなるのかな。

ドット絵をぼやけさせずに拡大させたい CSSでpixelatedやらcrisp-edgesやら

私は16×16サイズなど、基本的に小さなドット絵を書きます。そのままのサイズで画面に写すと小さすぎて訳わからないので、拡大することになります。

でも、小さい画像を拡大するとぼやけてしまうので、それを防止するために、小さい画像を画像作成ソフト(私はAsepriteというソフトを使っています)で拡大して、pngファイルに書き出して、それをアップロードするという形にしていました。

それが面倒だと感じていたので良い方法はないか調べたところ、ドット絵をドット絵のまま拡大させる方法があることを知りました。

CSSでこんな機能があるそうで。

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

image-renderingというのが画像の拡大縮小の仕方を指定する命令らしく、ブラウザによってpixelatedが効いたりcrisp-edgesが効いたりなどある様子。

ピクセル拡大を使いたい画像の「高度な設定」の「追加クラス」に私は「pixelated」というクラスを追加。

その後、「外観」の「追加CSS」に

.pixelated{
     -ms-interpolation-mode: nearest-neighbor;
   image-rendering: pixelated;
     image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }

と入れました。

あと、目次的なページの画像もpixelatedさせたいので、

.work-list li img{
     width:100%;
     ms-interpolation-mode: nearest-neighbor;
   image-rendering: pixelated;
     image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }

という感じにしています。

これでアップロードする画像はもとのサイズの物だけになるはず。

小さい画像をズラズラならべたい

カテゴリーごとに目次的なページを作る予定。そこにはズラーっとちっちゃいドット絵が並んでる感じにしたいわけです。

HTML勉強したときに、リストを横並びにするっていうのをやったので、それを使いたいと思います。カスタムHTMLでタグうちする形で対応。

やることは、ulにクラス名つけて、liに並べたい画像をimgで貼っていく。

あとは追加CSSでなんとかする。

ulをdisplay:inline-blockにすると横並びに。

画像にリンクを貼るとずれてしまう現象が起きるが、結局全部の画像にリンクを貼るので理屈が分からなくても今のところ問題ないでしょう。

5キャラ並べたい。imgのwidthを18%くらいに指定。ちょっとはキャラ同士に隙間もいると思うのでpadding-rightを2%程度。

キャラと隙間を合計して100%行かなければ一列5キャラがキープできるはず。とりあえずこの設定で。

パンくずリストを。Breadcrumb NavXT

階層的に作品を分類していくつもりなので、階層をわかりやすくするためにパンくずリストを導入しようと思います。

以前は手作業で作るなどしていましたが、今回はプラグインで自動的に作成されるようにしていきます。

検索してたくさん出てきたのが「Breadcrumb NavXT」というプラグインでしたので、こちらをダウンロード。

導入手続きを調査していたら、「子テーマ」なる単語が。

調べてみると、テーマをいじるときにはもとのテーマ(親テーマ)をコピーして子テーマを作成し、それをいじるのがよいそうです。親テーマの更新があってもいじった設定がなくならないからだそうで。なるほど。

では一旦子テーマを作ってきます。

……

子テーマ作ってきました!というわけでパンくずリスト作業続き。

headerに入れてみて、表示ができました!イエイ

だが、現在表示しているページはパンくずリストにはいらない感じ。

「ブロギングライフ」さんの記事(https://www.blogging-life.com/breadcrumb-xt)を参考に、GitHubの拡張プラグインをfunction.phpに貼り付け。非表示にできたー

あとは体裁を整えるためにCSSをいじる必要あり。付け焼きCSSでどこまでいけるか。

初期状態では明朝体だったので、サイトのフォントに合わせたい。細かいフォントを調べるのは後日として、追加CSSをでゴシック体san-serifをとりあえず指定。

あと、スマホビューで左端によってしまうの改善のためmarginを左右に7%いれてやる。ついでに上下に1emのmarginも。
とすると今度はPC表示で中途半端なところに表示される。

根本的にヘッダー部分に入れるのがいけないのかな、と思い、記事のど頭に入れればよいのでは、と考え方向転換。

記事編集のブロック追加のメニューの中に「Breadcrumb trail」というのがあったので追加してみると、それだけでパンくずリストが追加されました。便利。本文の中に入れるのであれば現在表示しているページ名もほしい感じだったので、function.phpからさっき追加したヤツを削除。

他に気になることとして、階層をわかりやすくするためにリストを階層ごとに改行させたいなと。

WordPressのダッシュボード→設定→Breadcrumb NavXT→一般タブの「パンくずの区切り」の「%gt;」を「<br>%gt;」に変更。これでカテゴリーごとに改行されるようになりました。

子テーマを作る。

WordPressのテーマをいじる際には、もともとのファイルそのものではなく、「子テーマ」というものを作っていじるといいらしいのでやってみる。

上記を参考につくりました。無事アップロード成功。

子テーマに親テーマのテーマファイルをコピーしたいときは、FTP(自分はLollipopのFTP使ってます)で一旦子テーマに写したいファイルをダウンロードして、子テーマにアップロードする、という手順でやってます。

GoogleのSite Kit導入

これまでアクセス解析とかよくわからなかったのでちゃんとやっていませんでした。

これもリニューアルを期にちゃんとやれるようになろうと思っています。

諸々調べたところ、Googleから「Site Kit」というWordPressプラグインが出ているとのこと。早速ダウンロード。

インストール後に有効化したら、あとはしてくる質問にOKしたり許可をしたりしていたら全設定終了。すごく簡単。

AdSenseはすぐに数字が管理画面で見られるようになりました。アナリティクスについては反映に時間がかかるらしく、調べた所翌日くらいに確認したほうがよいとのこと。この作業は一旦中断。

後日確認したら反映されてました。めでたし。