• Topページのタブ(新着記事及び各カテゴリー)から最新8記事が閲覧できます(過去記事はブログ全記事または、カテゴリーからご覧ください)
  • [広告](補足

【WordPress】クラシックエディターでSNSアイコンやFeedlyバナー等を表示するHTMLの書き方 [IT備忘録]

IT・ブログ関連

こんにちは。ふわりです♪
IT備忘録「WordPress」編。クラシックエディターでプラグインやテーマの設定を利用せず、SNSアイコンやFeedlyバナー等を表示するHTMLの書き方です。
1. Twitter、2. Instagram、3. お問い合わせフォーム、4. Feedlyでフォロー、5. にほんブログ村でフォロー」のアイコンやバナーを盛り込み、プロフィールを作成しました。

プロフィールの設定箇所

  1. Twitter
  2. Instagram
  3. お問い合わせフォーム
  4. Feedly
  5. にほんブログ村
  6. リンク(写真カテゴリー)
  7. リンク(ナチュラルライフカテゴリー)
  8. リンク(プロフィール)
  9. 画像とリンク(プロフィール)

設定箇所①~⑤について次項から書きます。ご参考まで、⑥~⑨も後半にざっくり解説しますね。

1. Twitter

(1) アイコンをダウンロード

  1. Twitter社 公式サイト「ブランドツールキット」ページにアクセス。
    素材を入手する:Twitterロゴの「ダウンロード」をクリック

  2. 保存したzipファイルを解凍
    ダウンロードしたバージョン:twitter-logo01282021.zip

  3. 2つのフォルダ「1.ロゴフォルダ(Twitter logo)、2.アイコンフォルダ(Twitter social icons)」あり。今回はブログに掲載するためアイコンフォルダ(Twitter social icons)を開く

  4. ①デザインは3種類(枠が丸・四角・角丸)、②色は2色(ブルーとブラック)、③ファイルの種類は5種類(AI、EPS、PNG、PSD、SVG)あり。
    ※ 規定によりブログやサイトでソーシャルリンクとして使うときはブルーを使用

    Twitter-icon-circle-blueこのパターンのロゴ(アイコン)を使いたいので、「Twitter social icons – circle」フォルダを開き、「Twitter social icons – circle – blue.png」を保存(サイズ:400×400px)

    ファイルの中身

(2) アイコンをリサイズしメディアにアップロード

  1. 規定によるとソーシャルリンクとして使う場合は「32px以上必要」とのこと。そのままでも良かったけれど、ダウンロードしたファイルサイズ「400×400px」を「100×100px」にサイズダウン ※ 表示は32×32px にする
  2. メディアにファイルをアップロード
  3. アップロード後のURLをコピー

(3) 自分のアカウントURLをコピー

Twitterにログイン、プロフィールをクリック後アドレスバーに表示されたURLをコピー。

2. Instagram

(1) ロゴ(アイコン)をダウンロード

  1. Instagramブランドリソースサイト」にアクセス。
    ロゴパックの適用されるガイドラインおよび他の利用規約を読みこれらに同意後、「ダウンロード」をクリック

  2. 保存したzipファイルを解凍し、「Instagram Logo Pack」フォルダを開く
    ダウンロードしたバージョン:IG_brand_asset_pack_2022.zip

  3. 3つのフォルダの中から「01 Gradient Glyph」フォルダを開き、「Instagram_Glyph_Gradient.png」を保存

(2) アイコンをリサイズしメディアにアップロード

  1. 規定によると「29px以上必要」とのこと。ダウンロードしたファイルサイズ「4168×4168px」を「100×100px」にサイズダウン ※ 表示は32×32px にする
  2. メディアにファイルをアップロード
  3. アップロード後のURLをコピー

(3) 自分のアカウントURLをコピー

Instagramにログイン、プロフィールをクリック後アドレスバーに表示されたURLをコピー。

3. お問い合わせフォーム

(1) アイコンをダウンロード

アイコンはお好みのものでOKです。私は無料イラスト/フリー素材の「イラストAC」を利用してアイコンをダウンロードしました。

  1. 「イラストAC」へアクセス。
    ログイン後、メールアイコンを検索しダウンロード

(2) アイコンをリサイズしメディアにアップロード

  1. ダウンロードしたファイルサイズ「1600×1600px」を「100×100px」にサイズダウン ※ 表示は32×32px にする

  2. メディアにファイルをアップロード
  3. アップロード後のURLをコピー

(3) お問い合わせフォームのURLをコピー

お問い合わせフォームのURLをコピー
https://fuwary.blog/contact/

4. Feedly

ボタンのデザイン選択~HTMLコードスニペットのコピー

  1. Feedly公式サイト:ボタン作成ページ」にアクセス

  2. 設置したいボタンのデザインをクリック
    ※ 上段左から2番目の「縁あり・文字入り・サイズ(71×28px)」にした

  3. 入力フィールドに、自分のブログのフィードURLを入力(*1)

  4. 上記 “2” を入力後、Step3に表示されたHTMLコードスニペットをコピー

*1 自分のブログのフィードURL確認

  1. Webページ上で右クリックし、「ページのソースを表示」をクリック

  2. 検索ショートカットキー「Ctrl + F」で検索窓を表示し、「rss+xml」の文字列を入力し検索
    ふわりログのフィードと、ふわりログのコメントフィードの2か所ヒット。 ふわりログのフィード(https://fuwary.blog/feed/)がフィードURL

5. にほんブログ村

バナーのデザイン選択~HTMLソースのコピー

  1. にほんブログ村 > マイページ」にアクセス

  2. ランキング参加 > 「フォローバナー(読者向け)」をクリック

  3. ブログリーダー・フォローバナー(読者向け)ページが開く。
    設置したいバナーを選択(一番下のバナー:160×36px にした)。その右横にある「タグをコピー」をクリックし、表示されたHTMLソースをコピー

プロフィールを作成

「①Twitter、②Instagram、③お問い合わせフォーム、④Feedly、⑤にほんブログ村」でコピーしたURL / HTMLソースと、⑥~⑨のリンクしたいURLを盛り込みプロフィールを作成した。

完成したイメージとHTMLソース

ざっくり解説

1. Twitter

  • 画像サイズを「32×32px」にするため「width=”32″ height=”32″」を指定
  • <img>タグに “alt”、<a>タグに”title” 指定

2. Instagram

  • 画像サイズを「32×32px」にするため「width=”32″ height=”32″」を指定
  • <img>タグに “alt”、<a>タグに”title” 指定

3. お問い合わせフォーム

  • 画像サイズを「32×32px」にするため「width=”32″ height=”32″」を指定
  • <img>タグに “alt”、<a>タグに”title” 指定

4. Feedly

  • <a>タグに”title” 指定 ※ <img>タグはもともとあり

5. にほんブログ村

  • <a>タグに”title” 指定 ※ <img>タグはもともとあり

6. リンク(写真カテゴリー)

  • 写真カテゴリーへリンク

7. リンク(ナチュラルライフカテゴリー)

  • ナチュラルライフカテゴリーへリンク

8. リンク(プロフィール)

  • 詳しいプロフィールページへリンク

9. 画像とリンク(プロフィール)

  • プロフィール画像:画像サイズを「100×100px」にするため「width=”100″ height=”100″」を指定
  • 画像から詳しいプロフィールページへリンク

その他補足3つ

  • プロフィールの外枠を表示(well:テーマの設定)、文字色:#444、文字サイズ:14px
  • pタグの中央寄せ(align1:テーマの設定)、pタグ下の余白:0px
  • pタグ下の余白:10px、行間:1.8

余談:一から作ろうと思った理由

avatar

今どきこんな面倒くさいことをやってる人がいるの?

って、思いますよね(^^; 
プラグインを入れればSNSアイコンを簡単に設置できます。また使用するテーマによっては同様にできます。私が使用しているテーマもプロフィール作成用に用意されているのですが、「プロフィール画像はもう少し小さくしたいな。文字はもっと入力したいな。他のアイコンも表示したいな。」と思い、一から作ることにしました(^^) 一から作るといっても大したことはしていませんが、意外とこまごまとした設定でしたので、今後別のブログで同じような設定をするときに楽に書けるようにまとめました。もし万が一どなたか同じような方がいらっしゃいましたら少しでも参考になれば嬉しいです(^^)

さいごに

ちなみにブロックエディターを使えば「ソーシャルアイコンブロック」で簡単に設置できることも最近知りました。新しいエディターは時代に合わせてどんどん新しい機能も取り入れてくれるというメリットがあり良いですね♪と言いつつ、私は2017年からクラシックエディターを使用してきたため、なかなかブロックエディターへ移行しようと思えずにおります(^^; 「移行しよう!」と思う日まで、チマチマ楽しくテキストモードで書き続けたいと思います。
では、また~(^^)/

↑ いつかPHPも勉強したい☆ 画面が真っ白になっても慌てないように(^^;

関連記事

ブログ作成環境

ふわり

ふわり

お花大好きふわりです♪ SONY 7IIで撮ったお花や自然の写真、ナチュラルライフ、ガーデニング、国内旅行etc... についてつづります(^^)

関連記事

ピックアップ記事

カテゴリー

週間ランキングTop10

  1. 1

    Microsoft Wordで文章を入力中に文字が少し下がる時の解決方法 [IT備忘録]

  2. 2

    手作り化粧水:グリセリンと水だけで作れます♪【ナチュラルライフ】

  3. 3

    手作りのクエン酸柔軟剤で合成香料の不快感とさようなら♪ 【ナチュラルライフ】

  4. 4

    モンステラの挿し木と茎伏せに初挑戦(1) モンステラのカットから植え付けまで [2021年9月]【栽培記録】

  5. 5

    【カメラバックパック探し】一泊二日撮影旅行用 オールシーズン快適に背負えるものはあるかしら?

  6. 6

    白色ワセリンとエッセンシャルオイル(精油)で作るハンドクリーム

  7. 7

    【栽培記録】レウイシア:初めての2番花と下葉むしり & 花がら摘みの手入れ風景(2021年6月~7月)

  8. 8

    【CyberLink】すんなりアカウントを削除できなかった原因と2つの解決方法、アカウント削除手順 [IT備忘録]

  9. 9

    予算5万円で缶コーヒーより軽い高級コンデジを発見!Canon PowerShot G9 X MarkII

  10. 10

    シンセサイザーの音をポータブルスピーカーで鳴らす方法(初心者向け)

最近の記事 Natural Life モンステラ
  1. キーコーヒー 京都イノダコーヒ 有機珈琲 古都の味わいブレンド【ナチュラルフード】【レビュー】

  2. 【お散歩写真】春の本牧山頂公園2. 小さな草花 [2024年4月](神奈川県横浜市)

  3. 【エバーフレッシュ】2024年春の栽培記録と剪定

  4. 【築古賃貸住宅メンテナンス】室内編:備え付けの天井照明の直管スタータ形蛍光灯とグロー球を初めて交換した話

  5. 【お散歩写真】生田緑地ばら苑で撮影したバラの写真18枚(神奈川県川崎市)[2015年10月]

  6. 【お散歩写真】春の本牧山頂公園1. タンポポの綿毛♪[2024年4月](神奈川県横浜市)

  7. 【レビュー】SOLSHADE one 晴雨兼用の折りたたみ日傘:遮光率 & UVカット率100% / 10本骨の頼りになる1本

  8. 多摩川浅間神社の見晴台から見た富士山と夕景(東京都大田区)【作例】SONY NEX-5N + SAL100M28(2013年11月)

  9. 【お散歩写真】緑道で咲いていた麗しき藤の花 [2014年~2016年]

  10. 【横浜公園】2. ピンク色以外のチューリップの写真19枚(神奈川県横浜市)[2024年4月]

  1. 粉石けんと精油で作る食器用洗剤【ナチュラルライフ】

  2. 手作りの炭酸入浴剤でゆっくり疲れを癒やしませんか?【ナチュラルライフ】

  3. アルカリ電解水クリーナー(激落ちくん)でレンジフード掃除が楽にキレイに♪【ナチュラルライフ】

  4. インセントのアロマシャワーは安全な芳香消臭アロマスプレー【ナチュラルライフ】

  5. 白色ワセリンとエッセンシャルオイル(精油)で作るハンドクリーム

  6. 手作りのクエン酸柔軟剤で合成香料の不快感とさようなら♪ 【ナチュラルライフ】

  7. 12年間で使用してきたナチュラル洗濯洗剤7点 [2011年~2023年]【ナチュラルライフ】

  8. 合成洗剤からナチュラル洗濯洗剤への移行案をタイプ別に7つご紹介【ナチュラルライフ】

  9. 【レビュー】ナチュラグラッセ メイクアップクリームN:つややかで肌が楽なUVカット下地クリーム

  10. 手作り化粧水:グリセリンと水だけで作れます♪【ナチュラルライフ】

  1. モンステラの挿し木と茎伏せに初挑戦(8) 約7カ月半後に行った親株の植え替え [2022年5月]【栽培記録】

  2. モンステラの挿し木と茎伏せに初挑戦(7) 約7カ月半後に行った挿し木と茎伏せの鉢上げ [2022年5月]【栽培記録】

  3. モンステラの挿し木と茎伏せに初挑戦(6) 67日目~植え替え直前の212日目までの栽培記録:親株と茎伏せ編 (2021年11月~2022年4月)

  4. モンステラの挿し木と茎伏せに初挑戦(5) 67日目~植え替え直前の212日目までの栽培記録:挿し木編 (2021年11月~2022年4月)

  5. モンステラの挿し木と茎伏せに初挑戦(4) 2か月間の栽培記録:親株編(2021年9月~11月)

  6. モンステラの挿し木と茎伏せに初挑戦(3) 植え付け後2か月間の栽培記録:茎伏せ編 (2021年9月~11月)

  7. モンステラの挿し木と茎伏せに初挑戦(2) 植え付け後2か月間の栽培記録:挿し木編 (2021年9月~11月)

  8. モンステラの挿し木と茎伏せに初挑戦(1) モンステラのカットから植え付けまで [2021年9月]【栽培記録】

楽天トラベルのバナー

ブログ作成環境

TOP