BLOG CATEGORY

Monthly Archives

長フチコンテンツ

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

このエントリーをはてなブックマークに追加

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

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

cdd152849ee30aed37dce81870a8764c_s.jpg
 

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

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

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

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

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


20171007-3.jpg

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


20171007-4.jpg


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

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

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

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

20171007.jpg


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

20171007-2.jpg



「{}デザイン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;
}

20170730-2.jpg


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

20171007-5.jpg

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

20171007-5-1.jpg

20171007-5-2.jpg

まとめ


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

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

カテゴリ:

TOPへ