 |
記事にタイトルをつけよう |
「記事にタイトル？」って思われる方もいらっしゃると思いますが、このトップイメージにある「水分補給」の左側にあるピンク色の蔦のアイコンのことです☆
通常の見出しでも記事を項目ごとにわけて記載するのは十分ですが、やっぱりキレイにしておきたい！ってときに使える小技をアップしていきますね☆
|
１．ログイン |
まずは「はてなブログ」の管理画面にログインします。
※他サイトの管理をしてるので、必要のない部分は消してあります。
|
２．カスタマイズをするブログの管理画面を表示 |
画像左下の「デザイン」をクリックします。
|
３．表示させたい画像をアップ |
普段ブログを書いて画像をアップするのと同じ要領で、画像フォルダに表示させたい画像をアップしておきます。
次に画像をブログ記事欄に貼りつけて、画面上側にある「ｈｔｍｌ」をクリックすると画像のURLが表示されます。
このURLは後ほど使いますので、テキストファイルやメモにコピペしておきましょう。
|
４．カスタマイズする場所の指定 |
画像左中央にある「カスタマイズ」という青色のボタンをクリックして表示を切り替えます。
|
５．デザインCSSの編集 |
画像左下の「デザインCSS」をクリックして、CSSの末尾に下記のCSSを追記しましょう。
/* タイトルに画像を追加 */
h3 {
background: url(ここに表示したい画像のＵＲＬを記入) no-repeat left center;
padding-left: 35px;
}
３．でコピペした表示させたい画像のURLを（ここに表示〜URLを記入）にコピペします。
これはホントにコピペだけでOKなので、楽チンで見やすくなるカスタム方法です。
また、CSSの編集をするときは「}」の貼り付け忘れがないように気をつけてくださいね☆
出来上がりは、このページ上部に表示の画像のようなカンジになります。
また、実際に実装したブログはコチラでチェックしてみてください☆
|
６．アメブロにも使える！？ |
アメブロでの実装については、他のカスタムでプラグインを使っていて（プラグインに文字数制限があって、いっぱいなんです）確認をしてないのですが・・・試しに「はてなブログ」でアップした「記事にタイトルをつける」の部分をコピーしてアメブロの記事に貼りつけてみたところ・・・
フツーに出来ちゃった☆
アメブロは、「アメブロでアップされた画像以外は記事内に表示できない仕様」のハズなんですが・・・
はてなブログとアメーバブログの両方をお持ちの方は、一度トライしてみてくださいませ☆
ただ、アメブロの利用規約的に問題が生じるかもしれませんので、そこはご自身の自己責任でお願います☆
|
ココはチェックしてくださいね☆ |
実装にトライされる前にチェックしておいてくださいね〜☆
・カスタムの実装はご自身の責任でお願いします。
（私もプロじゃないのでアフターが出来るときと出来ないときがあるので）
・運営者側（アメブロ）の規格変更で表示されないことも・・・
（そうなった場合は、ブログを通じてお知らせします。）
・はてなブログ、アメブロでは実装確認済みです！
（もしかしたら、他のブログサービスでも実装できるかも！？）
・残念ながらスマホでは表示されないんです。。。
（PCで閲覧、スマホで表示をPC版に変更した場合のみ使えるメニューです。）
・実装できたら教えてください！
（当サイトでご紹介させていただきたいので、お知らせいただけると担当者が喜びます☆）
|
このページの関連記事 |
 |
 | |
| 2014/09/10 「アメブロ フッターメニュー」 | ||
| 先日アップしたフッタメニューのアメブロ版っ☆ | ||
 |
| |
| 2014/08/31 「はてなブログ フッターメニュー」 | ||
| 誰でも簡単に「出来る人」に変身ですっ☆ | ||
 |
| |
| 2014/08/23 「はてなブログ幅を広げる☆」 | ||
| 人との差が出る！アップです♪ | ||
