WordPressか、はてなプロか

WordPress始めたんだけど、カスタマイズ多くてすばらしい

例えば、

• 見出しがh2から
• 画像を真ん中にしたい
• 文章を□で囲みたい
• ヘッダメニュー作りたい
• 吹き出し作りたい
• 各デバイスでの見え方を確認したい
• スライドビュー
• その他細かいところを簡単にカスタマイズしたい

などなど、これらが簡単にできてしまう。

テーマによるけど、最初から機能としてあったりする

はてなでもcssコピペでできるけど、ごちゃごちゃしてきませんか？

こういうのが気になって、WordPress始めた。

結果、「最初からやっとけばよかった」って感想。

どこのブログみても「今から始めるなら～」みたいなこと書いてて、鵜呑みにしないでおこうと思ってたけど、鵜呑みにしとけばよかった(笑)

ただし！

WordPressの導入はめちゃくちゃ面倒臭い!!!

沢山のサイトが導入の手引きを書いているので、それ見ながらやればできるわけだけど

書いている人も、パソコン初心者向けには書いていないので、詰まることが多いと思う。

自分にはできるんだろうかって悩んでいる人もいると思うけど、例えば

今すぐ！フリーメール３つ作れ！

って言われたら、すぐ作れますか？

すぐにできない、面倒だから嫌だって人は素直に「はてな」でいいと思う。

はてなはとにかく簡単でサーバーは強固だから。

できるよーってひとは、そのままWordPressでいいと思う。

色々調べたけどサーバーはこれ一択

www.xserver.ne.jp

ちなみに、このリンクは、ただのリンクで、僕には一切お金が入らいないので安心してください(笑)

初回契約は一括前払いだけど、その後はクレジットカードに限るが、1か月ごとの更新だ。料金形態も良心的で、サポートもしっかりしている。サーバーも高速。管理画面もわかりやすい。不満なんてあるのかって感じ。

検索上位の人が勧めていると、どうも怪しく思えるんだが、これは間違いなさそうだ。

ドメインはムームーでいいと思う

muumuu-domain.comこのリンクもただのリンクで、僕には一切お金が入らないので安心してね(笑)

デザインセンスありますか？

カスタマイズが豊富なのがWordPressの利点の一つですが、デザインセンスがないと、はてなで作られたブログにすら見劣りします(笑)

「え、これwpで作っているの？はてなでもできるやん」

っていうブログがほとんどです。

使いこなすにはデザインセンスも必要だし、phpなどの知識も必要なので、できることが多いけど、難しい感じ。なくてもいけますが、はてなと見た目は変わりません。

僕も今作っているけど、はてなでもできるなーって感じのものしか作れていません。はてなのが融通が効くなあってところもありました。

結論

WordPressでするにしても、はてなでするにしても、もし稼ごうと思っているなら、「はてな」ならいきなりプロのがいいと思う。できれば、独自ドメインも取得したほうがいい。後々面倒なことになるから。はてなプロは1か月は無料体験なので、まずそこからですね。

稼ぐ気がないなら、無料ブログ一択。

はてなブログでLINE風の会話形式の吹き出しを使ってみた！

どうも、ヨリミチです。
今回はLINE風の吹き出しに挑戦してみました。
皆さんもぜひ楽しいんでやってみてください。

参考サイト

基本はこちらのコードをいじっただけです。 www.notitle-weblog.com

www.tawashix.com

バックアップ

CSSの知識ゼロで直感でいじったのでブログのバックアップ必須です。

サブブログが余っているなら新規に作ってそこで試すのもいいよ

CSSコード

一番下の「クラス名」「画像のURL」は書き換えて、デザインCSSにコピペ

/* LINE風吹き出し　*/
.entry-content .me-line,
.entry-content .you-line {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 12px;
    border-radius: 16px;
    z-index: 1;
}
.entry-content .me-line {
    background-color: #abf18c;
    margin: 20px 20% 40px 0;
}
.entry-content .you-line {
    border: 2px solid #999;
    background-color: #fff;
    margin: 20px 0 40px 19%;
}
.entry-content .me-line::before,
.entry-content .you-line::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    z-index: 2;
}
.entry-content .me-line::before {
    border-right: 2px solid #abf18c;
    border-bottom: 2px solid #abf18c;
    background-color: #abf18c;
    right: -7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.entry-content .you-line::before {
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    background-color: #fff;
    left: -7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.entry-content .me-line::after,
.entry-content .you-line::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -10px;
    border-radius: 40px;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.entry-content .me-line::after {
    right: -110px;
}
.entry-content .you-line::after {
    left: -110px;
}
@media screen and (max-width: 620px) {
    .entry-content .me-line,
    .entry-content .you-line {
        width: 70%
    }
    .entry-content .me-line {
        margin-right: 30%;
    }
    .entry-content .you-line {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .me-line::after,
    .entry-content .you-line::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .me-line::after {
        right: -84px;
    }
    .entry-content .you-line::after {
        left: -84px;
    }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

例

.kumatan::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/W/WalkingYorimichi/20180815/20180815100720.jpg
);}
.kumami::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/W/WalkingYorimichi/20180815/20180815100727.jpg
);}

LILNE風に会話してみる

記事の編集モードは「Markdown」でした方が楽です。

<p class="me-line kumatan">どう？</p>
<p class ="you-line kumami">なにこれ？</p>

どう？

なにこれ？

吹き出しだよ

やるやん

以上です。

はてなブログのスターはめっちゃ便利だった！

どうも、ヨリミチです。

はてなスターってご存知ですか？

この記事では、スターの説明と便利な活用法について書きたいと思います。

はてなスターって何？

記事の下の方にあるこういうやつです

読んでくれたんだ！ってことがわかるのでとてもうれしんです。
PVの情報だけだとなんだか味気ないですもんね。

これ3つ付けてくれている人がいるんですが、

バグだと思っていました(笑)

もしくは、プロの人や複数サブアカウントを持っている人が、ワンクリックすると３つになっちゃう仕様だと思っていました。今日まで(笑)

調べてみると、いくつでもスターをつけられる仕様のようです(笑)

はてなスターの３つに意味がある？

３つつけると最後まで読みました！
１つだと、もうちょっとがんばれ！

みたいなのが慣習として一部にはあるようです。
ぼくは全然気にしませんが、今日まで知らなかったですし。

ちなみに、このスター、自分の記事にもつけられます(笑)
1個でも3個でも100個でも(笑)
でも運営からスパムと判断されてBANされるかもしれないので、やらないほうがいいです(笑)。むなしいだけですしね。
読者登録も同じくできますが、常識の範囲内で、一つだけするにはいいらしい。

はてなスターがもえらえることの利点は?

もらえたらうれしい、もらったひとが自分のブログに訪問してくれてもうれしい。
でもスターがいくら多くても、はてなのトップページに載せてもらえるわけじゃありません。あくまで、はてブ（はてなブックマーク）基準なんです。
僕はまだはてブ活用できていないので、ほとんどしていません(笑)。

はてなブックマーク画面

これ見づらいんですよね。なので普通にブラウザの機能でお気に入り登録していて、存在すら忘れていました(笑)

でも、こういうことってありませんか？

スマホで見たあの記事、PCで見たいから、また検索…

はてブのアプリがあるので、PCではてブした記事をスマホでみたり、その逆ができたりするので、うまく使えばとても便利。

この画面を使わないにしても、参考になった、みんなにみてほしい！ってときにはてブしたほうがよかったなと思った。

はてなスターのデメリットは？

スターがなくてちょっと寂しいぐらいです(笑)

はてなスターの便利機能

まずはこちらのページにアクセスして見てください。

http://s.hatena.ne.jp/[はてなID]/stars

[はてなID]はあなたのIDです。
IDに大文字が入っている人は大文字で書いてください。

するとこんな画面が表示されます。

はてなスターユーザーページのスター履歴

はてなスターユーザーページの☆レポート

これめちゃくちゃ見やすいんだけど(笑)(笑)

自分がはてなスターしたページが時系列で日付事に並べられているし、相手の名前もわかりやすく表示されているし、はてブの画面より見やすいんだけど(笑)

なぜはてブ画面はあーなった？

☆レポートに関しては、スターが貰えたページが日付ごとに並べられている。

ブラウザのお気に入りだと、ジャンルで分けられるけど、日付では分けられない（そういうプラグインもあるかもしれないが）ので、

• タイトル忘れたけど、〇〇さんのあの記事どれだったかな？

• 一昨日スターした記事どれだっけ？

• 今日はどれぐらいスターしたのかなー？

ってなときに使えそう。

さらに、これを活用すれば、〇月に参考にしたブログを紹介みたいなこともできる。

右のスターフレンドを見てほしい。
これは相互にスターした場合に表示される。
3か月互いにスターをしないと消えてしまう。
自分がよく行く人のページを見るときに便利。

まとめ

はてなスターは純粋にその人の成果物に対する評価。

はてブはそれを他者と共有したいときに使う。

読者登録は人物やブログ自体がお気に入りのときに使う。

しかし、読者登録は1回きり。

これでは記事を書いても、読者が見てくれているのかどうかがわからない。

そこで、はてなスターで既読しました報告。

既読…

あれ、これLINEみたいに自動でいいんじゃないの？(笑)

って、思ったけど、仲のいい人ならともかく、そうじゃない人に毎回既読されて、「きんもー☆」って思われる可能性も出てくる(笑)
まあでも、公開している時点で、見るなというのもおかしいわけで、じゃあ、記事ごとに公開範囲を決められるようにすればいいんじゃないかなと思ったり、読者登録もカテゴリーごとに登録できれば、知りたい情報だけ通知されていいのになと思う。はてなブログはもっと進化できる伸びしろがあるんじゃないかなと思った。

それにしても、はてなスターのユーザーページの機能を利用しているひとはいるのかな？
いや、使ってて当たり前なのかな？
僕は便利なのでこれからは使おうと思いました。

最後まで見てくれたかもしれない人にありがとう！

はてなブログでamazonアソシエイトの審査通過までにやったこと

こんばんは、ヨリミチです。

2018年8月12日に審査通過のメールをもらえました！うれしい！
落ちるかもとビクビクしていたのですが無事承認を頂けてよかったです。
この記事では審査までしたことを書いていこうと思います。

---

---

まず、素朴な疑問から

ブログ歴は？

2018年6月7日に開設なので2か月ぐらいです。

どのブログで登録したの？

このブログです。
2018年8月12日時点で18記事。
承認されて浮かれた勢いではてなProにしたんですが、登録当時は無料はてなです。

なぜ登録しようと思ったの？

8月に入ってから急にPV(アクセス数)が増えたからです。
ブログ開設1か月目の6月は全然PVがでなくて、7月は地震や台風や多忙で放置状態にしてたわけですが、何もしていないのに急にPVが増えたのでちょっとやる気が出てきました。いや、欲が出ました(笑)

amazonアソシエイトについて

amazonが提供する成果報酬型のアフィリエイト・プログラムです。 成果報酬型とは、広告をブログに張って、読者にクリックしてもらい、その商品が購入された時点で報酬が支払われます。 ちなみに、Googleアドセンスはクリック報酬型で、広告をクリックしてもらうだけで報酬がもらえます。

amazonのアカウント取得はフリーメールでもいけるの？

フリーメールだと審査が通りにくいという話もありますが、僕はフリーメールでしました。 商品はいくつか購入しましたが、プライム会員ではないです。

登録料は？

無料です。

どこで登録できるの？

Amazonアソシエイト（アフィリエイト）プログラムに参加しよう！

登録する方法は？

• 上記のサイトで「無料アカウントを作成する」をクリック
• 名前や住所を正確に書く
• ウェブサイト情報の入力で申請するサイトのトップページを入力。
• サイトの種類を選択(適当で)
• 紹介する商品の種類(これも適当で)
• アカウント認証で電話番号を入力
  電話がかかってきますが、機械音声なので安心してください。
• お支払情報はすぐに入力しました。

報酬(紹介料)の支払い方法は？

• Amazonギフト券
  紹介料が￥500になったら支払われます。
  手数料無料

• 銀行振込
  紹介料が￥5000になったら支払われます。
  なんと振込手数料は無料！
  以前は￥300かかっていました。

その月の紹介料が上記の条件に満たなかった場合でも、翌月に繰り越されますので安心してください。

審査期間は？

2018年8月11日の夜に申請して、よく12日の昼に承認メールが来ました。 12日が日曜だから月曜以降かなと思っていたんですがいけました。 お盆なので審査まで時間がかかると思ったんですが関係なかったですね(笑) 人によっては数時間で承認がもらえたり、何日もかかかる場合があるようです。

承認されたらすること

特に規約の部分は重要です。

Amazonアソシエイトの規約

以下の文言をサイトのどこかに明記しなければなりません。 規約に反するとBANの可能性もあるそうです。 僕はaboutページに記載しました。

[サイト名]は、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。

アソシエイト・セントラル・ホームをお気に入りに

アソシエイト・セントラル - ホーム

ここでクリック数の確認や、商品リンクを作成などをします。頻繁にアクセスすることになるのでお気に入りにしておきましょう。

はてなブログでの設定

はてなブログにamazonアソシエイトIDを登録

はてなブログのアカウント設定＞AmazonアソシエイトIDで変更するをクリックしてIDをコピペ。
これで商品リンクを張ると報酬が得られることになります。

はてなブログの機能で商品リンクを張るには？

記事編集画面から貼り付け

もし無い場合は+ボタンから追加

• 詳細
  

  はてなブログ Perfect GuideBook

• 画像
  

• 商品名
  はてなブログ Perfect GuideBook

Amazonで商品リンクを作成して張るには？

紹介したい商品を普通にアマゾンで検索します。商品ページの一番上にAmazonアソシエイトツールバーがあるので、そこでリンクを作成できます。

審査までにやったこと

Amazonの商品の紹介をしました。

www.yorimichiblog.com

これAmazonの商品のリンクを張ること自体は、アソシエイトが承認されていなくてもできます。もちろん、報酬はないですが。一番効果があったのはこれじゃないかなと思います。
商品を売りたいという心意気を買ってくれたのかな。

書いた記事は一つだけだけど(笑)
しかも楽天の広告張ってた。

とある日記サイトは15記事ほどあり、アドセンスは通過したけど、Amazonは落とされたそうです。
サイトを見てみると、商品の紹介が一つもありませんでした。

審査を通過するには商品紹介をしているかが重要なんじゃないでしょうか。

なお、承認されたら、承認前のAmazon商品のリンクは再度張りなおしてください。
承認前はamazonアソシエイトID無し、つまり無名のリンクなので報酬は発生しません。
承認後は張っていたリンクを削除してから、同じようにAmazon商品のリンクを張るとID付きのURLになり、報酬を得られます。

これだけだと不安なので、審査直前にやったのは以下

ブログデザインの変更

ブログのテーマを「Minimalism」に変更にして見出しなどのデザインを変更しました。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

編集画面＞デザイン＞デザインテーマのインストール

グローバルナビゲーションの設置

このサイトでいうと、サイト上部のHOME,about,Contactの部分です。

デザイン→PC→ヘッダ→タイトル下に以下のコードを追加 URLのところは書き換えてください。

<nav id="gnav">
    <div class="gnav-inner" id="menu-scroll">
    <div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
    </div>
</nav>

アイコンは他にも沢山あります
Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO

コンタクトフォームの追加

Googleフォームで「お問い合わせフォーム」を作成する方法 - 思考は現実化する

Amazonアソシエイト対策というより、Googleアドセンス対策で入れました。

パンくずリストの追加

Home>ブログ>はてなブロガが 編集画面＞デザイン＞カスタマイズ＞記事＞パンくずリストにチェック

まとめ

• Amazonのアカウントで商品を購入する

• Amazon商品を紹介する

• ブログの見栄えを変える

何をすれば審査を通過できるかはAmazonの中の人にしかわからないですが、本記事で気になったところを試してみるといいかもしれません。

審査を通過する目的を通じて、ブログのカスタマイズ方法などを学習できたので良かったです。

ある一定のラインをクリアできたことで自信にもつながりました。

次はGoogleアドセンスなんだけど…
これは難関のようですね。独自ドメインにもしないといけないし、とりあえず、はてなProの無料期間を試してから考えようかな。

気づいたら4000文字超えてた...

最後まで読んで頂きありがとうございます！

---

はてなブログで2つ目(複数)のブログを作る2通りの方法。メリットと注意点

ブログ制作が楽しくなってくると、もう一つブログを作りたくなります。

その際のメリット、注意点を記しておきます。

現在無料ブログで開設していると仮定します。

 1つ目の方法　サブブログを作る

2つ目のブログを作るのに最もシンプルな方法です。

はてなブログでは無料で３つまでブログを持つことができます。

作成方法

ブログの管理画面＞ダッシュボード＞＋新しいブログを作成

表示された「かんたんブログ作成ページ」でドメイン名を入力するだけですぐに開設できます。

メリット

• 作るのが簡単

最も簡単に2つ目のブログを作ることができます。

• ブログ切り替えが簡単

記事を書く時も、右上のアカウント名をクリックすることで、ブログを切り替えできるので簡単です。

注意点

• 匿名性がない

同じIDでブログを作ることになるので、当然プロフィールも同じです。こっそり別のブログを作りたい。別人格で書きたいのには不向き。

• メインブログはひとつ

他の人の記事にスターやコメントをしたとします。そのブログの運営者がどんな人だろうと辿ってきた場合、表示されるのは「メイン」に設定されているブログが表示されます。

メインにするブログは切り替えられますが、相手によって見てほしいブログを切り替えることはできません。

• メインでない方のブログには、はてなユーザーの流入が期待できない

上記の通り、スターをしたIDをクリックしても表示されるのはメインのブログになります。サブのブログは検索からの流入を狙い特化型のブログにするか、メインからの誘導をする必要があります。

純粋に検索からの集客力を知りたい場合には良い。

2つ目の方法　サブアカウントを作る

別のIDで運営したい場合、サブアカウントというサービスがはてなにはあります。

サブアカウントは4個まで取得することができます。

現在使用しているアカウントと合わせて合計5個のアカウントが持てます。

もちろん、無料です。

作成方法

[Myはてな - はてな](http://www.hatena.ne.jp/my)

Myはてな＞設定＞サブアカウント

メリット

サブブログで作るのとは違い、別のIDで運営できるので新たな気持ちで制作できます。

注意点

• 登録時はメールアドレスを別途用意する必要がある

サブアカウント登録には現在使用しているメールアドレスは使用できません。

サブアカウント毎に新たにメールアドレスが必要です。

• ポイントの支払いはメインアカウントのみ
  
  

• パスワードはメインアカウントと同じ、後で変更可能
  
  

•  メインアカウントがProでもサブアカウントは無料ブログでスタート
  
  

• サブアカントの切り替えはMyはてなからする

 これが少々面倒なのですが、ブラウザを複数起動、もしくはブラウザの機能でプロフィール変更などで対処できると思います。

その他

• WordPressでマルチサイト

WordPressなら一つのレンタルサーバーで複数のブログを作成できます。

もちろん、無料ブログのように広告が強制的に表示されることもないです。

本格的にブログをするならWordPress一択のようです。

WordPress公式サイト

WordPress.com で簡単にサイトを作成しましょう