IT

ブログ記事の書き方をいろいろ試してみた2

ここではWordPressテーマ「JIN」を使ってどのような記事が書けるのか機能をいろいろ試してみたいと思います。

フォーマット カスタムHTML

フォーマット カスタムHTMLを使ったサンプル。

YouTubeの埋め込みコードを貼り付けることで動画を掲載しています。(サイズ指定 width=”500″ height=”281″ 動画再生オプション付き autoplay=1&start=15&rel=0&loop=1&playlist=xxxx) ※muted=1 は効かないようです。※スマホでは自動再生は効かないようです。

埋め込み YouTube

埋め込みブロックにYouTubeのURLを張り付けるだけなのでこちらが簡単ですが再生オプションは指定できません。

フォーマット カスタムHTML

フォーマット カスタムHTMLを使ったサンプル。

Twitterの埋め込みコードを貼り付けることで動画を掲載しています。

埋め込み Twitter

埋め込みブロックでTwitterのURLを貼り付けています。

フォーマット ソースコード

余白やタグを考慮したコードスニペットを表示します。 出力内容は折り返しされず突き抜けるのでデザインが崩れる場合がありました。

<div>
  <p>aaaaaaaaaaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbbbbbbbbbb</p>
</div>

フォーマット 整形済み

スペースやタブを含むテキストを追加し、スタイリングして表示します。

 if (x = 10) then {
      x = x + 1;
 } 

フォーマット プルクオート

テキストの引用に特別な視覚的強調を加えます。

引用元を入力します

フォーマット テーブル

表(Table)を挿入します。

セル1セル2
セル3セル4
フォーマット 詩

詩を挿入します。特別な余白形式を使ったり、歌詞を引用したりできます。

 つまづいたっていいじゃないか にんげんだもの

ウィジット ショートコード
JINショートコード

ショートコードで吹き出しを表示してみます。

JIN吹き出し
[chat face="画像情報" name="キャラクター名" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

[chat face="man1" name="男性の口コミ" align="left" border="blue" bg="blue"]男性の口コミです[/chat]
[chat face="woman1" name="女性の口コミ" align="right" border="red" bg="red"]女性の口コミです[/chat]
[chat face="sheep.png" name="ひつじくん" align="left" border="red" bg="red"] オリジナル画像も使えるよ! [/chat]
男性の口コミ
男性の口コミ
男性の口コミです
女性の口コミ
女性の口コミ
女性の口コミです
ひつじくん
ひつじくん
オリジナル画像も使えるよ!

ショートコードで余白をあける 50px

[jin-yohaku50]

ショートコードで画像加工

丸め radiusを「on」
枠をつける borderを「on」
影をつける shadowを「on」

[jin-img shadow="on" radius="on" border="on"]
  <img src="https://www.object-lab.co.jp/wp/wp/wp-content/uploads/2019/08/Penguins.jpg" width="150px">
[/jin-img]

ショートコードで星

[jinstar3.0 color="#ffc32c" size="16px"]

ショートコードでチェックアイコン

[jin_icon_check color="#e9546b" size="18px"]