こんにちは。

日本も言論の自由が無くなってきているきがするのは私だけでしょうか？
（これ、今度書こう…別に誰の為でもなくていい。）

今回は、Amazonの商品リンクみ見た目を改善する簡単な方法です。
とっても簡単でした。

<div>タグで囲むだけ</div>

はい、見出しそのままです！笑

以上。

はい、すみませんでした。

Before

Amazonアソシエイトの商品リンク画像は、スマホもパソコンも縦並びに表示されてしまいます。

しかも左に寄ってしまってバランス悪い…

それを解消したい！

簡単に横並びにする方法

<div>……html……</div>

同じカスタムHTMLに複数のコードを貼ります。
<iframe>から</iframe>までがひとつの商品リンクのHTMLです。

それを、<div></div>で囲います。

<div>
<iframe>
…………………..
</iframe>

<iframe>
…………………..
</iframe>

</div>

After

これだけで、横並びに表示可能です。

スマホ表示（イメージ画像）

パソコン表示（イメージ画像）

実際の商品リンク

まとめ

ここまでご覧いただきありがとうございます。

これで見た目がスッキリしました。

少しでもお役に立てたら嬉しいです。

こんにちは。
パソコンもブログも初心者の私が買って良かったアナログツールの紹介です。

難しいIT用語ばかりでお疲れじゃありませんか？

安価で場所も取らないので取り入れやすい♪

この記事はこんな方に向けて書いています。

• パソコン初心者
• ブログ初心者
• 記事を書くのに整理が苦手
• 忘れっぽい
• 目が疲れる

少しでもお役に立てたら嬉しいです。

初心者ブロガー必須ツール！

ブログを始めるのに必要なものは？

• パソコン本体
• サーバー契約
• ドメイン取得
• WordPressインストール
• ・・・などなど

初心者はこれだけでお腹いっぱい

頭を整理するためにも、記事のことをまとめるにしてもあって損はないツールでした！

ザ・ホワイトボード！！！

いつも壁にメモ用紙をテープで貼ったり、付箋を貼ったりしてました。

先日、付箋を買いに文房具屋さんに寄ってスケッチブックや、無地のノートやいろいろ模索した結果ホワイトボードを購入。

おしゃれなオフホワイトボードはコスパ最強神ツール！

書ける・消せる・貼れる・頭の整理に最適のコスパ最強神ツール！（日本製）

オススメポイントと活用法

オススメの設置場所

私のオススメの設置場所は、パソコンの前で座ったまま書き込み可能な場所。

金具を本体に取り付けるプラスドライバー１本と、画鋲１つで設置完了！

ブログのネタ帳

ブログのネタって変な時に思いつくんですよね。
違う記事を書いている時とか…
ちょっとテレビを見ていた時とか…

そんな時に目の前にあるとササッと書ける、字が汚くたってOK！

書く！消す！貼る！

行ける消せる貼れる！
付箋を貼ったり、マグネットで領収書やレシートを貼ったり用途多彩。

メモ用紙・ノートの節約

書いたら消せる。ゴミも増えない。
ブログの構成に悩んだってすぐに直せる！
紙の節約にもなってコスパ最強！

初心者にはマインドマップより早い

マインドマップ（英: mind map, mindmap）とは、トニー・ブザンが提唱する、思考の表現方法である^[1]。頭の中で考えていることを脳内に近い形に描き出すことで、記憶の整理や発想をしやすくするもの^[1]。
ブザン・オーガナイゼーション・リミテッド社が商標登録している^[1]。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

パソコンばっかり見てると目が疲れる

マインドマップは私も２つほどお勧めされたものを使用してみましたが、入力してマップを展開していくだけでも

ん？あれ？なんだっけ？

…となって何がしたかったのか忘れてしまうことが多々あり。

結局、アナログな紙とペンから→ホワイトボードという選択に至りました。

パソコン初心者がマインドマップアプリの操作で苦戦・消耗するのもどうかなと。

「スマホ読書」は気軽でいい

紙の本だと重いし、持ち歩きに不便。
寝っ転がって読めないし、読書に快適な環境が見つけられないと疲れる。

読書に慣れていなかったらページをめくるのもめんどくさい。

その分スマホならSNSを見たりブログ読んだり普段の生活で使い慣れてるし、寝転んで読める。

スマホならいつでも読めるね！

読書って恥ずかしい？スマホならバレない！

読書が恥ずかしいって思っている人がいるのでは？とツイッターで見つけました。

高校時代、教室で本を読んでいるとやたらと茶化された。
彼らが知っているような本だとよけいにはしゃがれて、鬱陶しいことこのうえなかった。
読書という行為が「変」で珍しかったらしい。そんな人たちが親の世代である。
彼らの子供たちが読書を「恥ずかしい」ことだと思ったとしても無理はないと思う。

わかりみが深い…

普段から隠キャじゃないと辛い。
私も隠キャじゃない風なので辛い…（よそ様の声が勝手に聞こえる）

スマホなら言い訳できる

まさにこれに尽きる。
スマホは肌身離さず持っていて画面に見入ってても違和感なし！

スマホでゲームしているのか、ツイッターやインスタを見ているのかなんて覗き込まれなければわからない。

通勤通学の電車の中、お昼休み、休憩時間、家族がいるリビングでも、ベッドの中でも読みやすい。

読んでる本のタイトルも隠せてしまう。

読書習慣がない人に読んで欲しい本

この先、読書をするかしないかはこの１冊を読んでから決めて欲しい。

読者の感想

読書の仕方の考えを根本的に変える本。
この本に出会うまで300冊くらい読んできたが、最初に読めばよかったと後悔した本。
よく、いい本は100冊に1冊と言われるがまさにこの本はその1冊に値すると思う。

読者の感想

私が一番初めに読んだ本。
本を読むにあったって、まず本の読み方が知りたいなと思って手に取った一冊。
本書は多読とは何か？から始まり、本の選び方や読み方から読書後のフォローまで、読書初心者からしたらとても参考になった。

本気で気になった本は紙で読みたい

読者の感想

今までの本の読み方とは大きく異なる考え方。
本を読むことを趣味の読書ではなく、自分への投資活動とする。
気になったことや思いついたことを、本に直接書き込む、ドッグイヤーつける。メモを転記したら不要なものから思い切って捨てる。

この感想に留めずに、行動することで初めて読んだ価値が生まれる体験だった。

※この本の著者が読書法で提言していることを実践するには、実際に紙の本を購入して読んだ方がいい。

どうしても活字が苦手ならオーディオブック

オーディオブックとは？
Audibleは、プロのナレーターが朗読した本をアプリで聴けるサービスです。移動中や作業中など、いつでもどこでも読書ができ、オフライン再生も可能です。

「ながら読書」のオーディオブック２選

Amazonの安心感と便利さはあるけど、1500円はちょっとお高い？
最初の無料体験と１冊無料は是非試してみたら決めたい！

聴き放題で750円は安い！
30日間無料体験あり！
ちょっと聞いて合わないなと思えば次へといろいろ聴けるね。

もったいない本舗

WordPress/Cocoonテーマ　ブログカードの使い方

Cocoonブロックのブログカードの解説です。
超初心者向けなので高度な設定の追加CSSについては記載していません。

私がブロックの一覧を見ても名称も機能もさっぱりわからなかった経験から初心者のお役に立てたらと思い解説していきます。

Cocoonブロックでできること

ブロックの追加→下にスクロールして、Cocoonブロックで開きます。

※画像では[∨]のマークのところを指定していますが[∨]じゃなくても開きます。

ブログカードの表示

Cocoonブロックからブログカードを選択すると、↑このように表示されます。

ラベルの表示

スタイル設定→ラベルをクリックしたら一覧が表示されます。

ラベルの貼り方

それでは実際にブログカードを貼ってみます。

ラベルあり

ラベルなし

↑このように表示されます。
貼りたいURLを入力またはコピペします。

入力した画面ではこのように表示されますので、ちゃんと表示されるかプレビューで確認してみるといいと思います。

↑このように複数枚貼ることも可能ですが、ラベルは同一のものとなります。

表示はひとつづつ貼るのと変わりません。

あとがき

私以上の超初心者で、パソコンにもあまり詳しくない方でもわかるように説明してみましたがいかがでしたでしょうか？

参考になった！気に入った！

いいねボタンとチャンネル登録お願いします！笑
（YouTube風)

何か問題や、ここ間違ってるよ！
ってところがありましたら、コメント欄かツイッターでご指摘ください。

WordPress/Cocoonテーマ　アイコンリストの使い方

Cocoonブロックのアイコンリストの解説です。
超初心者向けなので高度な設定の追加CSSについては記載していません。

私がブロックの一覧を見ても名称も機能もさっぱりわからなかった経験から同じ初心者さんのお役に立てたらと思い解説していきます。

Cocoonブロックでできること

ブロックの追加→下にスクロールして、Cocoonブロックで開きます。

※画像では[∨]のマークのところを指定していますが[∨]じゃなくても開きます。

アイコンリストの表示

アイコンは画面右側の設定が文書のままだと表示されないので、ブロックに切り替えてください。

この設定画面が閉じている場合は、右上の公開するの横の車輪マークで開きます。

アイコンと数字の切り替え

※ここが数字で設定されているとアイコンの選択ができません。

スタイル設定以外での装飾方法

このような感じになりました。

あとがき

このブログでも使用しているCocoon（コクーン）というテーマは無料なのが信じられないほどとても高機能でオススメです。

有料テーマ？…無料テーマ？
どう違うの？もうわかんないことばかりだ…

悩みすぎて諦めなくて大丈夫です。
Cocoonユーザーはたくさんいますので、安心して始められます。

私も悩んで迷って消耗したけどさ

WordPress/Cocoonテーマ　吹き出し機能の使い方

Cocoonブロックの吹き出し機能の解説です。
超初心者向けなので高度な設定の追加CSSについては記載していません。

私がブロックの一覧を見ても名称も機能もさっぱりわからなかった経験から同じ初心者さんのお役に立てたらと思い解説していきます。

Cocoonブロックでできること

ブロックの追加→下にスクロールして、Cocoonブロックで開きます。

※画像では[∨]のマークのところを指定していますが[∨]じゃなくても開きます。

吹き出し一覧

男性

男性　デフォルト　丸（枠線あり）

悩むおばさん　フラット　丸（枠線なし）

男性医師

男性医師　LINE風　四角（枠線あり）　

会社員

ビジネスウーマン　LINE風　丸（枠線あり）　

どや顔女性（右）考え事　四角（枠線なし）

スタイル設定

■人物

サンプルで用意されていて、５種類の男性女性で計１０個用意されています。
自分で設定することも可能、表示させたアイコンの顔の上でクリックしてファイルやメディアライブラリから設定できます。

ダッシュボード→Cocoon設定→吹き出し
ここで常に使いたい物を設定しておくこともできます。
設定しておくとスタイル設定の人物の一覧に表示されるようになります。

■吹き出しスタイル

デフォルト・フラット・LINE風・考え事の４種類で、LINE風だけ左右でデザインが異なります。

■人物位置

左右の２種類。（LINE風だけ左右でデザインが変わります）

■アイコンスタイル

アイコンスタイルは２種類の４パターンです。
・四角（枠線なし）（枠線あり）
・丸　（枠線なし）（枠線あり）

●枠線なしの四角と丸の違い

下記のワンちゃんの画像をご覧ください。
２つとも枠線なしで、上が四角で下が丸です。
表示のされ方が違いますね。

●アイコン名の表示

表示させたアイコンの下をクリックすると入力できるようになります。
入力しなければ表示されません。

吹き出し色設定

デフォルト　四角（枠線なし）

考え事　丸（枠線なし）

背景色・文字色・ボーダー色の設定ができます。
色の種類は選んだスキンの設定で変わると思います。

●スキンの設定

スキンの設定は、
ダッシュボード→Cocoon設定→スキンで選べます。
スキン名の左の写真のアイコンの上にポインターを合わせるとデモが表示されます。

いろいろな吹き出しの使い方

いろいろ試してみました。
あまりこういう使い方をされているのは見かけないですが…
画像と広告がちょっと斬新です。

これは白抜きボックスです

Cocoonブロックの白抜きボックスを入れてみました

画像を貼ってみました

広告を貼ってみました

吹き出しに吹き出し

吹き出しに吹き出し…
組み合わせによってバグるようです。

画像や広告を貼ってみるのは面白いですね⭐️

私のアイコンは「いらすとや」のフリー素材なのでオリジナルのアイコンを作りたいですが、なかなかアイデアが浮かびません。

ココナラに無料登録だけはしたんですが…
ペンギンが定着しつつあるので、早めに考えなければ…