So-net無料ブログ作成
超可愛い 河村友歌さんとブログ構成パーツのご紹介(笑)

超可愛い 河村友歌さんとブログ構成パーツのご紹介(笑) [ブログ作成のコツ]

ふわふわブログを華やかにする方法:HTMLパーツ編(笑)


ISG106132539_TP_V.jpg

今回の改訂は・・・2018年現在の仕様には合致していない『ブログを作成する時に便利なパーツ編』!!

なので最初は削除しよっかなって思ったりもしたんだけど・・・

やっぱりこういうのって日記的な意味合いもあるので・・・

私的なプライベートブログなのでそのまま残しちゃおっと思うわけなのです!!

そんな感じで本記事を読んでくれた方に気を付けて欲しいのは・・・

下記の『メインタイトルヘッダー』と『サブヘッダー』は使用せずに、新記事の・・・

許可されていない属性が HTML タグ「span」にあります

に掲載した新しい『メインタイトルヘッダー』と『サブヘッダー』を使ってほしいって思うのです!!

こんな感じで注意を喚起しつつ・・・本文に行っちゃうのです!!







最初はこんなふわふわブログをどうやって華やかに見せようかって悩んでて・・・

とりあえずヘッダーやタイトルをつけたいなって思って、ネットを検索したんだけど適当なモノがなかったので・・・

無いなら作っちゃえ的な感じでヘッダーとタイトルは何とかなったんだけど・・・

最後まで悩んだのが記事のファーストインプレッションを決定するアイキャッチ!!

正直ね、自分達の写真を載せようと相談したんだけど私は写真が大っ嫌い!!

だってこんなTED体型のおっさん写真なんか汚いだけだし、誰も観たくないでしょ??

かと言って彼女も自分の写真は恥ずかしいって嫌がったしってな感じで散々悩んだ末に現在のフォーマットに落ち着いたのです!!

そんな情報でも公開すれば少しは皆さんの参考になるかな??

って思いを込めたちょいとマニアックな記事なのですっ(笑)

それで追加で・・・

私達のブログは基本的にすべて自由に使用して構わない!!

勿論、掲載した写真やパーツをコピーして使用しても良いし、アレンジだって、リンクしようが全然OK!!

でも私たちのモノではない・・・

お借りしてる河村さんたちなどのモデルさんたちの写真はきちんと”ぱくたそ”の規定通りに使用してもらうのが条件なのです!!

そんな感じで念押ししながら、本文へと行っちゃうのです!!

 



印象を決めるアイキャッチは重要だぞ!!


ではまずは最も重要なアイキャッチから!!

人間って最初の5秒で物事のほぼ全ての印象を決定してしまうイキモノなので、アイキャッチってスッゴク重要!!

ほら、CMを観るとわかるでしょ??

宣伝したいのは商品のはずなのに、何故か全編にわたって出てくるのは綺麗な女優さんやダンディな俳優さん、面白い芸人さん達ばかり!!

それって販売したい無機質な商品だけのCMを作っても視聴者の印象にはなかなか残りづらいってのがあるからなんだよね!!

まあ、中にはダイソンのように天邪鬼的に無機質な商品だけを持ってくることで逆にアピールしてる例もあるけど・・・

でもそのような逆説的なCMができるのも一般的にはその商品を象徴するイメージ戦略が沢山、行われてるからだよね!!

そんなみんなの印象に残ってる決定的なアイキャッチを使ってのイメージ戦略に成功した例がコカ・コーラ!!

元々、サンタさんって緑色のコスチュームだったんだけど、コカ・コーラがクリスマスに宣伝する為にサンタにコカ・コーラのテーマ色である赤色のコスチュームを着せたら、あっという間に世界中に広まっちゃった!!

そのようにイメージを決定づけるアイキャッチには、その製作者のコンセプトに基づいたイメージを使用するのが一般的!!

そんな私達のブログコンセプトに求めているイメージとは・・・

・微笑みたくなるような笑顔

・純粋な気持ち

・天真爛漫な陽気さ

・ちょいと天然・・・的な、明るいイメージ!!

なので有名なブロガーさんたちも自分達のコンセプトにあわせて可愛らしいネコや犬、飛行機や自動車、愛くるしい表情の子供などをトップに持ってくる人が多いんだよね!!

でも記事内容をきちんと表現してて、好印象を与えるアイキャッチってなかなか難しくて見つからないのが現状!!

そこでひらめいたのがアイキャッチに写真を持ってくること!!

でも自分達の写真ってなんだか使いづらいよね??

ましてや私の場合なんか、こんなTED体型のモフモフおっさんの写真なんか誰も見たくないし、自分だって絶対に嫌っ(笑)

って事で探してたどり着いたのが・・・”ぱくたそ”というサイトだったのです!!






”ぱくたそ”の河村友歌さんがスッゴク可愛いぞっ!!


ぱくたそ というサイトはフリー素材を網羅した写真サイトであり、そこに掲載されてる写真は著作権フリーでしかも面倒な登録もいらないって優れモノ!!

【ぱくたそURL】

https://www.pakutaso.com/

なのでちょいと行って、気に入った写真をデスクトップに落として、ソネットブログ新規作成画面のファイル項目からファイル追加ボタンをポチットすれば簡単にできちゃう!!

そんな私たちが気に入ってるモデルさんが大人気の河村友歌さんなのです!!

tsj86_cafedenojk20150208114118-thumb-autox1600-18229.jpg

ねっ、超可愛いのにスッゴク親しみやすい良い表情をしてるでしょ??

なので私達のブログ写真での女の子はほとんどが友歌さんの写真(笑)

彼女って非常に可愛らしくて天真爛漫な笑顔を見せてるのに、ちょいと小悪魔的な部分もあって非常に気に入ってるのです!!

なので彼女ってもっと有名になって企業CMにも採用されてもおかしくない逸材だって思う事もあったりして??

なので皆さんも気にいったら、どしどし河村友歌さんの写真を使ってもらいたいって思うのです・・・って、少しは私達の分も残しておいてね(笑)






タイトルとヘッダーのサンプル集!!


それでここからは技術的なタイトルとヘッダーの紹介!!

これらって前述したように全て自由に使用して構わないので好きなように使ってね!!

これも苦労した部分で初心者である私がHTML5のテキストを読みながら作り上げたモノなので正直、公開するのは恥ずかしい(笑)

でもまあ、皆さんの為になるのだったら日ごろの御礼を兼ねてって感じで晒しちゃうのです(笑)

そんな感じで作ったのがこのタイトル!!

【ブログタイトル(3行タイプ:ピンク+黒文字)】


タイトル
2行目
3行目


上記、タイトルをコピーして使用してもいいし、下記をコピーしてブログ作成画面の『HTML』ボタンから呼び出した『HTMLの編集』画面に直接、貼り付けしてもOKだぞ!!


<div style="background: #fedffb; padding: 10px; border-radius: 10px; border: 2px solid #cccccc; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa"><font size="6" color="#000000">タイトル<br>2行目<br>3行目</font></div></p><br /><br />


因みにヘッダーも同じ感じで使用できます!!

【ヘッダー(枠線アリ)】


ヘッダー本文




<br /><div style="background: #fedffb; padding: 10px; border-radius: 10px; border: 2px solid #cccccc; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa">ヘッダー本文</div><br />


一応、混同を防ぐためにヘッダーの背景色を #fedffb (ピンク色)に替えてるので注意してね!!






背景色を変えたい場合はコードを知ろう!!


それでやっぱり背景色が固定されたままって面白くないよね??

なので色をいれたいって思うんだけど、その場合はブラウザで定義されてるHTMLコードを変えてやればOK!!

なので上記ピンク色は・・・#fedffb

鮮烈な赤は・・・#ff0000 とか、ネイビーは・・・#000080 とかね!!

そんなコードの一覧は、ここ にあるので参考にしてね!! 






『</p>』と『<br />』・・・使いやすい改行ってどっち??


それで『<br />』の『br』 とはスペースの事でブランクって事で、そのbrの終了を意味する 小文字スペース+/ を付けたモノ!!

ソネットブログのデフォルトではEnterを押すと『<p>』 になるんだけど、それだとブログ作成画面で改行とスペースを入れたいのに本ブログにアップされると勝手に詰まっちゃうよね??

その対処法は全てを『<br />』にする事で記事作成画面で簡単にできるぞ!!

記事作成画面で保持した改行のまま、アップしたい場合は・・・

Enter+Shiftを同時に押せば『 <br />』に勝手に書き換わって、作成画面での改行が保持されたままアップされるのでオススメ!!

それで私達のように河村友歌さんの写真やYoutubeリンクを添付すると勝手に『<p>』が挿入されてしまう事があるので、その場合は『<p>』を消したり、『<br />』に書き換えるよりは文中にある『<p>』に『/』を付け加えて『</p>』にした方が早くて確実なので、これも覚えておいてね!!

それで私たちは必ずリンクをつけるので、後で書き換える手間が省けるようにとタイトルとヘッダーのHTML部分に『</p>』を入れてるのはご愛敬(笑)

追記で『<p>』 の『P』ってパラグラフ=段落の意味で、『/』は終了って意味なので、覚えておいてね!!






他に作成した没パーツたち(笑)


そんな感じでタイトルとヘッダーを添付してるんだけど、やっぱり教えてもらったままのブログパーツなんて、誰も使いたくないでしょ??

なのでここで参考までに没になったパーツを一気に紹介しちゃうのです(笑)

【その他のブログパーツ】

★タイトル(1行のみ)


タイトル


<br /><div style="background: #fedffb; padding: 10px; box-shadow: 5px 5px 5px #aaa" align="left"><font size="6" color="#000000">タイトル</font></div><p align="left"></p><br />



★記事ヘッダー(水色背景+黒文字)


ヘッダー




<br /><div style="background: #dffdfe; padding: 10px; box-shadow: 5px 5px 5px #aaa"><font size="4">ヘッダー</font></div><br />



★ヘッダー(ピンク背景:ランキング用)


ランキング




<div style="background: #ffe4ea; padding: 10px; box-shadow: 5px 5px 5px #aaa" align="center"><font size="6" color="#000000">ランキング</font></div><br />



★改良版ブログヘッダー


改良版ブログタイトル




<br /><div style="background: #fedffb; padding: 10px; border-radius: 10px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa"><font size="6" color="#000000">改良版ブログタイトル</font></div><p align="left"></p><br />



★改良版ランキングタイトル(オレンジ+黒文字)


改良版ランキングタイトル(オレンジ+黒文字)




<br /><div style="background: #ffdfd0; padding: 10px; border-radius: 10px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa" align="center"><font size="6" color="#000000">改良版ランキングタイトル(オレンジ+黒文字)</font></p></div><br />



★改良版ランキングタイトル(赤+白文字)


改良版ランキングタイトル(赤+白文字)




<br /><div style="background: #db0c0a; padding: 10px; border-radius: 10px; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa" align="center"><font size="6" color="#ffffff">改良版ランキングタイトル(赤+白文字)</font></div><br />



まあ、こんな感じでアレンジしてくださいなって事なのです!!





【パソコン関連】

おすすめのタブレットって・・・なぁーんだろね??

WIN10でMS WordやExcelが読み込めなくなった時の一つの解決法

余ったパソコン部品をプレゼントしちゃうぞっ

自作のススメ 組み立て完成編

自作PCのススメ 紹介編

【ブログパーツ】

Youtube動画をソネットブログに貼り付ける方法

許可されていない属性が HTML タグ「span」にあります

超可愛い 河村友歌さんとブログ構成パーツのご紹介

【この本がすごい】

華の下にて・・・追悼、内田康夫さんを偲んで

内田康夫『津和野殺人事件』が凄い

三菱王国 巨人岩崎弥太郎 インプレレビュー

翔んで埼玉・・・超過激に大暴走のインプレレビュー

『星を継ぐもの』インプレレビュー

貿易辞典レビュー:海外旅行に行くと人が商品となる、そんな貿易の面倒くさい話

Tーfal(ティファール)クリプソ インプレ

【このマニュアルがすごい】

海外旅行に行くと人が商品となる!!そんな貿易の面倒くさい話

Tーfal(ティファール)クリプソ インプレ :男性でも簡単に美味しい牛肉の赤ワイン煮が作れちゃう夢の調理器

【外国の方と幸せになる方法】

日本に来られた外国人の方と幸せになる方法、その③

日本に来られた外国人の方と幸せになる方法、その②

日本に来られた外国人の方と幸せになる方法、その①






こうして並べてみるとどんどんステップアップして行ったのがわかりますなぁ~(笑)

という感じで・・今回の改訂はこれでおしまい!!

あくまでも上記、タイトル群はAMPエラーが出る仕様・・・

実は出ないのもあるけど・・・

でも冒頭で言ったようにあくまでも記念って感じで残してるだけなので・・・

ブログパーツは新記事のモノを絶対に使用してね・・・って再度、念押ししちゃうのです!!

そんな感じで・・・みなさん、ごきげんよーってな事なのです!!





Pyonko & MU From Tokyoでしたぁーっ!!

 

タグ:ブログ
nice!(13)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 13

コメント 0

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0