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

Wordpress

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

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

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

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

スポンサーリンク

電子書籍のおすすめ比較

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

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

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

サイドバーの幅の変更

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のカスタマイズはこちら!

table of contents plusのおしゃれなカスタマイズ【cssのデザイン】
Wordpressのプラグインで有名なtable of contents plusのcssのカスタマイズやデザインなどをまとめておきます。覚書をかねています。 table of contents plusのWordpressのプラ...

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

調べたら

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;
				}
			}
*/

Elegant Themesで投稿ページと固定ページの仕様が若干違う

Elegant Themesは投稿ページと固定ページの仕様が若干違います。たとえば、アイキャッチが固定ページはデフォルトで表示されません。

いくつか対応方法があるようですが、固定記事から投稿記事に移動しました。数も少なかったので。その際、Post Type Switcherというプラグインを使いました。urlを変えず移動できます。

Post Type Switcher
WordPress の投稿タイプを簡単に変更する簡単な方法

投稿ページに移動した場合、カテゴリはあとから設定しなおす必要があります。

Elegant Themesのgoogle analyticsの設定

設定項目が用意されています。

Divi > Them Options > integration > Add code to the (good for tracking codes such as google analytics)

過去にプラグインなどを利用した記憶がある方は2重設定にならないように注意しましょう。

他のElegant Themes(エレガントテーマ)のカスタマイズ

extraのカスタマイズはこちらです。

elegant theme(エレガントテーマ) Extraのレビューとおすすめカスタマイズ
elegant theme(エレガントテーマ) Extraのレビューとついでにカスタマイズ方法をまとめておきます。 全体のレビューはこちらから。 管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ...

Elegant Themes(エレガントテーマ)の紹介

まとめ記事はこちらです。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)
Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。 公式サイトはこちらです。入会する場合はJoin to downloadです。 Elegant Themess Pre...
人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
Wordpress
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました