元CAバンビのずぼら日記

元国際線乗務員の情報発信ブログ。海外、旅行、料理、ワイン、美容のお話など。

長時間フライトの狭い機内でも快適に過ごす6つの方法
パッキングのコツと全て機内持込で済ませる裏ワザ
CAは出会いが少ない!?機内でCAに良く思われたい男性は必見!
この旅行最大のピンチ。元CA、なんと!「飛行機に乗り遅れる」の巻

「画像と説明が入っている四角い枠のリンク」〜はてなブログカスタマイズ?〜超初心者編〜(ブログカードの作り方)

こんにちは!ずぼらな元CA、バンビです!

今日でブログを開設してから4日目です。

f:id:zuboraca:20171227113117j:plain


昨日、初めて写真入りの記事らしい記事を書いてみて驚愕でした(@_@;)

皆様は記事を書くのにどのぐらい時間を掛けているのでしょうか?皆様こんなに苦労して書いてるのかしら?って。

少し前までFacebookをやっていたので、実はそのノリで「ブログなんて余裕っしょ!」って思ってたのに、ただ写真を挿入したり、リンクを挿入したりするだけでも思いの外時間が掛かってしまい、昨日はたった1つの記事作るのに一日仕事になってしまいました。。。昭和生まれの私には無理なのか!とさえ思ってしまったわ。

私が手間取ってしまった理由は、ただ単純にやり方が分からないからって言うのと、皆様のブログを拝見してて、こんな風に「かっこよく」とか「おしゃれな」ブログにしたいって思ってしまったからです。

それで「こんな風にしたいな」って思ってgoogle先生で検索しようにも、ブログ業界?とは程遠いところにいたので、実際にどんな語句で検索して良いのかも不明で、一個のことをやるのに何時間もかかってしまった。

例えば、昨日はこんなのを入れてみたんだけど↓↓

 

これを一つ入れるのにも...

皆様がやっているような、こんな風な「画像と説明が入っている四角い枠」のおしゃれな(?)ヤツをどーーーーしても入れたくて「ブログ 画像入りリンク」とか「リンク 画像 説明」などの語句で検索するんだけど全然別のことが出てきちゃって。。。

 

 

 

ブログカードという名前なんだって分かるまでにだいぶ時間がかかってしまった次第です。

もちろん、このブログを読んでくださっている皆様におかれましてはそんなの、とっくの昔からご存知なんでしょうけど。しかも、はてなブログには親切にヘルプページがあって、結局そこを見ればやり方は載ってたんだけど。てか、実は普通に「見たまま編集」でURLコピペしても出てくるって言う。。。Google先生!「おしゃれな枠」を探し回ったあの数時間はなんだったのでしょうかっ!!!


ちなみに、親切な「はてなブログ」のブログカードのやり方については

こちら→→ ブログカード - はてなブログ ヘルプ

 

まだ全然「かっこいい」「おしゃれな」ブログからは程遠いんですけど、ちょっとずつカスタマイズ(って呼べるレベルじゃないけど、笑)して行き、その方法などを自分みたいに、こんな単純なレベルで困っている人がいたら共有したいな。と思います。(と言いつつ、自分も忘れちゃうかもしれないから、その時はまたココに戻ってきてやり方を見るため)

 

追記:
超初心者の方のために(自分もだけど...)私が習得した、はてなブログのカスタマイズ技術を?まとめにしています。
こちらの記事に紹介しているような基本的なことばっかりですが、ブログ初心者の方にはおすすめの内容です!

【超初心者でも分かる!】はてなブログのカスタマイズ〜まとめ〜

 

さらに追記:

【宣伝♪♪】

なんと!はてなブログのテーマを公開しました!!
はてなブログのテーマ「Palette(パレット)」は、初心者でもカスタマイズが簡単なテーマです!

はてなブログ テーマ「Palette(パレット)」について 


初心者の私でしたが、テーマのカスタマイズなどがうまく行かず「ええ〜い!面倒臭いから自分で作っちゃお!」と一念発起し、CSSなどを勉強し「はてなブログ」のテーマを公開するほどに成長しました(^-^)

自分がカスタマイズで苦労した経験から、初心者の方でもコピペで簡単にカスタマイズできるようなテーマにしています。
詳しくはテーマの説明ページ

はてなブログ テーマ「Palette(パレット)」について 

よりご覧ください。

はてなテーマストアからインストールできます♪♪
何気にいつもトップページに表示されている人気のテーマだったりします。

 

 

 

昨日得た技術一覧

 

忘れないうちに早くUPします!しかも、技術ってほどのものでは無いんですよね。(笑)

 

画像と説明が入っている四角い枠のリンク

(この記事)

 

 ブログに使えるおしゃれな画像をWEBから探す

(自分の写真じゃない場合)

 

自分の写真をブログに表示する(Flickrというサービスを使う場合)

https://www.flickr.com/

写真をたくさんストックできるサービス。登録は英語。
「はてなブログ」の編集画面サイドから[+]でFlickr貼り付けを追加すると、Flickrと連動して写真を使えるようになる。

blogs--1227

 

吹き出し付きの文字の入った画像をつくる

Collonという無料アプリを使って作りました。

「写真文字入れ・切り取りコラージュ 画像加工アプリ-コロン」をApp Storeで

Collage → テキスト → フキダシ
その他にもスタンプやフレームなどを入れられます♪

f:id:zuboraca:20171226113154j:plain

 

ブログの文字を真ん中に表示する、「中央寄せ」と言うのかな?

〜こんな風に〜

<p style="text-align:center;">ここに文字</p>
HTML編集で上記のようにstyleを設定します。

 

 

四角い枠(ブログカード)で表示された時に表示させたい画像を設定する

ブログカードに画像として表示されるのは「アイキャッチ画像」と言われるもので、そのブログの顔になる画像です。

編集画面の設定マーク(ネジ?)から「編集オプション」でアイキャッチ画像を設定できます。

f:id:zuboraca:20171227113117j:plain

 

 

 

ブログの中にグーグルマップやストリートビューを表示させる

簡単!ブログの中にグーグルマップを表示させる方法 

超簡単!ブログの中にGoogleストリートビューを表示させる方法 

 

ブログで投稿した写真を削除(はてなブログ 写真 整理)

マイフォト→フォルダ HatenaBlog →写真が表示されたらフォルダを編集