ホームページ・WordPressのサーバー比較

おすすめレンタルサーバー

カスタマイズ

pagetopを画像にする

投稿日：2013年9月5日

imagesフォルダに「pagetop.png」をUP

footer.phpの

<!-- ページトップへ戻る -->
  <div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div>
<!-- ページトップへ戻る　終わり -->

1

2

3

<div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div>

を

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png"  /></a></div>
<!-- ページトップへ戻る　終わり -->

1

2

3

<div id="page-top"><a href="#wrapper"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png" /></a></div>

cssの

/*-----------------------------
ページTOP
------------------------------*/

#page-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
  font-size: 10px;
}

#page-top a {
  background: #665e53;
  text-decoration: none;
  color: #fff;
  width: 80px;
  padding: 10px 5px;
  text-align: center;
  display: block;
  border-radius: 5px;
  /* CSS3 */
  -moz-border-radius: 5px;
  /* Firefox */
  -webkit-border-radius: 5px;
  /* Safari,Chrome */
}

#page-top a:hover {
  text-decoration: none;
  background: #d6cdc0;
  color: #665e53;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

/*-----------------------------

ページTOP

------------------------------*/

#page-top {

position: fixed;

bottom: 40px;

right: 20px;

font-size: 10px;

}

#page-top a {

background: #665e53;

text-decoration: none;

color: #fff;

width: 80px;

padding: 10px 5px;

text-align: center;

display: block;

border-radius: 5px;

/* CSS3 */

-moz-border-radius: 5px;

/* Firefox */

-webkit-border-radius: 5px;

/* Safari,Chrome */

}

#page-top a:hover {

text-decoration: none;

background: #d6cdc0;

color: #665e53;

}

を

/*-----------------------------
ページTOP
------------------------------*/

#page-top {
  position: fixed;
  bottom: 40px;
  right: 20px;

}

1

2

3

4

5

6

7

8

9

10

/*-----------------------------

ページTOP

------------------------------*/

#page-top {

position: fixed;

bottom: 40px;

right: 20px;

}

に

-カスタマイズ

関連記事

: 【Stinger利用者の方は必ずお読み下さい】Stingerでいるもの、いらないもの

ちょっと取り急ぎのエントリーです。 Stingerでプラグイン系の不具合が多いので取り敢えず、大事な事をまとめておきますね。まず、基本的にはStingerはプラグインなしで利用できるのが「ウリ」なの ...

記事のアドセンスコード（広告）を削除、または減らす方法

「外観」→「テーマの編集」で「single.php」の

<?php include(TEMPLATEPATH."/ad.php");?>

1	<?php include(TEMPLATEPATH."/ad.php");?>

が表示コードになりますので、不要箇所を削除してください。

: WordPressのカレンダーのデザインカスタマイズ

すいません。遅くなりましたがウィジェットのカレンダーのCSSを書きましたのでカレンダーを使用している方はstyle.cssにコピペして下さい。こんな感じです。 [crayon-5ed028d09a5 ...

抜粋の文字数を変える方法

StingerのTOPの抜粋文字数は「テーマの編集」よりhome.phpの

 <div class="entry-content">
                              <h3 class="entry-title-ac">  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
          <?php the_title(); ?></a></h3>
        <div class="blog_info contentsbox">
          <p>
          <?php the_time('Y/m/d') ?> | <?php the_category(', ') ?> <?php the_tags('', ', '); ?>
          </p>
      </div> <p class="dami"><?php echo mb_substr(get_the_excerpt(), 0, 35); ?>...</p>
<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>

 </div><!-- .entry-content -->

1

2

3

4

5

6

7

8

9

10

11

<div class="entry-content">

<h3 class="entry-title-ac"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">

<?php the_title(); ?></a></h3>

<div class="blog_info contentsbox">

<p>

<?php the_time('Y/m/d') ?> | <?php the_category(', ') ?> <?php the_tags('', ', '); ?>

</p>

</div> <p class="dami"><?php echo mb_substr(get_the_excerpt(), 0, 35); ?>...</p>

<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>

</div>

にある [crayon-5ed028d09a8964417 ...

: 上部のメニュー「カスタムメニュー」の設定

上記メニューの設定方法です。管理画面の「外観」→「メニュー」にて下記ページを開く ①～②任意のメニュー名を設定して保存 ③作成したメニューを選択して保存 ④～⑤表示したい固定ページにチェックを入れ ...

PREV: いろいろ上手くいかない方に最低限のfunctions.php
NEXT: Stinger3の正式公開

Copyright© おすすめレンタルサーバー , 2020 All Rights Reserved Powered by AFFINGER4.