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

タイピング

今回の記事は WordPress(ワードプレス)のテーマ、アルバトロスのショートコードについて。



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

このサイトは、アルバトロスで制作しているので、サンプルを見ていただければ、わかりやすいかと思います。

吹き出し機能

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

例えば、こんな感じで。

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



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

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

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

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

2018年7月1日
ぱそた
これも使えそうだね。

補足説明と注意説明

ぱそた
もういきなり僕たち出てきてるけど。
あどみん
今回は補足説明と注意説明のショートコードですね。
ぱそた
じゃあ、説明よろしく。
あどみん
まずは補足説明から。
あどみん
文章の下などに補足としてコメントを入れる機能ですね。
あどみん
ちなみにコードは。
[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(オープンケージ)のテーマは他にも使いやすいテーマが色々あるそうですよ。
ぱそた
うん、興味のある方はリンク貼っておくので良かったらどうぞ。
あどみん
テーマ選びの参考にして下さいね。