HTML/CSS

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

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

WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする(追記版)

※20201001 Update: こちらの記事も参照ください WordPressのAstraテンプレートでブログ投稿サマリの行数を減らす 以前設定したCSSが、Themeのアップデートで使えなくなってしまったので、 やっぱり「Appearance」>「Edit CSS」から設定を入れておいた 参考:WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする これで大丈夫なはず 以上。

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

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

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

BloggerでHTMLとCSSを編集する方法

BloggerでHTMLとCSSを編集する方法 目次 (下準備)Mobile表示についてもHTMLを編集できるようにする設定 HTMLを編集する方法 CSSを編集する方法 (下準備)Mobile表示についてもHTMLを編集できるようにする設定 モバイルで閲覧する際に、モバイル専用の画面表示を想定する場合は以下の設定をしておく 「Theme」>「Mobile(歯車マーク)」をクリック 「Yes, Show mobile theme on mobile devices.」のラジオボタンを選択 「Choose mobile theme」から「Custome」を選択 「Save」を押下し完了 HTMLを編集する方法 まずは、BloggerでHTMLを編集する方法 「Theme」>「Edit HTML」をクリック こちらの画面で自由に編集できる 編集し終わったら「Save theme」で終了する 長いので、「Jump to widgeet」から編集したい場所に一発で飛ぶことも可能 CSSを編集する方法 次は、BloggerでCSSを編集する方法 「Theme」>「Customize」をクリック 「Advanced」>「Add CSS」を選択し、出てきた白い枠の中に記載することでCSSの設定を反映することができる 以上

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

※2020/07/03追記 後日談はこちら WordPressのモバイルビューでサイドバーを投稿記事の上下に表示する(追記版) やりたいこと やりたいことはタイトルの通りだが、少しわかりにくいので図で表すと以下のイメージ パソコンでは右側に表示されるサイドバーを、 モバイルでは、上下二つに分けて、投稿記事サマリを挟む形で上下に表示する 手順は、「【1】サイドバーの定義」「【2】サイドバーの表示」「【3】モバイルビューでの表示位置決め」の3ステップ ※前提知識として、テンプレートファイルの編集方法は、以下の記事の「テンプレートファイルの編集方法」を参照ください 参考:WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする 【1】サイドバーを2つ定義する(register_sidebar) サイドバーの定義 まずは、サイドバーを定義する 「function.php」に以下のように記載 サイドバーが既にテンプレートにある場合は、元々定義されているサイドバー定義があるはずなので、追記だけでなく、適宜名前など変更する 今回私は、二つサイドバーを作りたかったので、元々あるサイドバーを「sidebar-1」として、追加のサイドバーを「sidebar-2」として定義した サイドバーのWidgetsの編集 サイドバーを定義すると、「Appearance」>「Widgets」の編集画面で、定義したサイドバーの枠が追加され、Widgetsが編集できるようになるので、 お好きなWidgetsをお好きな場所にドラッグ&ドロップで配置する 参考:関数リファレンス/register_sidebar 【2】ページにサイドバーを表示する(get_sidebar) サイドバーファイルの作成 サイドバーを定義しただけでは、ページに表示されないので、 定義したサイドパーを、各ページに表示させる まずは、定義さサイドバーのphpファイルをそれぞれ作成する ファイルの作成はGUIではできないので、直接サーバに入って作成する必要がある ※私の環境(Bitnami)では、「/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/【テンプレート名】」配下に必要なファイルが格納されている ※今回私が使っているのは「nucleare」というテンプレートなので、適宜各環境に置き換えてお考えください 元々、「sidebar.php」というファイルがあるので、このファイルを参考に「sidebar-1.php」「sidebar-2.php」のファイルを作成する 中身はそれぞれこんな感じ サイドバーを各ページに表示する 先ほど作成したサイドバーのファイルを、各ページのファイルから呼び出すことで、 サイドバーが各ページに表示されるようにする 表示するには、以下の文言を各ページファイルに追記する 「get_sidebar(‘1’)」の「1」は、サイドバーファイルのタイトル「sidebar-1.php」のハイフンより後(1)を指定することで呼び出すことができる 私は、どのページにもサイドバーを表示させたいので、以下ファイルに文言を追記した 参考:関数リファレンス/get_sidebar 【3】モバイルでのサイドバーの表示位置を定義する 最後に、モバイルビューの場合の表示位置を定義する 「style.css」に以下を追記する 「.site-content」で枠を定義 「secondary(sidebar-1)」→「.content-area(ブログ投稿)」→「thirdry(sidebar-2)」の順番で表示させたいので、上から1、2、3と番号を振る 「-webkit-box-ordinal-group」や「-moz-box-ordinal-group」など色々な表現で記載されているのは、表示されるブラウザによって定義の方法が異なるため なので、なるべく種類多めに記載しておく これで、晴れて、モバイル(max-width: 985px)では「sidebar-1」→「ブログ投稿」→「sidebar-2」と表示されるようになる 以上 ※2020/07/03追記 後日談はこちら WordPressのモバイルビューでサイドバーを投稿記事の上下に表示する(追記版)

WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする

※20201001 Update: こちらの記事も参照ください WordPressのAstraテンプレートでブログ投稿サマリの行数を減らす ※2020/07/03追記 後日談はこちら WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする(追記版) WordPressのブログ記事で、 モバイルでサマリが表示されると縦に長くなって見えにくくなってしまうので、 モバイルから見るときだけサマリを表示しないようにした これを こうするイメージ テンプレートファイルの編集方法 まずは前提から。 WordPressのスタイルシートなど、テンプレートファイルの編集は 「Appearance」>「Theme Editor」から編集できる 追記だけなら「CSS editor」をうこともできるが、 自由度が高いので、私は「Theme Editor」が好き もしくは、サーバに入って、直接ファイルを編集しても良い ※私の環境(Bitnami)では、「/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/【テンプレート名】」配下に必要なファイルが格納されている ※今回私が使っているのは「nucleare」というテンプレートなので、適宜各環境に置き換えてお考えください テンプレートファイルの種類とブログ投稿のサマリ表示箇所の確認 index.phpというファイルを覗くと ブログ記事の投稿リストを定義することができる ※他にも、ヘッダーはheader.phpなど、色々種類がある。 各ファイルの役割については、こちらのリンク参照 参考:テーマの作成 index.phpの中をみると、以下のようにコメントの記載がある コメントによると、「詳しくは「content-___.php」を見に行けよ」とのこと contemtから始まるファイルは以下の四つなので「content.php」を見てみる content.phpの中を見ると、33行目あたりに「<?php the_excerpt(); ?>」という記述がある 「<?php the_excerpt(); ?>」は、投稿の抜粋を表示するタグであるので、 この位置に投稿のサマリが表示されるんだなということがわかる 参考:テンプレートタグ/the excerpt ブログ投稿のサマリを表示しない方法1(自由度が高い方法) モバイルビューでブログ投稿のサマリを表示しない方法としてはいくつかあり、 自由度が高いのが、excerpt_lengthを使って「ブログ投稿サマリの長さ(単語数)をゼロにする方法」 以下をfunction.phpに追記する 「if ( wp_is_mobile() ) 」でモバイルビューの場合と定義し、「excerpt_length」を使って投稿サマリの長さを定義する 今回は「return 0」なので、長さはゼロ(表示しない) 参考: 関数リファレンス/wp_is_mobile …

WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする Read More »

オープンソースのCDNを使って、WordPressの記事上でJavascriptを動かす(jsDelivr)

オープンソースのCDNであるjsDelivrがWordPressの記事上で動かしたいときにとても便利だったので備忘メモ https://www.jsdelivr.com 調べて、URLをコピーして、HTMLの中に書くだけ これで読み込める。 参考: Epochでリアルタイムグラフを描く リアルタイムグラフで遊ぶ(Epoch)

Epochでリアルタイムグラフを描く

Epochを使って、リアルタイムに動くグラフを描いてみる。 成果物はこちら リアルタイムグラフで遊ぶ(Epoch) Epochとは、チャートを描くツール https://epochjs.github.io/epoch/ 色々描けるが、今回は「Real-time Line」を使って、ドロップダウンリストで作成した式を即座に反映させて描くツールを作ってみる。 CDNからEpochの読込 WordPress上で動かすため、オープンソースのCDNからEpochを読み込む epoch-charting 必要なのは、 「epoch.min.css」「epoch.min.js」「tests.css」の三つ。 minではないjsとcssもあったが、とりあえず今回はminで良い 参考: オープンソースのCDNを使って、WordPressの記事上でJavascriptを動かす(jsDelivr) Epochの基本 基本は、横軸は時間として、yに好きな値を入れてpushする chartの変数に何が入っているかというと、 チャートをどのように描くか、データの中身(data変数で定義)などが入っている data変数の中には、このように定義されている 成果物はこちら リアルタイムグラフで遊ぶ(Epoch) フルコードは以下。かなり冗長になってしまった、、 成果物はこちら リアルタイムグラフで遊ぶ(Epoch)