Close

WordPressのモバイルビューでサイドバーを投稿記事の上下に表示する(追記版)

WordPressのモバイルビューでサイドバーを投稿記事の上下に表示するの後日談。 サイドバーの設定も同様に、Themeのアップデートとともに消えてしまった。 参考:WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする(追記版) CSSは、「Appearance」>「Edit CSS」に入れておけば良いが、 ファイルを追加したり、phpファイルの中身変更などはアップデートのたびに再度対応する必要がありそう。 何か良い方法はないものか、、、、

シェルスクリプトで、HTML/CSSの出力結果(グラデーション)を、PNG画像に変換してローカルに保存する

シェルスクリプトで、HTML/CSSの出力結果(グラデーション)を、PNG画像に変換してローカルに保存する

シェルスクリプトで、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のモバイル表示で背景が透明になってしまう件

Bloggerのモバイル表示で背景が透明になってしまう件

Bloggerのモバイル表示で、サイドバーの背景が透明になってしまうためなんとかする(荒技) 原因はよくわからないが、以下のように「Theme」> 「Customize」で設定したWidgetの背景が、PC表示では反映されるのに、モバイル表示ではうまく反映されず、透明になってしまう現象にぶち当たった こんな感じで、文字が読みづらい、、 そこで、無理矢理ではあるが、WidgetのHTML部分にCSSを記載することで背景を無理矢理表示させた 「Layout」>『(表示させたいWidetの)Edit」に記載する この部分にCSSも書いてしまう 記載内容は以下 これで多少は見やすくなった 以上。

Bloggerのモバイル表示でサイドバーを表示する方法

Bloggerのモバイル表示でサイドバーを表示する方法

Bloggerではデフォルトで、モバイル表示ではサイドバーが非表示となっているので、 表示したい場合は、設定を加える必要がある 前提として、こちらを参考にモバイル表示でもHTMLをカスタマイズする設定をしておく 参考:BloggerでHTMLとCSSを編集する方法 HTMLを見ると、サイドバーの各Widgetは「b:widget」のタグで囲まれている 設定としては、表示したいWidgetを部分を探し出して(Jump to widgetのボタンを使うと簡単)、「mobile=’yes’」を書き足すだけ。 例えば「HTML5(About me)」のWidgetの場合、以下のような表記になっているので、「mobile=’yes’」を書き足す これが こうなる すると、モバイルでもサイドバーのWidgetが表示されている状態となる