Web制作

HOME
創作活動
Web制作
WordPressテーマ《Lightning》でブログをリニューアルしました☆

2020年6月1日 / 最終更新日時 : 2020年6月1日 kechamayo Web制作

WordPressテーマ《Lightning》でブログをリニューアルしました☆

2020年、ケチャマヨブログをリニューアル！

WordPressテーマ《Lightning》を使わせていただきました☆

テンプレートダウンロードや詳しい説明は
公式サイトをご参照ください。

シンプルでカスタマイズしやすいBootstrapベースのWordPress.org登録テーマ【Lightning】
https://lightning.nagoya/ja/

動作も軽快で、デフォルト設定のままでも十分綺麗なブログができるのでおすすめです。

ただ、ケチャマヨのナオヒロはWebデザイナーでもありますので、
よりケチャマヨらしいサイトにするべくカスタマイズしました☆

試行錯誤しながらおよそ3日かけて変更した箇所は下記の点です。

本文のフォントを指定
記事見出しを太字に
見出しのサイズや装飾など変更
ヘッダーに背景画像を配置
メニューの色を変更
ロゴとナビゲーションをセンター合わせに
ページヘッダー背景色変更
サムネイルのサイズを大きく（モバイルでは横幅いっぱいに）
右カラムの幅を少し大きく（360pxに）
モバイルメニューの出現場所を右に
トップへ戻るボタンを変更

・・・細かいことばかり、ちょこちょこ微調整しながら手をかけました。
めんどくさいのですが、そうすると《自分のブログ》って感じられていいですよ！

全ての変更指定はカスタマイザーの追加CSSに記述。
記述内容は下記のとおりです。（予告なく変更しちゃうんだからねっ！）

/*フォント変更*/
body, html,p {
    font-size: 17px!important;
    font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,"Helvetica Neue", Helvetica, Arial,sans-serif !important;
    font-weight:500 !important;
}
	
/*記事見出しを太字に*/
.media .media-body .media-heading {font-weight: bold;}
	
	
/*見出しの装飾*/
.subSection-title, h3 {
    padding-bottom: 8px;
    position: relative;
    border-bottom: 1px solid #999;
}
h3:after, .subSection-title:after {
    border-bottom-color: #999;
}

h1,h2,h3{
    font-weight:bold;
}
h4 {
    font-size:26px!important;
    font-weight:bold;
    padding:4px 0;
    border-bottom:3px solid #bccd45;
    color:#fb6d8c;
}

h5{
    border-bottom:1px solid #cccccc;
    font-size:22px;
    padding:4px 0;
}

/*ヘッダー背景画像指定*/
.siteHeader {
    background-image: url("https://kechamayo.jp/******");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.navbar-brand img {
    max-height: 2400px;
}

/*メニュー色を変更*/
ul.gMenu a{
    background:#2bafe7;
    color:#ffffff;
    opacity: 0.9;
}
ul.gMenu a:hover{
    color: #000000;
}

/*ヘッダー要素センター合わせ(PC)*/
@media (min-width: 992px){
.navbar-brand {
    display: table;
    float: none;
    margin-left: auto;
    margin-right: auto;
}
.gMenu_outer {
    margin-left: auto;
    margin-right: auto;
    float: none;
    width: auto;
    min-height: 4em;
    display: table;
}
}

/*ページヘッダー背景色変更*/
.page-header {
    background-color: #007726;
}

/*サムネイルサイズ変更*/
.media .postList_thumbnail{
    width: 430px !important;
}

@media (max-width: 480px){
.media .postList_thumbnail{
    width: 100% !important;
    padding-right:0px!important;
}
}

/*右カラムサイズ指定(PC)*/
@media (min-width: 992px){
.sideSection-col-two {
    width: 360px;
    float: right;
}
}

/*モバイルメニュー右へ*/
.vk-mobile-nav-menu-btn {
    right:10px;
    top:10px;
    width:40px;
    height:40px;
    left:inherit;
    background-color:#40b7e9!important;
}

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

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

/*フォント変更*/

body, html,p {

font-size: 17px!important;

font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,"Helvetica Neue", Helvetica, Arial,sans-serif !important;

font-weight:500 !important;

}

/*記事見出しを太字に*/

.media .media-body .media-heading {font-weight: bold;}

/*見出しの装飾*/

.subSection-title, h3 {

padding-bottom: 8px;

position: relative;

border-bottom: 1px solid #999;

}

h3:after, .subSection-title:after {

border-bottom-color: #999;

}

h1,h2,h3{

font-weight:bold;

}

h4 {

font-size:26px!important;

font-weight:bold;

padding:4px 0;

border-bottom:3px solid #bccd45;

color:#fb6d8c;

}

h5{

border-bottom:1px solid #cccccc;

font-size:22px;

padding:4px 0;

}

/*ヘッダー背景画像指定*/

.siteHeader {

background-image: url("https://kechamayo.jp/******");

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

.navbar-brand img {

max-height: 2400px;

}

/*メニュー色を変更*/

ul.gMenu a{

background:#2bafe7;

color:#ffffff;

opacity: 0.9;

}

ul.gMenu a:hover{

color: #000000;

}

/*ヘッダー要素センター合わせ(PC)*/

@media (min-width: 992px){

.navbar-brand {

display: table;

float: none;

margin-left: auto;

margin-right: auto;

}

.gMenu_outer {

margin-left: auto;

margin-right: auto;

float: none;

width: auto;

min-height: 4em;

display: table;

}

/*ページヘッダー背景色変更*/

.page-header {

background-color: #007726;

}

/*サムネイルサイズ変更*/

.media .postList_thumbnail{

width: 430px !important;

}

@media (max-width: 480px){

.media .postList_thumbnail{

width: 100% !important;

padding-right:0px!important;

}

/*右カラムサイズ指定(PC)*/

@media (min-width: 992px){

.sideSection-col-two {

width: 360px;

float: right;

}

/*モバイルメニュー右へ*/

.vk-mobile-nav-menu-btn {

right:10px;

top:10px;

width:40px;

height:40px;

left:inherit;

background-color:#40b7e9!important;

}

Lightningを使っている方も、良かったらコピペで使ってくださいな♪
（変になっても質問は受け付けないんだからねっ！）

特に気に入っているデザインポイントは、

ヘッダーに背景画像をおいて、ロゴとメニューをセンター合わせにしたことですね！

デフォルトのテンプレートだとこんな感じ ↓↓↓

・・・えっ？ってなりますね(^_^;)

あとはサムネイルの大きさを大きくしたところですね！
（モバイルだと画像が全幅になるように小細工しています☆）

デフォルトのテンプレートだとこんな感じ ↓↓↓

・・・ちょまっ？ってなりますよね(^_^;)

Lightningは、ヘッダーの下にいろんな《PRブロック》を入れられるので、
現状ではスライドショーと3つのサービス記を入れて“盛り盛り”にしています！

（デザインも含め、この辺も運用しながら調整予定です）

PHPの記述などはノータッチなのですが、
2015年にブログリニューアルしたときのテンプレートに比べて
動作も軽快になっているような気がします♪
（実際、前のバージョンはiPhoneで引っかかることが多々あったので…）

いやぁ、それにしても、
無料でサクッと素敵なブログが作れるいい時代になりました♪

2015年のリニューアル時は、確かスマホ対応のためだったと思うのですが、
今回2020年においてはスマホが一般化したあとのリニューアルなので、
画像も大きく、文字も大きく、ファイル容量に気兼ねせず“リッチに”作りました。

皆様のご参考になれば幸いです。

記事が参考になったら応援してください🙏✨

★YouTubeチャンネル登録1000人目標です★

サヤカ(イラスト+ボーカル+作詩家)＆ナオヒロ(アニメ+ギター+作曲家)の
仲良し夫婦😊😆💕が心を込め、歌とアニメの動画を制作してます❣

ぜひ、チャンネル登録お願いします！
YouTubeチャンネル登録の方法はこちら

Follow me!

@kechamayo