STORK ブログ向けWordPressテーマ

ハイサイ!ウミウシ大好き!しんやりょう@umiushimeshiです。

WordPressでブログを書き続けて3年が経ちました。
「もっと書くことに集中したい!」ということで、はじめて導入した有料テーマ”Stork”。

今回はStorkを購入した人のみ使用できる、Stork専用のショートコードを実際に使ってまとめてみました。

いってみたら、自分用のメモですね。
この記事を見れば自分が何かしたいときにすぐわかるので。

Storkの購入検討されている方も、「へぇ〜こんなことできるんだ〜」という
参考にしてもらえると幸いです。


WordPress有料テーマ Stork とは?

WordPressテーマ Stork

STORKはブログ専用のWordPressテーマです。
AdSenseコードの挿入やCTA(コールトゥーアクション)などビジネスブログにおける必要不可欠な要素が最初から用意されているので、サイト構築に詳しくない方でも簡単に「誰が使っても美しいサイト」を構築できます。

WordPressは無料テーマも優秀なので、
「CSS,HTMLなにそれおいしいの?」ってコードのコの字も知らない人でも
わりと簡単にブログかけちゃうんです。

でも無料テーマは「あそこをこういじれたらいいんだけど・・」というカスタマイズの必要がでてきたり、
続けるにつれて不満もでてくるので、「コードを勉強しなきゃきついなぁ・・・」ってなっちゃうんです。

時間をかけてプログラミングを勉強するか、今はとにかく書くことに集中したいのか。

ということで、ぼくはお金を支払ってでも、ブログを書くことに集中したいため、Storkを購入したのでした。
だいたい1万円くらい。

ぼくのブログを見てもらえれば、「有料ブログもいいな!」と思ってもらえるのではないでしょうか。
少なくともぼくは満足しています。

Stork 専用ショートコード表示サンプル

では実際に、Stork専用のショートコードを使ってみながら、どんな風に表示されるのかまとめてみましょう。

記事中に関連記事のリンクを画像つきで表示

導入すると下のように表示されます。
これが1つだけ記事をリンクさせたい場合。

[保存版]沖縄(那覇)・石垣から便利なLCC(格安航空券)まとめ。メルマガ(SNS)登録してアジアを安く旅行しよう!

2016.06.25

記事IDの部分に、表示させたい記事のIDを入力すればOK。

投稿の編集 ウミウシ飯 WordPress

ちなみに記事ごとのIDは、ワードプレスログイン後の投稿一覧画面から知ることができます。
表示させたい記事の編集画面を表示させれば、パーマリンクを設定していたとしても、記事IDが表示されます。(FireFoxの場合)

GoogleChromeだと、投稿画面より記事タイトルにマウスオーバーすれば表示されるそうです。

複数記事、ラベルなしの関連記事表示方法

つづいて複数記事の場合のコード。

複数記事のIDをコンマで区切ればOK。サンプルは下に表示してあります。

[石垣島]スイーツなら白保「お菓子の家パピル」がおすすめ。今なら"キャラメルバナナタルト"と"パッションフルーツソースの杏仁プリン"が絶品だぞ!

2016.06.16

[石垣島]八重山そばの店「丸八」で豚生姜焼き定食を食べてきたんだけど普通にうまい。

2016.06.16

最後に、ラベルなしのシンプルな関連記事表示コード。

コードが”kanren2″となっています。もちろん複数記事の表示も可能。

[LCC]香港エクスプレスが石垣島へ就航開始! 片道5000円は安い!鹿児島、高松も就航へ。

2016.06.15

「せんせい派?それともクエスト派?」ダイビング用の水中スレートなら「Jikky(ジッキー)」がおすすめ。スレートペン改造方法も教えちゃうぞ!

2016.06.11

記事内で2カラム表示にする方法

通常記事は1カラムですが、記事内で2カラムにわけることもできます。
*デスクトップでは2カラム、タブレット&スマホでは1カラムになるとのこと。

実際に使ってみたらこんな感じに。

Speechbubble ryo

デスクトップの時のみ2カラムになるよ

Speechbubble picachu

タブレット&スマホでは1カラムだよ

3カラム表示も可能!

2カラム表示とほとんど同じ方法で、3カラム表示も可能に。
こちらもデスクトップのみ対応なのでスマホでは1カラム表示になります。

実装する際、今度はコードが”col3″になります。

20151107 IMG 0885

ヒブサミノウミウシだよ

20160422 IMG 1542

テンテンウミウシだよ

20160519 IMG 1887

キイッポンウミウシだよ

補足説明するときのコメントタグ

補足説明もタグで簡単に目立ちやすくできます。

*ウミウシは実は貝を持たない巻貝の仲間なんですね。
と、こんな風に補足説明をいれることも。

注意書きをするときのタグ

*ウミウシはキレイでカワイイですが、持ち帰ることはやめましょう。
と、かなり目立つ感じで注意説明を追加することができます。

シンプルな枠で文章を囲む

シンプルな枠で文章を囲む。
これだけで他と差別化ができますね。

リンクつきのボタン作成コード

サンプル1。

サンプル2。大きめ。

シンプルならこれ。

シンプルボタンの大きめサンプル。

目立たせないならこれ。

大きめもある。

背景つきサンプル。

背景が黄色になりました。サンプル。

角丸で背景黄色で大きい。とにかく目立つ。サンプル。

会話のような記事を書きたいときに。吹き出し機能。

RYO
画像をアップロードすれば、吹き出し機能を使って会話形式も可能に。
アイコンは左右に配置することができます。これで会話っぽくなる。*右側設定のはずがうまくいかず。
Ryo
通常通りリンクとかも貼れるし、リスト形式にすることもできます。

  • リスト1
  • リスト2
  • リスト3
RYO
Facebook風とか
*LINE風にしたつもりがうまく実装されませんね。
RYO
アイコン自体を大きくすることも!でかい!

Stork(ストーク)からの追加機能も。

アイコンを囲む枠の色を変えられるそうです。

SHINYA
アイコンの周りのボーダーの色を変えるテスト。
黄色(type内に icon_yellow と追記)
SHINYA
アイコンの周りのボーダーの色を変えるテスト。
次は赤(type内に icon_red と追記)
SHINYA
アイコンの周りのボーダーの色を変えるテスト。
最後は青(type内に icon_blue と追記)
SHINYA
アイコンの周りのボーダーの色を変えるテスト。
やっぱりダメ押しの黒(type内に icon_black と追記)

サンプルコードとオプション例

  • icon=のところには表示させたい画像をアップロード後、ファイル名を入力
  • name=は表示させたい名前を入力
  • 吹き出しのオプションは、r=右表示 l=左側表示 big=アイコン大きく fb=facebook風 line=LINE風 icon_色(red,blue)で枠の色を変える
  • オプションを複数使用したいときは、半角スペースで区切る。例:r fb icon_red

実際に使いながら記事にまとめてみると、使い方も覚えるしメモもできて良い。

実際に使ってみると、「これ使えるなーこれは使わないな」というのが自分なりにでてきました。
この記事を見ればコードも丸わかりなので、かなり記事を書くのが楽しくなりそうです。

いかがでしたか?
有料テーマだけあって、デザイン、使い勝手、機能とかなり充実してます。
これは買ってよかったな〜と一安心。

ぜひ無料テーマに飽き飽きした方、有料テーマで時間を節約したい方、Stork(ストーク)を使ってみてください。
Storkとは幸せを運ぶこうのとりの意味だそうです。

以上、しんやりょうでした!

参考にした記事はこちら

Storkショートコードまとめ

STORK___ブログ向けWordPressテーマ.png

当ブログの記事に共感していただけたら、また読みにきていただけるとうれしいです。読んでくれる方の数が多くなると、更新するやる気につながります^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です