MENU
ブログランキングに登録していマス

ブログランキング・にほんブログ村へ
プロフィール背景画像
yoshikovsky
2DCGデザイナー兼ワーママ
はじめまして!yoshikovskyです

【ブログの目標】
・各種ツールの、検索をしてもなかなかわからないつまづきの解消&メモ&共有
・ワーママという特殊な立場で有益な情報発信
・生活情報メモ&共有
・ネタに困ったら雑記ブログ

【どんなひと?】
2DCGツール→AfterEffects,Photoshop,Illusrator
だけでは、最近厳しいので、blender2.8習得したいです
blogツール→wordPress

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

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

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

目次

自己紹介の作成

①アイコン貼る方は、予めメディアライブラリにデータをアップロードする

wordPressの左サイドのメニューからメディアを選択

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

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

②外観→ウィジェット→テキスト→サイドバー→ウィジェットを追加を追加する

やどんyoshikovsky
やどんyoshikovsky

…ウィジェットって何?

ホーム画面上(ここではブログ)に常に表示させる要素(文字だったりイラストだったり)の事
例えばスマホの電池残量や、PCの画面上の時計のウィジェットに分類されます

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

wordPressのウィジェットはとにかく多機能
やりたいことを見つけて、出来るようになるといいですね

今回はブログのサイドバーにプロフィールを常時表示さるのが目的です
「テキスト」を選択しましょう
画面を下方向へスクロールすると出てきます
そして、プルダウンメニューから「サイドバー」を選択して、「ウィジェットを追加」をクリックして確定します

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

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

ヴィジュアルで編集→見た目で編集できる
デメリット:小回りが利かないことも
テキストで編集→htmlコードで編集できる
まったくhtml触ったことない人は厳しいかも

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

プロフィール画像を表示するには、テキストで編集を使います
そして、以下コードを入力します。
補足 今回アイコンを中央に貼り付けたいので、「テキスト」ウィンドウで入力しました
「ビジュアル」で入力したら左揃えになります

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

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

プロフィールの文章を好きなように打ちます
こちらも「ビジュアル」から入力できますが、細かくレイアウトしたいときは「テキスト」ウィンドウを使います
私の場合、「ビジュアル」でざっくり入力してから、「テキスト」ウィンドウで微調整しました
ケースバイケースで、中央揃えにしたり、左揃えにしたりしたかったので
「ビジュアル」 編集には、リストも作ってくれる機能があって便利ですね
整列・配置機能があるとよいのですが^^;

補足「表示設定」の設定について
いろいろ試してみましたが、チェックボックス付けたところがどう反映されているのかわかりませんでした
使えなかったからといって不便はなく、今回は取り上げませんが、気づきを発見したら更新します

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

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

twitterの埋め込み方は全部で3種類あります
・フォローボタンを埋め込む
・自分宛へツイートできるようにする
・自分のtwitter画面を埋め込む

①twitter publishへアクセス
https://publish.twitter.com/#

Twitter Publishのtop画面

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

②EmbeddedTimeLine(twitterのタイムラインを埋め込む)か、 TwitterButtons (twitterのボタンを埋め込む)かを選択します

右側:タイムラインを埋め込む形式
左側:twiterのボタンを埋め込む形式

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

右:フォローボタン
左:ツイートを送信するボタン

③htmlに入力するリンクをコピーする

Copy Codeをクリックすると、コピーできます
②のどちらを選択しても、 こちらの画面に移動します

④必要によってカスタマイズする
それぞれset customization options.をクリックすると、カスタマイズできます

★ EmbeddedTimeLine の場合

上から
・サイズ(今回は320×400)
・タイムラインのベースの色(Light(白)かDark(黒))
・言語(日本語であればAutomaticで)
補足 Opt-out of tailoring Twitter  →チェックつけても変化なし。わかんない^^;

yoshikovskyのタイムラインはDark

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

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

★ TwitterButtons (FollowButton) の場合

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

★ TwitterButtons (MentionButton) の場合

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

④アドレスをコピーして、wordPressに戻って、テキストウィンドウにコピペ
wordPress→ウィジェット→サイドバー→テキスト→テキストウィンドウにコピペ
htmlが組まれた状態のコードなので、コピペするだけで良いです
レイアウトは好き好きに調整してね!

220/06/01更新
ブログのテーマをcocoonからswellに乗り換えました
途端に、プロフィールの作成がイメージに沿ったものを簡単に作れるようになりました
cocoonは、CSSやhtmlの知識がないとキツイ
対してswellは、あまり知識がなくても直感的に作れマス
swellは乗り換えたばかりで、まだ使いこなせておらず
近日記事アップします!

よかったらシェアしてね!

この記事を書いた人

【ブログの目標】
・各種ツールの、検索をしてもなかなかわからないつまづきの解消&メモ&共有
・ワーママという特殊な立場で有益な情報発信
・生活情報メモ&共有
・ネタに困ったら雑記ブログ

【どんなひと?】
2DCGツール→AfterEffects,Photoshop,Illusrator
だけでは、最近厳しいので、blender2.8習得したいです
blogツール→wordPress

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

コメント

コメントする

CAPTCHA


目次
閉じる