超初心者によるブログの始め方④

ブログの始め方
ジョン
ジョン
今回はキャラアイコン作りやってみよう。
秘書子です。やっぱりかわいいアイコンがほしいな。
秘書子
秘書子
ジョン
ジョン
フリー素材もかわいいの多いけど、有料素材も見てみましょ。
なんかフリー素材で済まそうとしてませんか!?怒
秘書子
秘書子

1. SNSでも使えるアイコンを作ろう

ライン、ツイッター、フェイスブック、その他にもいろいろアイコン設定しないといけない機会が多くないですか?

ジョンという名前から外国人風にしたいですが、僕はバリバリの日本人で、正直あまり特徴の無い顔なので、あまり自分をアイコン化したくないな、という気持ちがあります。

しかし、アイコンというのはあくまでイメージなので、見る人に対して、示したい特徴がある場合はとても便利ですね。

最近、SNS上では色々なアイコンを見かけるようになりました。携帯ではチャッピーとかsay-pepoleのアイコンを見るとかわいいなと思います。

https://itunes.apple.com/jp/app/chappie/id996919169?mt=8

今回、秘書子さんもうるさいので、どうやってオリジナルのキャラアイコンを作るか調べてみましょう。

秘書子
秘書子
うるさいって何よ 怒
聞いてたの 笑
ジョン
ジョン

2. ココナラでキャラアイコンを外注しよう

皆さん、「ココナラ」ってご存知ですか?副業の話題になると、必ずと言っていいほど出てくるココナラ。

ランサーズ、クラウドワークスなど様々なスキルを、お金に変えるサービスがありますが、ココナラは今一番注目を集めているといえるでしょう。

「知識・スキル・経験」など、みんなの得意を気軽に売り買いできるスキルのフリーマーケットです。友達に聞かれたり、お願いされるような「あなたの得意」を簡単出品。

https://coconala.com/

僕も、仕事で使う専門性のある知識を出品しています。ブログを作成するにあたっての情報を買ったりもしました。

さて、このココナラの中からアイコン作成を探して、オリジナルのアイコンを作ってくれる人を探しましょう。

2-1 ココナラで「アイコン作成」出品者を探す

カテゴリから検索できるので、「似顔絵・イラスト・漫画」カテゴリーの「アイコン作成」に進みましょう。

アイコン作成の値段は500円~5000円くらいで、たくさんの出品者さんを探すことができます。アイコンに関しては2000円~3000円くらいが相場のようです。

一人目は3000円だけど、もう一人追加したら追加料金1000円でいいよ!

みたいなサービスもあるのでお好みにあった出品者さんを見つけた後は、プロフィールや、追加オプションなども見てみるといいかもしれません。

https://coconala.com/categories/191
たくさんの出品者がでてきます!
秘書子さんぽいイメージが!

今回、秘書子っぽいイメージのかわいいアイコンを、紅音みくさんの出品で見つけました。

秘書子のイメージで発注しようかなと考えて、プロフィールなどを見ていたところ、、、「イラストAC」というフリー素材ページにて、サンプルに使っているキャラがDLできるとのこと!

早速ダウンロードページに飛んで秘書子アイコンをダウンロードしてみましょう。

2-2 結局、フリー素材「イラストAC」にてアイコンダウンロード

今回は「ココナラで有料アイコンを発注する」という記事にする予定でした。

ところがフリーでも本当にかわいいものを見つけたので、紅音みくさんの作品を使わせてもらうことにしました。ありがとうございます!!
↓↓

https://www.ac-illust.com/main/profile.php?id=kRZtkTuR&area=1t

ということで、、

秘書子
秘書子
新生、秘書子です!よろしくお願いします。
かわいい♡♡♡
ジョン
ジョン

3. 枠線を付けたり、「合わせて読みたい」「こちらもどうぞ」を導入したい

さて、基本的な「ブログを作る」に必要なことが少しずつできるようになってきました。概ね満足で早く次の記事に進みたいのですが、もう少し足したい機能があります。

それは、、、「枠線」。

よくブログにでてくる、まとめとして分かりやすくする為の囲い枠です。そこには更に「合わせて読みたい」や「こちらもどうぞ」などのサイト内リンクであったり、補足説明などの書き込みですもできます。

いろいろな方法はあるようです。テキストエディタを使う、HTML、CSS、コードなど超初心者には分からない内容が盛り沢山です。

ブログを続けていくにあたっって、せめてこれらの用語だけでも理解できるようになりたいですが、とにかく最初は「記事を書けるようになる」が優先です。

3-1 「スワロー」搭載のショートコードを使おう

私が最終的にこれでいこうと思ったのは「スワロー」に標準搭載されている「ショートコード」です。

3-2 ショートコードとは

What is a shortcode?
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

https://en.support.wordpress.com/shortcodes/

ワードプレスから引っ張ってきましたが、要約すると

ワードプレスで色々やろうと思うと、コードとかややこしいよね。でも、みんなが使いたがる機能は、簡単な言葉「ショートコード」で簡単に使えるぜ!

ということです。

お店で炒飯をオーダーすることを例に考えてみましょう。

例えば炒飯を作る時に、レシピにはこの様に書かれていますね。

  1. 野菜とかチャーシュー、炊いたご飯、卵を用意する。
  2. 野菜とかチャーシューを刻む。
  3. 卵とご飯と刻んだ材料を炒める。
  4. 皿に盛り付ける。

この1~4の過程はお店で炒飯をオーダーする時には伝えません。

「炒飯一つ!」

で注文完了ですね。

ブログ作成においても、「枠線をつける」という作業に対して、実際はコードをたくさん入力する必要があります。(炒飯を作る過程が細分化されているのと同じ)。

ショートコードは、そのたくさんの入力を、簡単な言葉に置き換えて指示していまう訳です。(「炒飯一つ!」と注文するのことと同じ)

聡明な読者の方はお気づきだと思いますが、「炒飯を注文するお店」が今回私が使っている有料テーマ「スワロー」になるわけですね。

3-3 「スワロー」のショートコードでできること

補足説明枠線、注意説明枠線、普通の枠線、タブ付き枠線ができるようです。
他にもプラグインで入れてしまいましたが、吹き出し表示もショートコードで表現可能です。

まずはブロック作成時に「ウィジェット」の中から、「ショートコード」を選択しましょう。

その後は、使いたいショートカットをコピペし、必要な文章を入力していきましょう!

3-3-1 補足説明

補足説明のショートは、ワードプレス上でこのように表示されています。

編集画面でこのようにショートコードを入力すると、次の様に見えます。
補足説明の入れ方です!

ブログらしくていいですね!

3-3-2 注意説明


編集画面でこのようにショートコードを入力すると、次の様に見えます。
注意説明の入れ方です!

3-3-3 枠線

枠線のショートコードはこの様になり、以下の様に表示されます。
シンプルな枠で囲む →これが入ると行が増やせるようです。

3-3-4 タブ付き枠線

タブ付きの枠線のショートコードはこの様になり、以下の様に表示されます。
テスト
こちらもどうぞとか、合わせて読みたいとか

3-4 ショートコードの使い方を知った上で

今回はスワローのショートコード機能を使えるようになりました。
さらにこのショートコード機能、他にもたくさんあり、「AddQuicktags」というプラグインで更に簡単に入力することができます。

しかし、気づいたことが一つ有ります。デザインは伝えたいことが有る時にもちろん便利ですし、読んでくれている方にも分かりやすくなることが多いです。その反面、デザインのことを気にし始めると、記事を書く時間が大きく削られます。

今は初心者なので(超初心者)何をしても時間がかかります。優先順位を考えて、ここからは価値有る記事を書いていくことを一番に考えたいと思います!

4. 4回の連載でできるようになったこと

ここまで4回にわたり、ジョンが超初心者として進んだ最初の一歩目を記してきました。

できるようになったこと
・アイキャッチ画像貼り付け
・文字の装飾がしたい(文字大きさ調整、フォント、下線、マーカーハイライト)
・目次を表示させる
・自己紹介をサイドバーにカスタマイズ
・文字数のカウント
・自分のキャラアイコンと、女の子のキャラアイコンを使う
・吹き出しを使った会話形式を織り込む
・枠線をつける

何度も読み返し、何度も修正を加え、あーでもないこーでもないと試行錯誤しながらの結果です。やはり、先駆者ブロガーさん達のページをいつも拝見しているので、それと比べたら物足りないですし、足元にも及びません。

しかし
「千里の道も一歩から」
「A journey of a thousand miles begins with a single step!!」
「Rome was not built in a day」

ここに新たなスタートを切ることができたのは嬉しいですし、ブログを始めたばかりで右も左もわからない時に、「ああ、ジョンてやつも最初は困ってたんだな、諦めずにやってみよ」と思ってもらえたら嬉しいです。

5. まとめ

  1. アイコン作りにはココナラを覗いてみましょう。2000円~3000円を出せばオリジナルアイコンを作ってもらえます!
  2. 枠線はショートコードを使って対応してみましょう。(今回はスワローテーマにて)
  3. ブログ作り、千里の道も一歩から!
秘書子
秘書子
少しはブログらしくなってきましたね!
正直こんなに大変だとは思わなかった。。。
ジョン
ジョン
秘書子
秘書子
あらあら、弱気になってる暇は無いですよ!早く次の記事、書いていってくださいね!
。。。(何書くか全然考えてなかった。)
じゃあ、今日はここまで。バイー
ジョン
ジョン