手順やタイムライン表現で使えるオレティメットコード

2020年2月16日2020年3月1日楽しみながら継続するための簡単カスタマイズWordPress,オレティメット,カスタマイズ,ショートコード,プラグイン,究極プラグイン

タイムライン

手順やタイムライン
表現で使える
オレティメットコード
を創りました
[su_icon icon="icon: clock-o" color="#f3281b" text_color="#000000″ size="60″ shape_size="4″ radius="100″ text_size="4″ margin="10px auto" target="self"][/su_icon]
		

こんにちは。
みんな大好きinowayいのうぇいです。

さて、今回は

inoway

CSSで矢印ってどうやって作るんだろう？

って疑問を調べるうちに夢中で創っちゃったオレティメットコードを紹介します。

クリックで飛べます

タイムラインBOX
無駄に多いカスタマイズ要素
なので組み合わせは無限

※この使い方イイね！

タイムラインBOX

１

簡単にいうとこんな奴です

BOXの左に矢印がついている感じですね。
下に下にコンテンツを見せて行く感じで使えます。

手順とかタイムライン、年表なんかを表示したいときに便利かな。

まあ、なんか無意味に使いたくなる魔力を秘めてたりしますが(笑)
※個人の感想です

ちなみに例によって(？)無駄に高カスタマイズ性にしてあります。

[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/02/6c6c08e8967fcc840f5cd8cd5fa4f57e.png" background="rgba(0, 0, 0, 0)" color="#000" size="80" shape_size="6" radius="100" margin="0" class="　"][/su_icon]

シンプル・イズ・ベストって言葉しらねーのか

無駄に多いカスタマイズ要素

ショートコード挿入時にイジれる(変更出来る)とこは多めです。
なので、ちょっと挿入画面がゴチャゴチャしました😅

それもこれも欲張りな貴方のために！！(責任転嫁)

※ショートコード挿入画面

※実際の表示

弐

驚異の１２項目本当はもっともっと選べる要素を
詰め込みたかったけど
収集がつかなくなるから諦めました〜^^;

※使ってみてね♪

なので組み合わせは無限

・・・は嘘ですけど^^;
まあ、12箇所もさわれるトコあればソレに近いんじゃないかと(笑)

でわでわ、ザックリとですが色んなパターンをやってみます。

３

枠線無しの
まるで付箋のような
シンプルな感じ

４

黒板仕様枠を茶に、中を緑にして黒板風。
立体感がいい感じ♪
白字がチョークっぽさも演出できますね

５

ザ・旗

６

もういっそのこと全部真っ白にして
黒背景の上にのせるなんてのも
面白いかもしれませんね。
字が目立ってよいかも？

いや、そもそも矢印さえあれば後は文字だけのほうが伝わるのではないか？
色とか枠とかにとらわれない柔軟な思考こそ
求められているのではないか？

※本文に深い意味はありません

８

インパクトは大事！！

※吹き出しも可ですね

９

手書き風のBOXとか、まったく別の枠線を使うショートコードとかを表示するのも素敵です。

※アイデア次第ですね♪

2020

２月１５日こちらのオレティメットコード【タイムラインBOX】は他の装飾囲みBOX系のショートコードと一緒にオレティメット倶楽部のほうにアップロードしています。
メンバーのかたは是非是非つかってみて下さい。

※王道の使い方

メンバーサイトへはコチラから登録出来ます

お名前
メールアドレス
任意のパスワード

※もちろん無料です

Short codes Ultimate の様々な機能と３つの拡張アドオンは公式サイトで詳しく確認出来ます。

公式サイト　トップページ
Short codes Ultimateのショートコード一覧
拡張アドオン追加のスキン
拡張アドオンエクストラショートコード
拡張アドオンショートコードクリエイター
まとめてお得バンドルアドオン

リンク先はプラグイン制作元の海外のサイトになります。英語が苦手なかたは私と同じようにGoogle等の日本語翻訳機能をお使い下さい。

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/members/cf/addonget"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2019/03/shopping.webp" icon_size="95"]関連記事
Shortcodes Ultimate の拡張オプションを手に入れる方法

見てみる

[/su_icon_text][/su_panel]

管理人 inowayいのうぇい

※プロフィール画像変更しました

井上自由

英語が赤点のため入試に英語がない三流高校の土木科卒が最終学歴の二児の父。とある工場で日々同じ作業を繰り返し何も疑問を感じず生きてきたが昇進をきっかけに全てが狂い始める。上からの圧力に下からの突き上げ、理不尽な要求にサービス残業。仕事とは何なのか？働く事＝我慢なのか？生きる事の意義を見失いかけた時に思い出したのは何年も前に遊びでかじったアフィリエイトでした。パソコン初心者からのスタートでしたが現在はインターネットの無限の可能性に人生を賭けています。

ランキング参加中です♪

あなたの応援が励みになりまくってます♪

この記事が少しでも為になった、面白かった、と思ったらクリックお願いします。

カテゴリー

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/category/i-started-netbusiness/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2017/09/a755f04771d120a04c149e034fef8b0c.jpg" icon_size="95"]第０章
私がなぜネットビジネスをはじめたか？

見てみる

[/su_icon_text][/su_panel]

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/category/start-your-netbusiness/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2017/09/023f9e3845be0e37416deea7670c36af.jpg" icon_size="95"]第１章
あなたがネットビジネスをはじめる前に

見てみる

[/su_icon_text][/su_panel]

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/category/mindset/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2117/09/5ccd115d821bb7493e27b1dd3a9ccd92.jpg" icon_size="95"]第２章
くじけずに続けられる至高のマインドセット

見てみる

[/su_icon_text][/su_panel]

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/category/customize/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2017/09/e9b6a14d4476eecb5b6c9788fd4e22a7.jpg" icon_size="95"]第３章
楽しみながら継続するための簡単カスタマイズ

見てみる

[/su_icon_text][/su_panel]

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/category/know-how/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2017/09/0dfdcea23e46a4a9afbc4066cc802071.jpg" icon_size="95"]第４章
これだけは絶対に知っておくべきノウハウ

見てみる

[/su_icon_text][/su_panel]

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/category/teaching-materials/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2017/09/06862ca7102eb0bcf2496832d2a3fb14.jpg" icon_size="95"]第５章
行動の指針になるオススメの教材達

見てみる

[/su_icon_text][/su_panel]

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/blog/"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2018/08/08b1b000e66706d992f48d53d719b41b.png" icon_size="95"]特別編
とりとめもなくテキトーに

見てみる

[/su_icon_text][/su_panel]

応援拡散お願いします

ブログランキング