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

ブログの始め方

ジョン
「ブログのはじめかたも、とうとう第3回目だよ。」
女の子
「目次作るんでしょ!今回も私はまだ名無し」
ジョン
「目次、自己紹介文、文字数カウント、それからだから。」
女の子
「はいはい、かわいい名前付けてよね!」

目次 (表示・非表示とかできません。リンクにもなっていません。)

  1. 「目次」を作ろう!
  2. 自己紹介文をサイドバーに入れたい。
  3. 文字数カウントを分かりやすく
  4. そろそろ女の子の名前を決める。
  5. 吹き出しの機能
  6. まとめ!

1.「目次」を作ろう!

さて、①②③と自作目次を付けています。

しかしブロガーの皆さんの投稿を見ている限り、機能的な目次がついているんですね。その多くが表示/非表示を選ぶことができて、なおかつ、見出しにリンクしている状態になっています。

これ非常に見やすくて便利です。
それではさっそく調べていきましょう。ジョン的見解ではやっぱりプラグインかなと。レッツトライ!

1-1目次のプラグインを探すよ!

今回もスワローテーマの中に標準装備されているのかな、と探してみました。しかしHTMLをいじらないといけない言うことで(CSS?)プラグインの方が楽ちんだし(´ε` )ってことで、以下の記事から見つけました。Samuraiblogのmuramatsuさんの投稿です。

https://www.sejuku.net/blog/65677

結果

「Easy Table of Contents」というプラグインを採用します。

1-2Easy Table of Contentsに決まり


Easy Table of Contents と Table of Contents Plus
この2つの違いが分かりやすく比較されていました。僕が目指しているブログは説明が充実しているノウハウ系ではないですが、ブログ作りにあたって、たくさんのブログを見て非常に勉強になります。

SAMURAI Blogさんの記事に沿ってサクサクダウンロード。からの設定。

もうブログ作りも余裕だし!!

1-3ちょっと待って、なんか変だけど

自作の目次の下に欲しかった形式の目次が現れました!次から自動作成、リンクも勝手にしてくれる!!プラグイン本当に便利ですね。

ん??

点々が・・・・・・出てるよね・・・・・

せっかくかっこいい目次ができたと思ったのに、なぜこの点が?
Google先生、いっつも聞いて悪いけど、また教えて。いや教えてくれる人を教えて。。

だいぶつ先生ネットにありました。先駆者ブロガーさん、ありがとうございます!

この投稿を見る限り、ジョン愛用のテーマ「スワロー」と「Easy Table of Contents」は相性がよろしくないようです。せっかく素敵な目次ができましたがここは泣く泣く「Table of Contents Plus」に変更です。

短い付き合いだったな!Easy Table of Contents!また会うかもね。

1-4「Table of Contents Plus」にチェンジ

「Table of Contents Plus」をSAMURAI Blogさんの記事を見ながらまたダウンロード。プラグイン設定をしました。結果は!?

できました!でもEasy Table of Contentsの方がデザインが良かったな。見出しに番号打ってたら、それも含まれてしまうみたいなので、設定もやり直します。

これで、目次の完成でーす!

2.自己紹介文をサイドバーに入れたい。

続いて自己紹介文です。

誰が投稿しているのかはっきり書いている方が、読む人も安心して見れますよね。もしかしたら、すごいパンクでロックなジョンを想像する人もいるかもしれませんが、僕はサラリーマンで、ブログを始めたばかりの駆け出しジョンです。

ジョンブログはいわゆる「雑記ブログ」にしたいと思っています。その辺りも軽く触れておきたい部分です。

自己紹介文に含みたいのは、ジョンアイコン、3行くらいのブログ説明。その下にできればツイッターフォローボタンもほしいです。

これに関しては記事が増えていけば、変えていけばいいかなと思っているので、今回は最低限のみ。イラスト、紹介文だけにしておくことにしました。そうなると簡単。今回はテーマを活かします。

2-1外観設定でテーマを活かそう

僕はスワローテーマを使っていますが、このテーマには5個のウィジェットエリアが標準装備されています。このウィジットの中から、自己紹介に選べそうなパートを選び、サイドバーの上部に設置します。

ウェジットのことはmonleywpさんのページで学びました!

2-2フリー素材の探し方。
かわいいフリー素材集「イラストや」

ジョンのアイコン画像ですが、イメージは爽やか白人男性で、僕の生まれ持った清潔感を加えられたらいいなと思っています。でもアイコン画像はオリジナルのものがほしいですよね。今回は最低限。まずはフリーで使える画像を探してみましょう!

フリー素材と言えば、ウェブ上で皆さん一度は見たことが事があるのではないでしょうか。

かわいいフリー素材集 イラストや

https://www.irasutoya.com/

人形を抱く心に闇を抱えた人のイラスト
(解説)漫画やアニメなどに登場する、怖いくらい強い愛情と精神的に病んだ性格を兼ね備える俗にヤンデレと呼ばれる人のイラストです。

ヤミ~ 笑

セベクのイラスト
(解説)クロコダイル(ワニ)の頭をした古代エジプトの神様、セベクのイラストです。

ゆるキャラですね。。。

水を吐くフグのイラスト
(解説)体を大きく見せるために吸い込んだ海水を吐き出しているフグのイラストです。 笑

とにかくイラスト数がすごい!!水吐くふぐとか需要あんの?
一つ一つのイラストに解説も書いてあって、思わず笑っちゃいます。
会員登録が不要で画像を保存して使っていきます。

ジョンの画像も見つけました。

働く人のイラスト(白人男性)
「会社でスーツを着てノートパソコンを使った仕事をしている白人男性のイラストです」とのことです。ブログ作ってそうで、いいですね。決まり!しばらくはこれを使ってみましょう。

2-3その他のフリー素材

フリー画像に関してはこのサイトでも詳しく特集されていました。


フク郎 さんのサイトです。他にもブログ作成にお役立ち記事いっぱいでした。

2-4自己紹介文完成

外観設定とフリー素材をうまく組み合わせて、ジョン自己紹介文の完成です!

3.文字数カウントを分かりやすく

ここで僕は思ったわけですよ。

「どうせプラグインだろ?」

今まで分からないことはGoogle先生でしたが、なんとなく自分でプラグインから探せるのではないか。

そうと決まればとっととプラグイン検索→ダウンロード!

3-1プラグイン探し

最初は検索に「文字数 カウント」と入れました。出ません!

そう言えば、プラグインて全部英語のタイトルだよな。

次は「word count」で検索。でました。

見つけました!絶対これ文字数カウントだ!
早速ダウンロードすると。。

3-2文字カウント その名もWP Word Count

見事にカウントされました。「ブログの始め方①」って一番時間かかったのに、文字数②③より少ないんだーとかいろいろ考えながら。

4.そろそろ女の子の名前を決める。

そういえば、冒頭に女の子の名前決める話していましたね。
ジョンの相方なので英語の名前で行きましょう。
吹き出し機能が今回できるはずなので、次回の投稿までには決めておきます。吹き出し機能の方が優先です!

5.吹き出しの機能

いよいよ吹き出しですが、吹き出しは少し難しそうですね。
みなさん、SPEECH BUBBLEというプラグインを使っている人が多いようです。ひつじさんのサイトを参考に進めていきます。

それにしてもひつじさんのサイトはすごく見やすいですね。これからもサイトを作っていくにあたって参考にさせてもらうことが非常に多そうです。

では、レットトライ!

5-1SPEECH BUBBLEの導入。したいけど見つからない。

「Speech Bubble」見つかりません!

困った。

プラグインに関しては、先駆者ブロガーさん達のレポートがあったので、それなりにすんなり安心して導入してしてこれました。(自分で開拓したのは文字数カウントくらい。)

仕方ないので一つ一つ詳細を見ながら導入を検討しましょう。

5-2 結果。Word Balloon(吹き出し)を導入するよ。

日本語の説明があったのと、吹き出しのレパトリーが多いみたいなので、Word Balloonに決めました。実装していきましょう、ダウンロード、有効化。

ちなみに説明はここで見れます。

製作者やーまんさん。ブログもされているようです。

5-3 Word Balloon(吹き出し)テスト!

できた!きっとこれで吹き出しが!

↑ここにきっと完成形が出ていますね!プレビューで見ないと投稿画面では分かりません。

投稿画面には下の画像のようなコードになっています。これがHTML、CSSと呼ばれる言語?コード?

逆サイドもやってみましょう!

右側の方もこんな感じで、会話しています!

考え事バージョンもあります。これは便利!

色変えたいなと思ってみたら、有料みたい。。 無料でできました!充実の機能です!
またやってるうちに導入を検討しましょう。

6.まとめ!

  1. 目次のプラグインは「Easy Table of Contents」か「Table of Contents Plus」
  2. フリー素材をうまく使おう!困った時はイラストや。
  3. 文字カウントのプラグインは「word count」
  4. 吹き出しのプラグインは「Word Balloon(吹き出し)」おすすめ!
ジョン
ジョン
ブログとしての体裁が整ってきたぞ!
私の名前は!?
それに私のアイコン、フリー素材の暗い子だし。。
女の子
女の子
ジョン
ジョン
君の名は!次回ね。
アイコンはフリー素材から選んでみたよ。
魔法使い的なのじゃなくて!
もっと秘書っぽかったり、金髪だったり。
女の子
女の子
ジョン
ジョン
次回はじゃあ、アイコンどうするか考えよう。
名前はうーん。秘書子かな!
今日はここまで、バイー
秘書子。。。いいけど。。。
女の子
女の子