マエタビ-人生マジメにズル休み!-

20代なぼくの暇つぶしから笑いを作れるような記事を配信しています。

MENU

30分ではてブに顔写真付きプロフをHTML追加する方法!

記事を書いた人:Dachimae あとで読む

だちまえです♪

最近ブログのデザイン変更しまくりです☆

 

簡単にまとめるだけでも、こんなにも♪

  • スマホ版のアクティブメニューの追加
  • PC版の画面整理
  • ヘッダー、アイコン等の編集と追加

 

色々コンサル受けながらやるべきことを学び、「やることいっぱいじゃー!」って脳内パーン行きそうでした(笑)

そんななか、自分でも「よくやった」と思った作業があったので、書いてみることに♪

 

それが、今回説明する「30分ではてブに写真付きプロフィールを添付する方法」です!

(^_^)/□☆□\(^_^)

 

自作ですが、中々の出来でかつ、HTMLの勉強にもなったので、今回なるべく詳細に説明します♪

 

 

○掲載イメージ

まず、実際に貼り付けたときのイメージからどうぞ♪

 

PC版

f:id:dashchan8318:20160909193111j:image

 

スマホ

f:id:dashchan8318:20160909193246j:image

 

こんな感じです♪

これ貼り付けたとき、本当にプロ意識でやらないとまずいなって思い知らされたほどですから(^^;

 

ちなみにこれ、日本一のバンジー、竜神大吊橋バンジーって言う、100mの高さから飛び降りたときの写真(笑)

胸元についてるのは命綱♪

100m飛んだ後によく笑顔作れたよなーって自分でも思う(大笑)

 

○準備するもの

  • プロフィール用写真(正方形に編集したものが望ましい)
  • PC(HTML編集が出来ればOK。無かったらネットカフェへGO!

後はプロフィールをどんな形にするかですが、僕は「読者になる」ボタンツイッターのフォローする」ボタンが欲しかったので、今回はその前提で話を進めます♪

 

また、画像のサイズ・編集についてはスマホなどであれば備え付けの編集アプリがあるので、そちらで編集をお願い致します。(そのまま使ってもOKだけど、正方形じゃないとサイズ感が狂う)

今回の方法では画像サイズを問わずでサイズ編集が可能なので、正方形であれば一旦次に進みましょう☆

 

○始めにすること

撮影した画像は全部PCにコピーしてください!

作業は全てPCで行います♪

 

○作業開始

やる行程は全部で四つ。

  1. はてなフォトライフで画像のHTMLを取得。
  2. 「読者になる」ボタンのHTMLの取得。
  3. ツイッターのフォローする」ボタンを取得。
  4. HTML欄にまとめる。

 

1、はてなフォトライフで画像のHTMLを取得

1、はてなフォトライフへアクセスする。

f:id:dashchan8318:20160909195854j:image

 

2、上のバーの「アップロード」を押し、下のページへ。ここでアップロードする画像データとタイトルを決める(タイトルは整理用なので何でもOK)。

f:id:dashchan8318:20160909195919j:image

 

3、入れるファイルを決めたら、そこのファイル名を覚えておく。その後、フォルダを編集と言う場所に移動するので、指定の画像をクリックするとアイコンが緑色になるので、その後、画面中央の「ブログに貼り付ける」を押す。

f:id:dashchan8318:20160909200733j:image

 

 4、上の画像の黒字で消した場所に必要なHTMLがあるので、コピって一旦PCのメモか何かに貼る。

画像のHTMLは下記のような状態となっており、「画像クリックしたらリンクここですよ」とか、「ここに元のデータありますよ」とか書いてあり、<a href="○○">の部分がそのリンクなので、そこを一旦トップページなどの指定アドレスに書き換える。(もしトップページ以外の指定したいアドレスが無い場合は、後日好きなアドレスにしてね♪)

<a href="○○"><img src="" alt=""></a>

 

2、「読者になる」ボタンのHTMLを取得

ここは簡単。

はてなブログの「設定」、「詳細設定」の下の方に、「読者になる」ボタンのHTMLがあるので取得です♪

取得したら、先程の画像のHTMLの下辺りに追加してください☆

f:id:dashchan8318:20160909201802j:image

f:id:dashchan8318:20160909201817j:image

 

3、「ツイッターのフォローする」ボタンを取得

 ちょっとやっかい。

 1、「ツイッター HTML コード作成」で検索。

f:id:dashchan8318:20160909202507j:image

 

2、「Twitterボタン about」を クリック。

f:id:dashchan8318:20160909202645j:image

 

3、「リンクを共有する」を選択。

f:id:dashchan8318:20160909202748j:image

 

4、Twitterにログインしているなら、ユーザーの「@○○」部分に自分のアドレスが自動入力されています。

なので、この画面中央右側にあるHTMLをコピーし、上記二つHTMLを貼った場所に貼り付け。

f:id:dashchan8318:20160909202955j:image

 

4、HTML欄にまとめる

 あと少しです♪

・PC向け

1、はてなブログのデザインより、工具マーク(カスタマイズ)のところから、

f:id:dashchan8318:20160909204130j:image

 

2、サイドバーから、
f:id:dashchan8318:20160909204156j:image

 

3、「モジュールを追加」を選択し、

f:id:dashchan8318:20160909204220j:image

 

4、HTMLの項を選択し、HTMLを貼り付ける♪

項目タイトルはためしに「プロフィール」で行きましょう☆

f:id:dashchan8318:20160909204255j:image

 

・PC用HTMLサンプル(コピペはしちゃダメ♪)

今回の文章はサンプルです♪

「自己紹介」のところは <p>、</p>含めてコピって自作でお願い致します☆

 

フォトライフのHTML」

「自己紹介文」

ツイッターのHTML」

「読者ボタンのHTML」

<a href="○○"><img src="" alt=""></a>
<p>どうも、○○です(^^♪</p>
<p>会社員、26歳。</p>
<p>すっきりさわやかな毎日を過ごせるよう、心の中は毎日遊んでおります!</p>
<p>すべては自分が理想像になるため(^◇^)</p>
<p>ゲームと自由な生き方、大好き♪</p>
<p>お問い合わせはツイッターのDMでお願いします☆</p>
<a href="○○" class="twitter-follow-button" data-show-count="false">Follow @○○</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="○○/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

 

スマホ向け

こちらはデザインのスマホマークから、今回はフッタを選択します。

このHTML欄にHTMLを追加します♪

f:id:dashchan8318:20160909204925j:image
 

スマホ用HTMLサンプル(コピペはしちゃダメ♪)

上記同様サンプルで、自己紹介部分も編集しないといけません。

上のPC用HTMLでも行けなくはないですが、画像をスクロールするくらい凄く画像が大きくする必要があります。

なので、こちらはスマホ用に画像を小さくし、うまく画像を中央へ持ってこれるように、HTMLを少々追加しています♪

画像を小さくしているHTMLは下記ツイッターのサイズ編集HTMLをいじって編集しているので、コピペするなら参考にしたツイッターのHTMLをコピりましょう。

(数値はコピってもそのまま使える数値にしてあります)

 

フォトライフのHTML」

「自己紹介文」

ツイッターのHTML」

「読者ボタンのHTML」

 追加した場所

・(scrolling="no" width="280" height="280"alt="○○"></a>の間に入れる

・<center>を<a href="○○">の前に、</center>を></a>の後に追加。

<center>
<a href="○○"><img src="○○" alt="○○"scrolling="no" width="280" height="280"></a></center>
<p>どうも、だちまえです(^^♪</p>
<p>会社員、26歳。</p>
<p>すっきりさわやかな毎日を過ごせるよう、心の中は毎日遊んでおります!</p>
<p>すべては自分が理想像になるため!</p>
<p>ゲームと自由な生き方、大好き♪</p>
<p>お問い合わせはツイッターのDMでお願いします☆</p>
<a href="○○" class="twitter-follow-button" data-show-count="false">Follow @○○</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="○○/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

 

○完成!

これでプロフィールの作成は完了です!

あとは編集後の状態をチェックし、ミスがないか確認するだけです(*^^*)

 

作業が少々ややこしくなるかもしれませんが、ここで諦めてはいけません!

出来上がった後には最高のブログが出来上がり、その出来映えに「すげぇ!」って思うことが出来るはず♪

実際、僕もその日の帰りはニヤニヤと自分のブログを眺めながら帰ったものです(笑)

 

今回はこんなところで(-_-)/~~~

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