ブログのデザインのこと

基本的にはそのまんまで。

　このブログのデザインは、ページ下部のクレジットにもあるようにWordPressのデザインテーマ「Coldbox」を、基本的にはそのまま使用しています。文章だけのブログでもなるべく不足を感じないデザインのものを選びました。配色だとか装飾だとかを自由にカスタマイズすることもできるんですが、そこはそれ、デザインのプロの人が作ったテーマなわけですし、餅は餅屋ですね。下手にいじるよりかはそのままの方がいいでしょう、というスタンスです。多少改造はしているものの、それは翻訳の不統一を修正するためだったりWebフォントを入れるためだったりと、デザイン自体とは関係のないところの改造がほとんどです。

　ただ、SNSのシェアボタンについては別途の対応をしました。Coldboxにもシェアボタンはついているんですが、ボタンが大きくて自己主張が強く、モノトーンで文章主体のデザイン上だとかなり浮いてしまうな、と思ったのと、そもそもMastodonのシェアボタンがないやんけ、というのとで、AddToAnyというプラグインのものを採用しています。Mastodonのシェアボタンを先頭に持ってきているのは小さなこだわり。

　AddToAnyもそのまま追加しただけというわけではなく、これも多少改造しています。デフォルトの設定だと、シェアボタンの位置が記事本文の直下に来ちゃうんですよね。これは見栄えが悪い。ただ、なんかPHPを直に書き換えるのはどうにも大変そうだなあ、と尻込みしてしまったので、jQueryで後付け的に場所を移動させることにしました。PHPはサーバー上で動作するプログラムですが、jQueryはブラウザ上で動作するプログラムです。まずサーバーくんががんばってPHPで書かれたコードを解読して、ブログのページを出力し、ネットを介してみなさんのブラウザくんに渡します。この時点では、シェアボタンは記事直下。ブラウザくんはサーバーくんから渡されたページにjQueryが書かれているのに気づき、それを解読してシェアボタンの位置を移動させる、という寸法です。

　せっかくだしコードも書いておきましょうか。せっかくコードを書く時のWebフォントも指定しておいたわけですしね。

jQuery(
  function () {
    jQuery('.addtoany_share_save_container').insertAfter('#sns-btn-bottom-head');
    jQuery('.share-list-container').remove();
  }
);

　おお、まるでテックブログみたいでかっこいい。多分今後このブログでコードを表示させることなんてないだろうし、貴重ですよこれは。ちなみに $ を使わずにわざわざ jQuery(); としている理由はこちら。これに気づくのに結構長い時間ハマってました。それにしてもあれですね、Chromeの検証機能ってめちゃくちゃ便利ですね。あれがなかったらブログ作るの投げてたかもしれない。