引用

今日は今までに一度も使ったことがない「引用」を使用してみる!
間違ったらごめんなさい。

3−8.引用

役割 … 引用ブロックを挿入する
タグ … <blockquote>

引用	引用ボックスを挿入する

役割 … 引用ブロックを挿入する

タグ … <blockquote>

https://bazubu.com/how-to-use-gutenberg-36143.html

野性の証明カバー

↑人気ブログランキングに参加しています。ポチっと1票を!

複数のブロックを1つにまとめる?

地崎バラ園のバラ
  • 第1のブロックは画像の中を指定。
  • 第2のブロックはこのブロックで段落を指定。
  • これをテキストの範囲を指定する同じ要領で指定
  • どうなるか?

第1のブロックは画像の中を指定。
第2のブロックはこのブロックで段落を指定。
これをテキストの範囲を指定する同じ要領で指定。
どうなるか?

  • 段落1(段落4はインライン画像です)
  • 段落2
  • 段落3
  • 段落4 インライン画像用
  • 段落5
↑人気ブログランキングに参加しています。ポチっと1票を!

再利用可能・保存と呼び出し

再利用可能なカバー画像と人気ブログ・バナーを登録した。

野性の証明カバー

野性の証明カバー

海鮮丼(かに・いくら)
海鮮丼

上の画像はフルサイズを指定

↑人気ブログランキングに参加しています。ポチっと1票を!

Python-HTML-CSS with Enlighter in Gutenberg

19/11/26に掲載されたプログラム群をGutenbergとEnlighterを使って再掲します。

#!/usr/bin/python3      # app.py python
# -*- coding: utf-8 -*-
# app.py
 
from flask import Flask, redirect ,request,render_template
 
app = Flask(__name__)
 
@app.route("/check")
def check():
    return render_template('check.html')
 
@app.route('/',methods=['POST'])
def index():
    my_age = int(request.form["age"])
    my_name = request.form["name"]
    return render_template('index.html',age=my_age,name=my_name)
 
if __name__ == '__main__':
    app.run(debug=True)

上のコードはPython programです。

&lt;!DOCTYPE html>      &lt;!-- check.html -->
&lt;html lang="ja">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>年齢確認&lt;/title>
&lt;!--    &lt;link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" />  -->
    &lt;link rel="stylesheet" type="text/css" href="static/css/style.css" />
&lt;/head>
&lt;body>
 
    &lt;form action="/" method="post">
        &lt;h1>年齢確認&lt;/h1>
        &lt;input type="text" name="name" placeholder="名前" required/>
        &lt;input type="number" name="age" placeholder="年齢" required/>
        &lt;button>年齢確認&lt;/button>
    &lt;/form>
 
&lt;/body>
&lt;/html>

上のプログラムはHTMLです。

&lt;!DOCTYPE html>  &lt;!-- index.html -->
&lt;html lang="ja">
    &lt;head>
        &lt;meta charset="UTF-8">
        &lt;title>18禁のサイト&lt;/title>
&lt;!--        &lt;link rel="stylesheet" type="text/css" href="style.css" />  -->
    &lt;link rel="stylesheet" type="text/css" href="static/css/style-04.css" />
        &lt;!--[if lt IE 9]>
        &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">&lt;/script>
        &lt;![endif]-->
    &lt;/head>
    &lt;body>
    &lt;h1>射幸心を煽りまくるホームページ&lt;/h1>
    {% if age >= 18 %}
    {{name}}さんは18歳以上ですね。
    {% else %}
    {{name}}さんみたいな方はこんなHP見ちゃいけません?
    {% endif %}
 
    &lt;/body>
&lt;/html>

上のプログラムもHTMLです。

@charset 'utf-8';
body     {
    background: sandybrown;
    color: darkgreen;
    margin-left: 2m;
    margin-right: 2m;
}

上のコードはstyle.cssです。

@charset 'utf-8';
body     {
    background: violet;
    color: darkgreen;
    margin-left: 2m;
    margin-right: 2m;
}

上のコードはstyle-04.cssです。

文字が小さく見ずらい時はWindows拡大鏡をお使いください。Windows・キー + 「+」(プラス・キー)(Windows・キーはキーボード左下、左から3~4番目のキー。抜けるにはWindows・キー + 「ESCキー」を押します)

↑人気ブログランキングに参加しています。ポチっと1票を!

Gutenberg & LIQUID BLOCKS

カバー画像としてミカンの写真を使っています。オーバーレイの色は薄いブルーを使っています。

最近の何枚かの写真を使います。

5枚の写真をギャラリーとして使いました。

長兄からの贈り物

カバー画像としてミカンの写真を使っています。オーバーレイの色は薄いブルーを使っています。

音楽ファイルを挿入しています。ヘレンシャピロの「悲しき片思い」です。

↑当記事の作成に当たっては上のリンクの記事を参照しました。
LIQUID BLOCKSは無料
LIQUID PRESSは有料

函館塩ラーメン五稜郭の塩ラーメンといかめし

↑人気ブログランキングに参加しています。ポチっと1票を!

CodeMirror Blocksの構造解析

アイキャッチ画像は20日国分寺麻布茶房で行われた際のウェートレスによるプレッシャーのお茶出し。これにより講義は80分で切り上げた。店は混んでいたしこれは致しかたない。

<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:codemirror-blocks/code-block {"lineNumbers":true} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo32.py sessin managed &amp; username get
from flask import Flask, redirect, request, render_template, url_for, session
 
app = Flask(__name__)
 
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo07.html')


<!-- 中略 -->

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('func'))
 
app.secret_key = 'B0Qp89i/2xY F~XHH!jnVVLWX/,%QR'
 
if __name__ == '__main__':
    app.run(debug=True)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
&lt;!-- /wp:codemirror-blocks/code-block -->

&lt;!-- wp:codemirror-blocks/code-block {"lineNumbers":true} -->
&lt;div class="wp-block-codemirror-blocks-code-block code-block">&lt;pre>#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo32.py sessin managed &amp; username get
from flask import Flask, redirect, request, render_template, url_for, session
 
app = Flask(__name__)
 
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo07.html')


&lt;!-- 中略 -->

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('func'))
 
app.secret_key = 'B0Qp89i/2xY F~XHH!jnVVLWX/,%QR'
 
if __name__ == '__main__':
    app.run(debug=True)&lt;/pre>&lt;/div>
&lt;!-- /wp:codemirror-blocks/code-block -->

&lt;!-- wp:paragraph -->

プログラムの先頭部分と最後の部分<pre … </pre>でCodeが囲われている。

Line No無し
<!-- wp:codemirror-blocks/code-block -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>#!/usr/bin/python3
# -*- coding: utf-8 -*-

Line番号が無しの場合は{“lineNumbers”:true}の指定がない。

<!-- wp:codemirror-blocks/code-block {"lineNumbers":true} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>#!/usr/bin/python3
# -*- coding: utf-8 -*-

Line番号がトゥルーになっている。

Line Wrapping無し
<!-- wp:codemirror-blocks/code-block {"lineNumbers":true,"lineWrapping":false} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>#!/usr/bin/python3
# -*- coding: utf-8 -*-

Line Wrapping無しの指定。

Editorable on frontend
<!-- wp:codemirror-blocks/code-block {"lineNumbers":true,"lineWrapping":false,"readOnly":true} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>#!/usr/bin/python3
# -*- coding: utf-8 -*-

Editorable on frontendを指定すると”readOnly”:trueになる。

上記指定による状況をプレビュー、ログオフで見ようと思ったが表示されなかった。

再びSyntaxHighlightその2

code Highlightしない件、ライン番号も表示されない。インデントはされる。

191215Editor内その1
191215Editor内その1

191215Editor内その1(まだ色表示されている-Line番号も表示されている)

191215Editor内その2
191215Editor内その2

191215Editor内その2(プレビューすると色が消えてしまった)

191215Editor内その3
191215Editor内その3

191215Editor内その3(再びプレビューすると色が復活)

191215Editor内その4
191215Editor外

191215Editor内その4(公開するとプレーンテキストになってしまう-Line番号も消えてしまう)

↑人気ブログランキングに参加しています。ポチっと1票を!

再びSyntaxHighlight

固定ページではSyntaxHighlightされた、さて投稿ページではどうなるか?

#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo32.py sessin managed & username get
from flask import Flask, redirect, request, render_template, url_for, session
 
app = Flask(__name__)
 
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo07.html')
 
@app.route('/program', methods=['GET', 'POST'])
def program():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo03.html')
 
@app.route('/program1', methods=['GET', 'POST'])
def program1():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo04.html')
 
@app.route('/program2', methods=['GET', 'POST'])
def program2():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo05.html')
 
@app.route('/param/<parameter>')
def show_user_profile(parameter):
    if 'username' in session:
        html = render_template('demo07.html',name = str(parameter))        
        return html
    return 'You are not logged in. from param processing'
 
@app.route('/reset', methods=['GET', 'POST'])
def reset():
    session['username'] = 'monkey'
    return render_template('check31.html')
 
@app.route('/')
def func():
    if 'username' in session:
        html = render_template('demo07.html',name = str(session['username']))        
        return html
    return 'You are not logged in'
 
@app.route('/check', methods=['GET', 'POST'])
def check():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('func'))
    return render_template('check31.html')
 
@app.route('/',methods=['POST'])
def index():
 
    if (request.form['attr'] == 'need'):
 
        success = False
        name = request.form["username"]
        passwd = request.form["pass"]
        att1 = request.form['attr']
        my_message = "keyword処理は?"
    else:
        con1 = request.arg.get('_ControlID')
        pg1 = int(request.arg.get('_PageID'))
        act1 = request.arg.get('_ActionID')
        flg1 = request.arg.get('getFlg')
        html = render_template('demo07.html', con = con1, pg = str(pg1), act = act1, flg = flg1)        
        return html
 
    user_data = [{"id":"カリフラワー", "pass":"hanakyabetsu"},{"id":"西行法師", "pass":"masako"},{"id":"monkey", "pass":"kayochan"},{"id":"program1", "pass":"pass1"}]
 
    for i in range(0, 10):
        if user_data[i]["id"] == name:
            if user_data[i]["pass"] == passwd:
                success = True
                session['username'] = name
                return render_template('demo07.html',suc=success,name=name,pas=passwd,msg=my_message,att=att1)
            else:
                continue
        else:
            continue
    success = False
    return render_template('demo07.html',suc=success,name=name,pas=passwd,msg=my_message,att=att1)
 
@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('func'))
 
app.secret_key = 'B0Qp89i/2xY F~XHH!jnVVLWX/,%QR'
 
if __name__ == '__main__':
    app.run(debug=True)

Python program(CodeMirror Blocks in GutenbergではHighlight表示されている)

↑人気ブログランキングに参加しています。ポチっと1票を!

Gutenberg エディターにようこそ

Gutenberg を試してみよう

この新しいエディターのゴールは、WordPress へのリッチコンテンツの追加をシンプルで楽しくすることです。この投稿全体がコンテンツのパーツ—LEGO ブロックのようなもの—により構成されており、動かしたり操作できるようになっています。カーソルを動かすと、様々なブロックが枠線と矢印とともにフォーカスされます。矢印を押すとブロックをすばやく並び替えることができ、コピー & ペーストしているうちに内容が消えてしまう恐れがありません。

現在ご覧いただいているのがテキストブロックで、すべてのブロックのうち一番基本のブロックです。テキストブロックは、投稿内を自由に移動できる独自のコントロールがついています。

…例えば、右揃えのこれのようなものです。

見出しは別ブロックとなっており、コンテンツのアウトラインと構成に役立ちます。

百聞は一画像にしかず

画像とメディア取り扱いへの高い気遣いは、新しいエディターのメインフォーカスです。キャプションを追加したり、全幅にするのがより簡単で強力になっているのにお気づきいただけるでしょう。

美しい風景
テーマでサポートされていれば、画像ツールバーに「幅広」ボタンが表示されます。お試しください。

キャプションを選択、削除、編集してみてください。画像や他のテキストを間違って選択して、表示を台無しにしないよう気を使わずに済むようになりました。

「挿入」ツール

WordPress ができるすべてのことが、すばやく、同じ場所・インターフェイスで可能であると想像してみてください。HTML タグやクラスを理解したり、複雑なショートコード構文を覚える必要はありません。これこそが「挿入」ツール—エディター中にある (+) ボタン—の真髄で、すべての利用可能なコンテンツブロックを閲覧し、投稿に追加することができます。プラグインとテーマは独自のブロックを登録することができ、リッチな編集や公開の可能性を拡げます。

お試しいただくと、WordPress が投稿に追加可能でありながら、ご存知ではなかったものを見つけていただけるでしょう、以下はこの投稿が使用しているブロックの簡単なリストです。

  • テキストと見出し
  • 画像と動画
  • ギャラリー
  • YouTube、ツイート、他の WordPress 投稿などの埋め込み。
  • ボタンやヒーロー画像、区切りなどのレイアウトブロック。
  • もちろん、このようなリストも ^^

ビジュアル編集

ブロックの大きな利点は、それぞれの場所で編集し、コンテンツを直接操作できることです。引用ソースやボタン内テキストなどを編集するためのフィールドを持つのではなく、コンテンツを直接変更できます。以下の引用を編集してみてください:

このエディターは、リッチな投稿や固定ページの作成を簡単にする、新しい執筆体験を生み出そうとしています。また「ブロック」によって、現在はショートコード、カスタム HTML、外部埋め込みコード自動ディスカバリー機能が実現していることをより簡単にします。

マット・マレンウェッグ、2017

引用の​​ソースに対応する情報は、画像下のキャプションに似た別のテキストフィールドです。このため、ソースを選択、変更、または削除しても、引用自体の​​構造は保護されます。いつでも簡単に戻すことができます。

ブロックは、必要なもの何でもかまいません。たとえば、テキスト構成の一部として目立たない引用符を追加してもよいでしょう。または、巨大で装飾的なものを表示させることもできます。これらのオプションはすべて挿入ツール内で利用できます。

サイドバーのブロックインスペクターでスライダーをドラッグすると、ギャラリーのカラム数を変更できます。

メディア重視

新しい幅広全幅配置をギャラリーと組み合わせると、非常にメディアリッチなレイアウトをすばやく作成できます。

アクセシビリティは重要です — 画像の Alt 属性をお忘れなく。

全幅画像はかなり大きくなる場合もありますが、画像によってはそうする価値があることもあります。

上は2つの画像のみのギャラリーです。フロート調整を行うことなく、魅力的な見た目のレイアウトを簡単に作成することができます。またブロックを切り替えて、ギャラリーを個別の画像へ簡単に戻すこともできます。

あらゆるブロックでこれらの配置を選択できます。埋め込みブロックでも利用でき、ボックス外でもレスポンシブ対応しています:

静的または動的、装飾的またはプレーンなものなど、お好みのブロックを構築できます。こちらがプルクオートブロックです。

Code is Poetry

WordPress コミュニティ

追加ブロックを作成する方法を学んだり、プロジェクトに協力したりすることに興味がある場合は、GitHubリポジトリへ移動してください。


Gutenberg をテストしていただき、ありがとうございます !

👋

and_gate.pyのPython codeである

# coding: utf-8
import numpy as np


def AND(x1, x2):
    x = np.array([x1, x2])
    w = np.array([0.5, 0.5])
    b = -0.7
    tmp = np.sum(w*x) + b
    if tmp &lt;= 0:
        return 0
    else:
        return 1

if __name__ == '__main__':
    for xs in [(0, 0), (1, 0), (0, 1), (1, 1)]:
        y = AND(xs[0], xs[1])
        print(str(xs) + " -> " + str(y))

Enlighter SourcecodeでPython Programを表示しているところ。

↑人気ブログランキングに参加しています。ポチっと1票を!

Gutenberg使用2回目

問題が私のオペミスかCodeMirror BlocksまたはGutenbergのバグかアイソレートするためにPythonプログラムをアップすることにする。

CodeMirror Blocks(ver1.0)でキチンと表示されていた(PowerShellのプログラムが)Version Up(ver1.1)したとたんGutenberg内では表示されるのに「更新」ボタンをクリックしてログアウトして「野性の証明」をリドロウしたとたんプログラムの表示がSyntaxHighlightされずにプレーンテキストとして表示されてしまう。問題が私のオペミスかCodeMirror BlocksまたはGutenbergのバグかアイソレートするためにPythonプログラムをアップすることにする。

※ →ログインして編集操作に入った時点ではPython codeはSyntax Highlightしている。「下書き保存」をして、「プレビュー」ボタンして画面を表示させてもまだ正しくHighlight表示しているが「公開する」または「更新」ボタンをクリックして、ログアウトして当ブログを表示すると、code部分はplain text表示になってしまっている。ブラウザを変えてみても現象は同じ。「公開する前にチェックを常に表示する。」にチェックを入れて「公開」をクリックした段階で、そのまま「投稿を表示」をクリックしても正しくハイライト表示される。実際にログアウトするとプレーンテキストになってしまう。

# -*- coding: utf-8 -*-
print("例:明治 42 年")
S = input("和暦:")
 
syear = 0
print(S.split())
items = S.split()
year = int(items[1])
 
if items[0] == "明治":
    syear = 1867 + year
elif str(items[0]) == "大正":
    syear = 1911 + year
elif items[0] == "昭和":
    syear = 1925 + year
elif items[0] == "平成":
    syear = 1988 + year
elif items[0] == "令和":
    syear = 2018 + year
else:
    print(items[0],"Error")
 
print("西暦",str(syear),"年")

編集内(Gutenberg)では上記のように正しく表示される。

ログアウトするとプレーンテキストになってしまう。

# -*- coding: utf-8 -*-
print("例:明治 42 年")
S = input("和暦:")
 
syear = 0
print(S.split())
items = S.split()
year = int(items[1])
 
if items[0] == "明治":
    syear = 1867 + year
elif str(items[0]) == "大正":
    syear = 1911 + year
elif items[0] == "昭和":
    syear = 1925 + year
elif items[0] == "平成":
    syear = 1988 + year
elif items[0] == "令和":
    syear = 2018 + year
else:
    print(items[0],"Error")
 
print("西暦",str(syear),"年")

WP SyntaxHighlighterを使うと正しく表示される。