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ショートコードまとめ

当ブログの記事をご覧いただきありがとうございます。また遊びに来てください^^

17 件のコメント

  • Wow, incredible blog format! How lengthy have you been blogging for?

    you make blogging glance easy. The overall look of
    your web site is excellent, let alone the content material!

  • Woah! I’m really enjoying the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between user friendliness and visual appeal.
    I must say that you’ve done a amazing job with
    this. In addition, the blog loads super quick for me on Safari.
    Outstanding Blog!

  • Great blog here! Also your website loads up very fast! What host are you using?

    Can I get your affiliate link to your host? I wish my website loaded up as quickly
    as yours lol

  • I leave a response each time I appreciate a article on a blog or I
    have something to valuable to contribute to the discussion. It’s triggered by the passion communicated in the article I browsed.
    And after this article [Wordpress]有料テーマ”Stork”専用のショートコードメモ。実際に使ってみた表示サンプルまとめ。
    | ウミウシ飯. I was actually moved enough to post a thought 😉 I do have 2 questions for you if it’s okay.
    Is it only me or do a few of these remarks appear like they are
    coming from brain dead people? 😛 And, if you are writing
    at additional online social sites, I would like to keep up with anything fresh you have to post.
    Could you make a list the complete urls of all your communal sites
    like your Facebook page, twitter feed, or linkedin profile?

  • Wow that was strange. I just wrote an incredibly long comment but after I
    clicked submit my comment didn’t show up. Grrrr… well I’m nnot writing all that over again. Anyhow,
    just wanted to say great blog!

  • Yesterday, whikle I was att work, my clusin stole my iPad
    and tested to see if it caan survive a 40 foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she
    has 83 views. I know this is entirely off topic but I
    had too share it with someone!

  • Hi there just wanted to give you a quick heads up. The
    text in you content seem to bee running off thee screen iin Opera.

    I’m not sure if this iis a formattging isue or something to do with browser compatibility but I figured I’d
    post to let you know. The design and style look
    great though! Hope youu get the issue resolved soon. Many thanks

  • I love your blog.. very nice colors & theme. Did you design this website yourself or
    did you hire someone to do it for you? Plz answer back as I’m looking to design my
    own blog and would like to find out where u got this from.

    many thanks

  • I was pretty pleased to discover this site. I need to to thank you
    for ones time due to this fantastic read!! I definitely really liked every part of it and i also
    have you book marked to check out new things in your web site.

  • コメントを残す

    メールアドレスが公開されることはありません。