MENU
ヨシコフ
2DCGデザイナー兼ワーママ
はじめまして!ヨシコフです
5y3yの子育てCG屋です

【ブログの目標】
・AEを中心とした各種ツールの、検索をしてもなかなかわからないつまづきの解消&メモ&共有
・生活情報メモ&共有

【どんなひと?】
2DCGツール→AfterEffects,Photoshop,Illusrator
3DCGツール→UnrealEngine4
blogツール→wordPress

【大切にしている事】
家族と末永く平和に暮らしたいです
そのための5つの力(貯める力・守る力・稼ぐ力・増やす力・使う力)を習得中
ブログランキングに登録していマス

ブログランキング・にほんブログ村へ
楽天ROOMはこちら !!厳選アイテムをまとめました!!

【2020年版】【cocoon】WordPressのサイドバーに自己紹介を表示(twitter付)

当ページのリンクには広告が含まれています。

スポンサーリンク

yoshikovskyのブログのテーマは、もうcocoonではなくSWELLです
にもかかわらず、アクセス数が良いので残しておきます

cocoon時代のTopページ

割と簡単にできます

すでに、よりわかりやすく解説している記事が多く出ています
デジタル音痴な自分でも出来たので、あんまり迷う人はいないと思います

目次

サイドバーに表示する自己紹介の作成

STEP
アイコン貼る方は、予め、wordPress管理画面のメディアライブラリにデータをアップロードする
wordPress管理画面のメディアライブラリー
STEP
アップロードした画像のリンクをコピーしておく

画像をアップロードし、アップロード後の画像を選択すると、リンクがコピーできます
黄色い枠の箇所が該当箇所です

リンクをコピーし、適当にメモにでも貼り付けておきましょう
あと工程でコピー&ペーストするからです

STEP
wordPress管理画面の「外観」から、ウィジェット→テキスト→サイドバー→ウィジェットを追加を追加する
やどんyoshikovsky

…ウィジェットって何?

ウィジェットとは、ホーム画面上(ここではブログ)に常に表示させる要素(文字だったりイラストだったり)の事
ブログで言うと、最近の投稿一覧だったり、最近のコメント一覧だったりを指します

ブログでなく、もっと身近なものに例えると、スマホの電池残量やPCの画面上の時計が、ウィジェットに分類されます

wordPressのウィジェット編集画面
初見でおえないほど機能がある

wordPressのウィジェットはとにかく多機能

やりたいことを見つけて、出来るようになるといいですね!

今回はブログのサイドバーにプロフィールを常時表示さるのが目的です

さらに画面を下方向へスクロールして、「テキスト」を選択しましょう
そして、「テキスト」の▲(プルダウンメニュー)から「サイドバー」を選択して、「ウィジェットを追加」をクリックして確定します

STEP
ウィジェット画面左側にあるサイドバー→テキスト項目で自己紹介を作成

ウィジェット画面の画面右側の「サイドバー」から「テキスト」を選択します

すると、編集画面が出てきます

タイトルには、適当に名前をつけておきましょう
例えば、プロフィールとか

テキストの編集方法は「ビジュアル」と「テキスト」の二つの方法があります

①ヴィジュアルで編集

メリット:見た目で編集できる
デメリット:小回りが利かないことも

②テキストで編集

メリット→htmlコードで編集でき、レイアウトの小回りが利く
デメリット→まったくhtml触ったことない人は厳しいかも

さて、プロフィール画像を表示するには、テキストで編集を使います

プロフィール画像

そして、以下コードを入力し、①の工程でコピーしておいた画像のリンクを貼り付けます

補足

今回アイコンを中央に貼り付けたいので、「テキスト」ウィンドウで入力しました
「ビジュアル」で入力したら左揃えになります


・「表示設定」の設定について
いろいろ試してみましたが、チェックボックス付けたところがどう反映されているのかわかりませんでした

-<center>
<img class="profileimg" src="①でコピーしておいたリンク" width="150" height="150" />
</center>-

プロフィールの文章も、好きなように打ちます

こちらも「ビジュアル」から入力できますが、上述の通り、小回りが利きません
細かくレイアウトしたいときは「テキスト」ウィンドウを使います

yoshikovskyの場合、「ビジュアル」でざっくり入力してから、「テキスト」ウィンドウで微調整しました

ケースバイケースで中央揃えにしたり、左揃えにしたりしたかったので
「ビジュアル」 編集にはリストも作ってくれる機能があって便利ですね

整列・配置機能もあるとよいのですが^^;

以上で「自己紹介」のウィジェットは終わりです

さてさて、twitterを貼り付けるにはどうすればいいのでしょう?

twitterアカウントを貼り付ける

前提として、twitter publishのlog inが必要です
全て英語なので、翻訳サイトを立ち上げておきましょう

twitterの埋め込み方は全部で3種類あります

 ・フォローボタンを埋め込む
 ・自分宛へツイートできるようにする
 ・自分のtwitter画面を埋め込む 
STEP
twitter publishへアクセス
Twitter Publishのtop画面

自分のtwitterアドレスを、画像の黄色枠内に入力

STEP
EmbeddedTimeLine(twitterのタイムラインを埋め込む)か、 TwitterButtons (twitterのボタンを埋め込む)かを選択
右側:タイムラインを埋め込む形式
左側:twiterのボタンを埋め込む形式

TwitterButtonsを選択するとさらに選択画面に移ります

右:フォローボタン
左:ツイートを送信するボタン
STEP
リンクをコピーする

STEP②で、どちらを選択しても こちらの画面に移動します

Copy Codeをクリックすると、コピーできます

わざわざリンクをコピーするのは、先ほど自己紹介を作成したHTMLに貼り付けるためです

STEP
必要によってカスタマイズする

STEP③の画面にて
それぞれset customization options.をクリックすると、カスタマイズできます

★ EmbeddedTimeLine の場合

上から

  • サイズ(今回は320×400)
  • タイムラインのベースの色(Light(白)かDark(黒))
  • 言語(日本語であればAutomaticで)
補足

Opt-out of tailoring Twitter  →チェックつけても変化なし
わかんない^^;

yoshikovskyのタイムラインはDark

twitterの表示サイズを指定しなかった場合、どこまでもどこまでも長く表示されてしまいます

サイズ設定をしないで、デフォルトのままコードをhtmlに埋め込むと…
どこまでもどこまでも、タイムラインが長くなる

★ TwitterButtons (FollowButton) の場合

上から

  • ユーザーネームの表示/非表示
  • ボタンを大/小
  • 言語(日本語であればAutomaticで)

★ TwitterButtons (MentionButton) の場合

上から

  • 定型文入力(気軽にツイートしてね!とか、第三者とのコミュニケーションの壁を低くした人向け?)
  • 🙇わからない^^;テストしたけど、どう変わったのやら?他のアカウントも指定したい場合なのかな?
  • ボタンを大/小
  • 言語(日本語であればAutomaticで)
STEP
wordPressの「外観」→「ウィジェット」に戻ってコピペ祭り

wordPressに戻って、コピーしたアドレスをテキストウィンドウにコピペ!

wordPress→ウィジェット→サイドバー→テキスト→テキストウィンドウにコピペ

htmlが組まれた状態のコードなので、「ビジュアル」ではなく「HTML」にコピペするだけで良いです

レイアウトは好き好きに調整してね!

22/06/01更新

ブログのテーマをcocoonからswellに乗り換えました
途端に、プロフィールの作成がイメージに沿ったものを簡単に作れるようになりました

cocoonは、CSSやhtmlの知識がないとキツイ
対してswellは、あまり知識がなくても直感的に作れました!

cocoonをお使いの皆様
上記のやり方を見てアレルギー反応が出る方は、有料テーマに変えた方が良いです
決して安くない料金はかかりますが、時間短縮になり、何よりもブログ書くことに専念できるからです!

ブログ書くことが嫌いになってしまったら本末転倒ですよ!

収益上げて、テーマ料金取り返しましょ!w(できてませんが;)

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

はじめまして!ヨシコフです
4y2yの子育てCG屋です

【ブログの目標】
・AEを中心とした各種ツールの、検索をしてもなかなかわからないつまづきの解消&メモ&共有
・生活情報メモ&共有

【どんなひと?】
2DCGツール→AfterEffects,Photoshop,Illusrator
3DCGツール→UnrealEngine4
blogツール→wordPress

【大切にしている事】
家族と末永く平和に暮らしたいです
そのための5つの力(貯める力・守る力・稼ぐ力・増やす力・使う力)を習得中

コメント

コメントする

目次