にーさんのウルトラブログ

明るく元気にイキイキ働く!

なぞなぞ7000問♪
日本最大級のなぞなぞサイト【なぞQ】の作者です(^O^)
https://nazoq.com

★iOSアプリ/LINEスタンプも作ってます★
https://nazoq.com/apps-stickers.html
 ↑作品一覧

タグ:小見出し

ブログネタ
livedoor Blogを使いこなす設定・活用術教えて! に参加中!
僕のlivedoor Blogの便利ワザを紹介します!
それは、
『小見出し5個+αを定型文に登録する』
です!
論より実物、
はい、ドン。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

皆様こんにちは、【にーさんのウルトラブログ】にーさんです。

見出し1


見出し2


見出し3


見出し4


見出し5


ではここで一句。

「」

ありがとうございます。


↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

これを「ポチ」「ポチ」の2クリックで作れます。

小見出し5個だけでもいいのですが、僕は書き出しと締めを上記のように決めているので、それもセットにしちゃいました。

かんたん2ステップでできちゃいます。
さあご覧あれ!



やり方1 定型文を作る

今回は僕と同じ小見出しで我慢して下さい。

↓これをまるまるコピーしましょう。

皆様こんにちは、◯◯です。

<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>見出し1</b></div>




<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>見出し2</b></div>




<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>見出し3</b></div>




<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>見出し4</b></div>




<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>見出し5</b></div>



最後までご覧いただき、ありがとうございます。
 
↑ここまで





やり方2 定型文を登録する
blog_step5_teikeibun
ほい。



blog_step6_sakusei

ほい。
上でコピーした定型文を貼り付け。

おわり!

かーんたーん!!!




定型文を使ってみよう!

blog_step1
ほい。

blog_step2
ほい選択。



blog_step3

じゃーん!!!


色を変えてみよう

え?僕と同じ緑じゃいや?


<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>見出し2</b></div>

ボーダーの色を変えるなら border-color: #00c019を変更。
背景色を変えるならbackground: #F8F8F8を変更。

例えば、これは黒
<div style="padding: 10px 10px; border-color: #000000; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>_black_</b></div>

これは赤。
<div style="padding: 10px 10px; border-color: #ff0000; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>_red_</b></div>

するとこんな感じに。

_black_
_red_


色の
#xxxxxx部分について
細かい好みの色のコードが知りたいときにはコチラのサイトが色を見てコードが分かりますので便利です。

こんな感じでずら〜っと色が並んでるので好みの色のコードが簡単に見つけられます!

(追記)すいません、上の"コチラ"がリンク切れになっていたので別サイト紹介しておきます。

カラーコード (Color Code) 作成ツール

http://myisland.jp/service/colorcode.html


ぜひお試しくださいませ。
そのほか、文字をさらに大きくしたりなど微修正も可能です。詳しくは下記
参考▶23_ライブドアブログの本文中に小見出し(文中の目次というか小タイトルというか区切りが分かりやすいアレ)をつける



<スポンサードリンク>





おわりとおまけ


定型文はかなり便利だなと感じました。
僕はアプリ開発をしているので、ブログでもなるべくアプリを紹介したいのですが、その紹介文も定型文にしています。
コチラ(最近LINEクリエイターズスタンプも作成したので、それも合わせました)。
↓↓↓↓↓↓

おなじみ、僕のアプリ一覧へのURLはこちらです。
http://appstore.com/kikuchikun
便利ツールアプリやおもしろあいづちアプリ、
「一人でもくもくとやるのでなく子供から大人まで遊べる!みんなで盛り上がれる!」をモットーとしたゲームアプリなんかを個人で開発しております。
ぜひダウンロードお願い致します。
間もなく新作リリースされます。
こんな感じ!
iTunesArtwork

お楽しみに!

LINEスタンプは現在5個申請ずみ、リリースはまだゼロ!ゼロ!ゼログラビティ!
23_LINEクリエイターズマーケットにスタンプ申請完了〜イラスト作成未経験での作成から申請完了まで(LINE Creators Market))
リリースが恋しい!!!

↑↑↑↑↑↑↑↑↑↑
ここまで。
うーん、便利。
ぜひダウンロードお願い致します!



ではここで一句。

「定型と 業務提携 いと便利」

ありがとうございます。


||Amazonタイムセール開始!掘り出し物がきっと見つかる!!!||

↑これも定型文\(^o^)/


↑ブログテクニック満載!!!
僕も買いました。 (キンドル版)
必ず結果がでるブログ運営テクニック100 プロ・ブロガーが教える"俺メディア"の極意 [Kindle版]
 

皆様こんにちは、【にーさんのウルトラブログ】にーさんです。



ブログ始めたら見栄えが大事ですよね。
羨ましいなと思っていたんです。

小見出しが。

皆様はすでにご存知ですよね。
小見出し。

ブログといえば小見出し。



そう、これですよこれ。





・・・。

節子!これ小見出しちゃう!ほんだしや!



さて、

これが!小見出しだ! 


話の区切りつけたり見た目スッキリさせるのにとても役立つじゃないですか。


調べたらHTMLタグ編集にして
このコード貼り付ければいいらしい!

<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>_小見出し緑_ </b></div> 

ペタ
_小見出し緑_


うむ!
(2014/10/9追記)定型文登録がさらに捗る)!!!
23_livedoor Blogを便利に!小見出し5個+αを定型文に登録



色を変えるには
border-color: #00c019

#xxxxxx
を変更するらしい。

#000000 黒
#ff0000赤

_小見出し黒_
_小見出し赤_

こんな感じ。

とりあえずエバーノートに

<div style="padding: 10px 10px; border-color: #00c019; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>_小見出し緑_ </b></div>

<div style="padding: 10px 10px; border-color: #000000; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>_小見出し黒_ </b></div>

<div style="padding: 10px 10px; border-color: #ff0000; border-width: 0 0 1px 7px; border-style: solid; background: #F8F8F8;"><b>_小見出し赤_ </b></div>


これだけ保存しておきました。
パッと入力する方法は近日中に考えます。

小見出しの文字を大きくするなら
<span style="font-size:large;"><div style="padding:10px 10px;border-color:#000000;border-width:0 0 1px 7px;border-style:solid;background:#F8F8F8;"><b>サンプル</b></div></span> 
これだと、

サンプル
うん、大きい。


色の
#xxxxxx部分について
こんな感じでずら〜っと色が並んでるので好みの色のコードが簡単に見つけられます!

(追記)すいません、上の勧めたページがリンク切れになっていたので別サイト紹介しておきます。

カラーコード (Color Code) 作成ツール

http://myisland.jp/service/colorcode.html



ぜひお試しくださいませ。





ではここで一句。



「見栄え良く しかも簡単 小見出しや」

にーさんのアプリ/LINEスタンプをちら見してみる↓
23_banner_600


【参考にしたサイト】
ブログ記事へ小見出しをつける方法
ライブドアブログに小見出しを表示させる - 今日もボクはいい加減
ありがとうございます! 






 




ブログを始めたということで、早速ブログのトップに画像を挿入してみました。
(もう表示されていると思います ※PCサイトのみ!)

やり方は、



デザイン設定画面の
タイトル/背景タブ
で画像をアップロードして






表示させたい範囲を選択して決定。
完了。

う〜む、すこぶるカンタンですね。
素晴らしい。


ただ、このままだと、ただ画像がでで~んと表示されてでっかい飾りができただけです。



どうせなら自分が希望するリンク先やブログトップなどにリンクしたいですよね。
でもその設定はこのページには無い。
で、

いくつか参考サイトを見て、結果的に下記修正のみでできました! 




デザイン設定>カスタマイズ>トップページ
中を見ていくと
<div id="header-image">
てな記述があり、
おお、ヘッダーのイメージっぽいぞ!
と思いました。

で、
そこの

<div id="header-image">
<IfBlogHeaderImageUrl>
<img src="<$BlogHeaderImageUrl$>" id="blog-header-image" />
</IfBlogHeaderImageUrl>
</div>


これを、文字にリンクつけるみたいに
<A Href="_飛ばしたいURL_" Target="_blank">_表示させたい文字とか場所_</A>
これで挟んで
<div id="header-image">
<A Href="http://itunes.apple.com/jp/app/3.00-friend-tap-just-3.00/id817224527?mt=8" Target="_blank">
<IfBlogHeaderImageUrl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image" /></IfBlogHeaderImageUrl>
</A>
</div>
 
こうしてあげたわけです。勘で。
そしたらできました〜。

で、
この 作業をほかの個別ページとかほかのところにも同じ修正したら、どこからでもこのトップ画像をクリックすれば希望のリンク先に遷移することができましたー!

お試しあれ! 

↑このページのトップヘ