あさまテーマのマーク

「あさま」のあすにむかってうっ…まあいいか(その1)

個人の興味からもWordpressのブロックテーマに挑みたいし、そう言えばカスタムフィールドがちゃんと出来てないし、なんて遠い目をしています。

かと言って遠視なわけでもなく、身近の投稿をしているといろいろと気がつくことがありました。

…なわけで、

それほど大それた変更ではないのですが、Wordpressの独自テーマ「あさま」をバージョンアップしてvre. 0.3.4とします。

あさま開発サイトダウンロードページに「あさま親子丼セット」と非圧縮CSSファイルを公開します。

お気づきのことありましたら「お問い合わせ」をいただければ幸いです。

あさまテーマは、親テーマ「あさま」と子テーマ「あさまっこ」で合わせて開発されています。親テーマ「あさま」を有効化してもマークアップ構造が表示されるだけです。ご利用される方は子テーマ「あさまっこ」を有効化してください。詳しくは、あさまテーマの開発に関する過去の投稿をご覧ください。

なおこれを機に、いままで担保してきた下位互換を取っ払いました。

当初は継続して互換性を維持しようとしたのですが、今回の変更でエレメントの構成が変わってしまい、互換性を担保しようとするとプログラムコードが煩雑になってしまうのです。

面倒であったのも確かですが、将来の調整やメンテナンスで間違いなどが発生するリスクの抑制を選択しました。

すでに利用されている方は、CSSなどの変更箇所を移行する必要があります。(すみません。悪しからずお願いします。まあ、実運用されている方はおられないでしょうし、)

よって、当面の間はダウンロードページに、ver. 0.3.31のあさま親子丼と非圧縮CSSファイルを公開のままとしておきます。

さては変更内容です。

CSSの微調整

まずは、CSSの不都合を見つけましたので、細かい調整がありました。

恥ずかしながら、リストの入れ子に対応しておりませんでした。自分で入れ子のリストを投稿しようとして気がつきました。(すみません。)

Googleの記号Webフォント

つぎに、これもCSSが関係する案件です。

Googleの記号Webフォントを新しいものに変更しました。親子テーマのfunction.phpにあった次の記述を、

'https://fonts.googleapis.com/icon?family=Material+Icons',

次に差し替えて、つぎの新しい記号Webフォントに記述を変更してます。

'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200',

それに伴うCSSの「font-family」指定は、以前の

font-family:'Material Icons';

から、つぎに変更してます。

font-family:'Material Symbols Rounded';

そして、記号Webフォントの記述を変更した以外に、function.phpに指定項目が二つ追加になりました。

ひとつ目「ページスクロールボタン」

ページスクロールボタンのタイプを増やして、function.phpへの記述で切り替えられるようにしました。

以前のバージョンではページをスクロールするとページトップへスクロールするための上方向矢印ボタンがつぎのように出現していました。

上方向矢印ボタン

でも、自分であさまの開発作業をしていたり、投稿や閲覧をしていると、特に投稿を構成するときにページの下方へスクロールする必要が多いと気がつきました。

それなら同じような動作の下矢印ボタンをセットで表示しようと思い立ち、つぎのように上下双方向の矢印ボタンのインタフェースを追加しました。

双方向矢印ボタン

指定方法です。

function.phpファイルにあるhustle_config()メソッドが参照された際に、取って返して参照されるあさまテーマ本体のsetAsamaParams()メソッドにパラメータとして仕込まれる連想配列があります。(ああ、ややこしい。「あさま」のまさか(その5)を参照してください。)その指定項目群に、つぎのように「双方向矢印ボタン」モードにて追記してます。

/*******************************
ページスクロールボタンのタイプ
'UP2TOP'ならページトップへの矢印一つのインターフェース
'UPnDOWN'ならページトップとボトムへの矢印二つのインターフェース
('PAGE_SCHROLL_ARROW_TYPE'の項目が無いか、所定の指定でなければ'UPnDOWN'に指定される。)
*******************************/
//'PAGE_SCHROLL_ARROW_TYPE'=>'UP2TOP',
'PAGE_SCHROLL_ARROW_TYPE'=>'UPnDOWN',

「上方向矢印ボタン」モードにする場合はつぎのように記述します。(両方を記述してありますから、コメントアウトを切り替えるだけです。)

'PAGE_SCHROLL_ARROW_TYPE'=>'UP2TOP',
//'PAGE_SCHROLL_ARROW_TYPE'=>'UPnDOWN',

両行ともコメントアウトしたり、’PAGE_SCHROLL_ARROW_TYPE’項目の指定(文字列)が間違っていると「双方向矢印ボタン」モード(初期値ということです。)になります。

ふたつ目「外部スクリプトの読込」

株式会社モリサワのウェブフォント「TypeSquare」を利用することを考えていたら「ほかにも要望が発生するのでは?」と思ったので、任意スクリプトの読み込みができるようにしました。

function.phpに上記「ページスクロールボタン」と同様に指定を記述するだけで、任意スクリプトの参照がページHTMLのheadタグ内に記述されるようになっています。

たとえば「TypeSquare」の場合は、利用案内ページにつぎのように記述するように案内があります。

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?XXXXXXXXXXXXXXXX" charset="utf-8"></script>
TypeSquareの利用案内

これを自動的に記述するためには、’LOARD_ANY_SCRIPT’項目に指定する配列内に、さらに連想配列でつぎのように記述します。

/*******************************
任意の外部スクリプトをscriptタグにて出力する。
*******************************/
'LOARD_ANY_SCRIPT'=>array(
	array(
		'type'=>'text/javascript',
		'src'=>'//typesquare.com/3/tsst/script/ja/typesquare.js?XXXXXXXXXXXXXXXX',
		'charset'=>'utf-8',
	),
),

そうです。属性をキー項目にして値を代入する形になります。属性は任意に指定できますから幅広く利用できると予想できます。

公開している親子丼の子テーマあさまっこ内のfunction.phpにはつぎのようにコメントアウトして記述してあります。

/*******************************
任意の外部スクリプトをscriptタグにて出力する。
*******************************/
'LOARD_ANY_SCRIPT'=>array(
	/* array(
		'type'=>'text/javascript',
		'src'=>'XXXXXXXXXXXXXXXX',
		'charset'=>'utf-8',
	), */
),

私はTypeSquareしかテストしてません。(悪しからず。)

然して、つぎのようにCSSを指定すれば、利用登録した任意のフォントを表示できます。

<p style='font-family:"石井明朝 L";font-size:2.0rem;line-height:1.8em;text-indent:0.707em;border-radius:0.35em;border:#999 dotted 0.1rem;padding:0.707em;background-color:#fff;'>
・・・ 文章 ・・・
</p>

つぎのように表示されます。

このエレメントはモリサワのウェブフォント「TypeSquare」を利用して、写研の「石井明朝 L」でテスト表示(1書体は無料)しています。ついに写研の書体がデジタル上で自在に利用できるようになりました。もちろん費用はかかりますが、古くからデザインに携わってきた人たちにとっては嬉しいニュースです。…私も。

「あさま」の新バージョンの紹介でした。

本サイトでも写研フォントをバンバン使いたいところですが、稼げるサイトでもないのでGoogleフォント(感謝。)で我慢をします。

フォントだけでなく、昔に比べてグラデーションやアニメーションなど表現の幅が広がりましたね。ありがたく利用させていただいてます。そかさ。