elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

elegant theme(エレガントテーマ) diviのカスタマイズをまとめておきます。

1 エレガントテーマのdiviの完成例
2 子テーマの作成がおすすめ
3 サイドバーの幅の変更
4 メニューのロゴの位置を調整
5 メニューのフォントサイズ変更
6 フッターリンクの削除
7 プラグインtable of contents plusでアンカーのアドレスが表示されない
8 Elegant Themesで投稿ページと固定ページの仕様が若干違う
9 Elegant Themesのgoogle analyticsの設定
10 他のElegant Themes(エレガントテーマ)のカスタマイズ
11 Elegant Themes(エレガントテーマ)の紹介

エレガントテーマのdiviの完成例

エレガントテーマのdiviの完成例です。

レディース・メンズファッションやメンズ脱毛・コスメなどのサイトですね。クオリティを高めるためにまだまだテコ入れが必要ですけどね。エレガントテーマのdiviにはレイアウトなど豊富な機能があります。

子テーマの作成がおすすめ

子テーマを作成して運用しています。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。style.

サイドバーの幅の変更

elegant theme(エレガントテーマ)のdiviって格好いいのですけど、ちょっとサイドバーが狭いと感じる人がいるかもしれません。

elegant theme(エレガントテーマ)の全体の横幅をITサイトの大手Ligのように広げています。テーマカスタマイザーからできるため、お好みでどうぞ。ちなみに全幅を1280pxに変更。そして、サイドバーが狭いので広げます。

/************************************
** エレガントテーマカスタマイズ
************************************/

@media only screen and (min-width:1100px){
	div#left-area {
		width: 72%; /* デフォルトはwidth: 79.125%; */
		border: none !important;

	}
	div#sidebar {
		width: 28%;
		border: none !important;
	}
}

サイドバーの区切り線が重なってしまうので消去。これは少し気づくのに時間がかかりました。

/*サイドバーの区切り線消去*/
.et_right_sidebar #main-content .container:before {
	display: none !important;
}

現在、固定にしていませんが、固定幅にしたい場合は下記のような感じでしょうか。300pxのバナーが置けなかったので。

/* サイドバーのサイズ調整 */
@media only screen and (min-width:1100px){
	div#left-area {
		width: 700px !important;
		margin-right: 30px;
	}
	div#sidebar {
		width: 320px !important;
	}
}

.et_right_sidebar #main-content .container:before {
	right: 350px;
}

メニューのロゴの位置を調整

ちょうどいいサイズのロゴをあげることも大事ですが、ロゴの位置をちょっと調整したいこともあります。

/*ロゴの位置を調整*/
#logo {
	padding-top:10px;
}

メニューのフォントサイズ変更

海外のテーマは日本語で利用するとフォントサイズを変更をしたくなることがしばしばあります。メニューのフォントサイズを変更します。!importantをつけないとダメです。

li.menu-item{
	font-size: 16px !important; 
}

フッターリンクの削除

フッターリンクの削除は許可されています。

通常、テーマのカスタマイザーフッター > 下部ナビ > DISABLE FOOTER CREDITSで消せますが、子テーマを利用していてうまく消えない場合はコードを追加しましょう。

/*フッターリンクの削除(子テーマを利用してうまく消えないとき)*/
#footer-info {
	display: none;
}

プラグインtable of contents plusでアンカーのアドレスが表示されない

elegant theme(エレガントテーマ) diviでは、wordpressのプラグインtable of contents plusのアンカーのアドレスが表示されませんでした。

こりゃ、なんか余計なコードを書かれたな、と(^^;。

プラグインtable of contents plusのカスタマイズはこちら!

cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】

目次のカスタマイズ覚書です。cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】cocoonの目次はデフォルトのHtmlを簡潔に表記すると、こんな感じです。<div class="toc"> <input type="ch

もしかしたらソーシャルブックマークのアドレスが別になってしまうための対策かもしれませんが、うちのサイトではデメリットが多く、表示した方がよかったので、アンカーがしっかりと表示するようにしました。

調べたら

js/custom.js

に原因があり、jsファイルのこちらの部分を削除してあげればOKでしたね。

文字コードが欧米になっていたため、日本語コメントを入れる場合はUnicode(UTF-8)に変換します。

古いバージョンはプログラムのコードが若干違いますが、location.pathname.replaceで検索すれば大丈夫です。

/* 変更：Table of Contents Plusのアンカーアドレスが表示されないためコメントアウト
			if ( ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) && ! disable_scroll ) {
				var target = $( this.hash );
				target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
				if ( target.length ) {

					et_pb_smooth_scroll( target, false, 800 );

					if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
						setTimeout(function(){
							et_pb_smooth_scroll( target, false, 40, 'linear' );
						}, 780 );
					}

					return false;
				}
			}
*/