はてなブログカスタマイズ　続きを読むデザイン設定方法|ブログ|ホームページ制作集客｜SEO対策｜株式会社サイバーアクセル・アドバイザーズ【東京・福岡】

BLOG CATEGORY

求人募集[48]
webコラム[224]
おもしろ[43]
スタッフ[84]
- 佐藤悦信[14]
- トゥクトゥク[19]
- ホビットいのうえ[31]
- ジャッキー[9]
- YUKO[7]
- AI★[6]
- Tom
- ATSU
- NAO★
- chiii
- ☆HARUE☆
- KUMIKO

Monthly Archives

2018年
- 2018年6月 [4]
- 2018年5月 [6]
- 2018年4月 [8]
- 2018年3月 [9]
- 2018年2月 [8]
- 2018年1月 [8]
2017年
- 2017年12月 [9]
- 2017年11月 [8]
- 2017年10月 [7]
- 2017年9月 [10]
- 2017年8月 [9]
- 2017年7月 [8]
- 2017年6月 [10]
- 2017年5月 [7]
- 2017年4月 [7]
- 2017年3月 [11]
- 2017年2月 [8]
- 2017年1月 [8]
2016年
- 2016年12月 [9]
- 2016年11月 [11]
- 2016年10月 [10]
- 2016年9月 [12]
- 2016年8月 [10]
- 2016年7月 [9]
- 2016年6月 [10]
- 2016年5月 [10]
- 2016年4月 [12]
- 2016年3月 [10]
- 2016年2月 [11]
- 2016年1月 [7]
2015年
- 2015年12月 [2]
- 2015年11月 [4]
- 2015年10月 [8]
- 2015年9月 [6]
- 2015年8月 [10]
- 2015年7月 [9]
- 2015年6月 [10]
- 2015年5月 [11]
- 2015年4月 [12]
- 2015年3月 [14]
- 2015年2月 [8]
- 2015年1月 [7]
2014年
- 2014年12月 [7]
- 2014年11月 [13]
- 2014年10月 [9]
- 2014年9月 [1]
- 2014年8月 [2]
- 2014年7月 [7]
- 2014年6月 [14]
- 2014年5月 [10]
- 2014年4月 [2]

ホームページ制作、SEO対策サイバーアクセル・アドバイザーズＴＯＰ » ブログ » webコラム» はてなブログカスタマイズ　続きを読むデザイン設定方法

はてなブログカスタマイズ　続きを読むデザイン設定方法

投稿日: 2017/11/10 投稿者:webコラム

　

こんにちは！　ライターのモモタロウです。

今回は、はてなブログカスタマイズ　「続きを読む」ボタンのデザイン設定方法をお伝えします。

はてなブログ記事を作成しよう

まず、はてなブログにログインします。

「記事を書く」より、タイトルを入力して、記事を書いてみよう。

少し長めに文章を入力したら、続きとしたい部分にカーソルを合わせて、
上にある画像の四角で囲った部分をクリックします。

すると、破線の下部分は「続きを読む」ボタンが設定されたあと、そのボタンを押すまでは以下の文章が表示されなくなります。

「続きを読む」ボタンのホバー時に枠線が二重に見える設定にしてみよう

次に「続きを読む」ボタンのデザイン設定です。

「ダッシュボード」画面から、「デザイン」をクリックし、

左上のメニューバーから「スパナ」ボタンをクリックします。

「｛｝デザインCSS」編集画面に、以下のように記述します。

/*続きを読むボタン*/
.entry-see-more {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
font-weight:bold;
position: relative;
color: #333;
border: 2px solid #333;
}

.entry-see-more:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:3px;
left:3px;
border: 2px solid #333;
opacity:0;
}

.entry-see-more:hover:after {
opacity:1;
}

その後、「変更を保存する」ボタンをクリックし、作成したブログ記事を確認すると・・・

上の画像の四角で囲った部分が、ポインターホバー時に二重になります。

まとめ

如何でしたか。このように、ほんのわずかな変更が作成したブログに特徴を持たせることができます。

是非、試してみてくださいね。

カテゴリ:

webコラム

我社のマスコット『弁慶』です。
名前の由来：忠実な番犬
主な仕事：マスコットキャラとして認知度UP↑
不得意：電話
しゃべりが苦手なので、コンタクトはこちらから

我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。

ティーンのカリスマ　ゴンザレスの「癒しの小部屋」

私の後ろに道が出来る。そう、カリスマとは俺のことよ！

株式会社サイバーアクセルアドバイザーズ

東京本社

東京都豊島区東池袋1-32-2 小泉ビル4F

福岡オフィス

福岡市博多区博多駅東2-18-28 ジェントリー博多3F

TEL03-3986-2773／050-3511-5525

営業時間：10:00～19:00お問い合わせ »
日・祝についてはメールでお問い合わせください

Copyright(C)2014　｜ホームページ制作・SEO対策を通じて集客向上↑売上UP↑Cyber Accel-Advisors. All Rights Reserved.