アルバトロスでショートコードを使ってみた

タイピング

今回の記事は。

WordPress(ワードプレス)のテーマ「アルバトロス」のショートコードについて。



これを使えば HTML や CSS の知識なしで、誰でも簡単に楽しいページをつくることができます。

このサイトは「アルバトロス」で制作しているので。

サンプルを見ていただければ、わかりやすいかと思います。

吹き出し機能

サイトのキャラクターなどを登場させて、文章を読みやすくすると面白いです。

例えば、こんな感じで。

ぱそた
管理人のぱそたです。
ぱそた
よろしくお願いします。
女子
よろしくお願いします。
ぱそた
早速ですが、このサイト見ていただいてる方にコードの説明をお願いします。
女子
わかりました!
女子
今、使っている吹き出しを表示させるショートコードです。
[voice icon="アイコン画像のURL(アイコンは150×150くらいが良いみたい)" name="女子" type="l"]ここにセリフを入れます。[/voice]
女子
type っていうのは l だと左側に r だと右側にアイコンが表示されるようになるんです。
ぱそた
なるほど。
ぱそた
アイコン画像のURLも説明しておいた方が良いと思うけど。
女子
そうですね。
女子
ワードプレスの場合、管理画面から簡単に画像をアップロードできるから。
女子
画像がどこに保存されてるか、なんてあまり意識しませんよね。
ぱそた
うん、僕もあまり気にしてないし。
女子
まずは、管理画面から メディア → ライブラリ でアップロードした画像を選択してください。
ぱそた
うん。
女子
すると、選択している画像の詳細が見れるので、上の方に URL が表示されています。
ぱそた
なるほど。
女子
あとはコピペ(コピー&ペースト)すれば、オッケーですよ!



関連記事のリンクを画像付きで表示

記事内に表示させたい 記事ID を入力することで関連記事として画像付きのリンクがつくれます。

今回も ぱそた と 女子 に説明してもらいましょう。

ぱそた
関連記事のリンクを画像付きで表示させるショートコードだって。
女子
内部リンクってやつですね。
ぱそた
自分のブログ内で他にも見てほしい記事をリンクとして張るわけですね。
女子
そうですね。
ぱそた
じゃあ、コードの説明をお願いします。
女子
わかりました!
[kanren postid="記事ID"]
女子
これで関連記事が表示されるんです。
女子
こんなふうに。

WordPress(ワードプレス)で最強テーマと話題のアルバトロスを導入してみた

2018.07.01
ぱそた
これも使えそうだね。

補足説明と注意説明

ぱそた
もういきなり僕たち出てきてるけど。
女子
今回は補足説明と注意説明のショートコードですね。
ぱそた
じゃあ、説明よろしく。
女子
まずは補足説明から。
女子
文章の下などに補足としてコメントを入れる機能ですね。
女子
ちなみにコードは。
[aside type="normal"]補足説明
ここに補足説明を入れます。[/aside]
女子
こんな感じになります。
補足説明
ここに補足説明をいれます。
女子
注意説明の場合 type を warning にすればオッケーです。
[aside type="warning"]注意説明
ここに注意説明を入れます。[/aside]
女子
こんな感じです。
注意説明
ここに注意説明をいれます。
ぱそた
簡単だね。

2カラム表示

ぱそた
今回は2カラム表示のショートコードだって。
女子
これも使えそうですね。
ぱそた
じゃあ、説明お願いします。
女子
わかりました!
女子
投稿記事内で2カラムにするショートコードです。
女子
ちなみにコードは。
[colwrap]
 [col2]パソコンだと2カラム[/col2]
 [col2]スマホやタブレットだと1カラム[/col2]
[/colwrap]
女子
もちろん画像を入れることも可能です。
女子
こんなふうに。
困ったとき
2カラム表示のテストです。ここにテキストを入れて下さい。画像でも問題ありません。HTML や CSS の知識は必要ありません。スマホやタブレットで見ている人は1カラム表示になっています。
ぱそた
便利だね。



最後に

ぱそた
もうこの記事も終わりみたいだね。
女子
そうなんですね。
ぱそた
アルバトロスのショートコードの一部を今回紹介したけど。
ぱそた
今回紹介したショートコードは OPEN CAGE(オープンケージ)のテーマでしか使えないんだよね。
女子
(私はアルバトロス便利だからそれでも良いけど)じゃあ、他のテーマに乗り換えしにくいですね。
ぱそた
うん、若干表示が変わるみたいだけど、同社で後継テーマのストークとかなら使えるけどね。
女子
OPEN CAGE(オープンケージ)のテーマは他にも使いやすいテーマが色々あるそうですよ。
ぱそた
うん、興味のある方はリンク貼っとくんで良かったらどうぞ。
女子
テーマ選びの参考にして下さいね。