駆け出しアラサーSEが、休日にMacと戯れた際の殴り書きメモ。
WordPressのモバイルビューでサイドバーを投稿記事の上下に表示するの後日談。 サイドバーの設定も同様に、Themeのアップデートとともに消えてしまった。 参考：WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする（追記版） CSSは、「Appearance」>「Edit CSS」に入れておけば良いが、 ファイルを追加したり、phpファイルの中身変更などはアップデートのたびに再度対応する必要がありそう。 何か良い方法はないものか、、、、
以前設定したCSSが、Themeのアップデートで使えなくなってしまったので、 やっぱり「Appearance」>「Edit CSS」から設定を入れておいた 参考：WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする これで大丈夫なはず 以上。
シェルスクリプトで、HTML/CSSのグラデーション背景を、PNG画像に変換してローカルに保存する グラデーションの画像を感覚的ではなく、機械的に作成したい時、HTML/CSSで描きたくなる時があるので備忘メモ HTML/CSSで作成した画像はPNG形式で保存するところまでShellScriptでコード化する 背景だけでなく、HTMLで出力されるページ全体を画像化できます グラデーション作り グラデーションの色は、インスタグラムのカラーコードを拝借 Instagram Color Codes HTMLコードは以下（ファイル名は「html-to-png-test.html」としている） 「linear-gradient」は線状のグラデーション 「30deg」はグラデーションの傾き（30度） その下は、「色コード」と「何%の時点でその色を持ってくるか」をそれぞれ示している ブラウザで開くと綺麗なグラデーションが描き出される 画像変換 「HCTI API」の利用登録 HTMLから画像変換するには、HCTI APIというオンラインツールを利用する ※無料版はAPI利用回数に制限があるので注意！ HCTI API 利用のためにはSign upが必要 「Get started free」をクリック お好きな方法でSign up ダッシュボードから「User ID」と「API Key」をメモしておく Dashboard 「HCTI API」の利用 HTMLファイルと同じ階層に以下の「passwords.sh」と「html-to-png-test.sh」というファイルを作成 「passwords.sh」内の「UserID」と「APIKey’」部分は、先ほどメモした値に変更しておく ※jqコマンドをインストールしていなければインストールする （以下はMacの場合のコマンド） 現時点でファイル階層構造はこのようになっている コードを実行する すると「html-to-png-test.png」というファイルが同じ階層にできている 開いて意図した画像が作成されているか確認する 以上 コードはこちら html-to-png_work
Bloggerのモバイル表示で、サイドバーの背景が透明になってしまうためなんとかする（荒技） 原因はよくわからないが、以下のように「Theme」> 「Customize」で設定したWidgetの背景が、PC表示では反映されるのに、モバイル表示ではうまく反映されず、透明になってしまう現象にぶち当たった こんな感じで、文字が読みづらい、、 そこで、無理矢理ではあるが、WidgetのHTML部分にCSSを記載することで背景を無理矢理表示させた 「Layout」>『（表示させたいWidetの）Edit」に記載する この部分にCSSも書いてしまう 記載内容は以下 これで多少は見やすくなった 以上。
Bloggerではデフォルトで、モバイル表示ではサイドバーが非表示となっているので、 表示したい場合は、設定を加える必要がある 前提として、こちらを参考にモバイル表示でもHTMLをカスタマイズする設定をしておく 参考：BloggerでHTMLとCSSを編集する方法 HTMLを見ると、サイドバーの各Widgetは「b:widget」のタグで囲まれている 設定としては、表示したいWidgetを部分を探し出して（Jump to widgetのボタンを使うと簡単）、「mobile=’yes’」を書き足すだけ。 例えば「HTML5（About me）」のWidgetの場合、以下のような表記になっているので、「mobile=’yes’」を書き足す これが こうなる すると、モバイルでもサイドバーのWidgetが表示されている状態となる