WordPress テーマを「GRAPHIE」へ変更、メインカラム(780px)・サイドカラム(340px)へ広げた

この記事で紹介しているテーマは、100%GPLではないテーマです。WordPressコミュニティは、100%GPLライセンスを推奨しています。私も、現在は100%GPLライセンスのテーマのみを推奨しています。100%GPLテーマの記事はこちらです。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

WordPressのテーマをDigiPressさんの el plano から、GRAPHIE(Ver.1.0.6.7)へ変更しました。

el planoも優れたテーマですが、さらにコンテンツを伝える形として進化できると感じて、GRAPHIE へ変更しました。導入と同時に、CSS(スタイルシート)をカスタマイズし、PCで閲覧した時のメインカラムを780 pxに、サイドカラムを 340 pxに広げました。

DigiPress専用ショートコードの縛り

DigiPress専用ショートコードを使っているため、他のテーマに移行するのはかなり大変なことになります。el plano を導入した時は、このテーマを使い続ける気持ちでした。GRAPHIE も素晴らしいテーマなので、テーマ入れ替えを決心しました。

テーマをインストールし、ライセンス認証を行い、管理画面の中にあるDigiPressメニューの「保存ボタン」をクリックすると、el planoでカスタマイズしていた設定をそのまま移行できました。

タイトル・ヘッダー画像は再度アップロード・設定が必要

ただし、タイトル画像やヘッダー画像については、再設定が必要でした。これはテーマごとに画像保存場所が異なるためです。el planoの画像データをサーバーからFTPにてダウンロードして、再度、アップロードしました。

  • サーバーの画像 保存場所 → wp-content – uploads – digipress – el-plano の中にあります。

サイト幅を拡張

PCで見た場合の「サイト幅を広く」なるようにカスタマイズしました。

  • メインカラム 780px
  • サイドカラム 340px

このように拡張しました。どうして広げたのか?はお察し(アドセンス広告サイズが大きな理由です)ください。参考にさせて頂いたのがこちら↓のブログさん。貴重な実践例でした。

CSSではメディアクエリを使い、1000px以上の表示領域がある場合のみ「広げる」ようにしました。これがない場合、iPhone 6Plusで表示が崩れました。

実際のスタイルシートはこちらです。

[code]
@media screen and (min-width: 1000px) {
/* 表示領域が1000px以上の場合に適用するスタイル */
.container {
width:1160px;
}
.content {
width:780px;
}
#sidebar {
width:340px;
}
}
[/code]

游ゴシックフォントを使用

文字フォントは「游ゴシック」が使える環境の場合は利用するように設定しています。

  • 表示フォントを游ゴシック体を中心に変更しました。 | [箱]ものくろぼっくす → https://mono96.jp/?p=24496

Windows8.1かMac OSX mavericks ・ Yosemite で、ご覧いただけると嬉しいです。

メニューは再設定の必要あり

ナビゲーションメニューは再設定が必要でした。el planoとは表示領域がかなり違うので、メニューの内容を見直しました。ヘッダーメニューには「アイコンフォント」を使いました。

Theme Test Drive

カスタマイズ作業を行う時に役立ったプラグインです。

el plano を表示したまま、WordPressにログインしておけば「GRAPHIE 」を表示することができました。管理画面内の「DigiPressメニュー」もGRAPHIEのものに切り替わってくれて、カスタマイズが捗りました。

詳しくはこちらが参考になりました。感謝です。

設定済みのスタイルシート

今の時点(2014年11月21日)でのスタイルシートの設定をメモしておきます。

[code]
body {
font-family: ‘YuGothic’, ‘Yu Gothic’,’游ゴシック’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,’Meiryo’,sans-serif;
}

/* — pc width ——————————————– */

@media screen and (min-width: 1000px) {
/* 表示領域が1000px以上の場合に適用するスタイル <em>/
.container {
width:1160px;
}
.content {
width:780px;
}
#sidebar {
width:340px;
}
}
/</em> ———————————————- */

/* amazlet start */
.amazlet-box {
padding: 30px 0 50px 30px;
}
.amazlet-name a {
font-size: 120% ;
}
.amazlet-powered-date a {
font-size: 80% ;
}

.amazlet-sub-info{
margin: 20px;
}
.amazlet-link a {
display: block;
overflow: hidden;
width: 164px;
height: 26px;
}
.amazlet-link a:before {
display: inline-block;
content: url( ‘https://mono96.jp/wp-content/uploads/2013/07/amazon_ass00.jpg’ );
}
.amazlet-link a:hover {
background-position-y: -26px;
}
.amazlet-link a:hover:before {
margin-top: -26px;
}

/* amazlet end */

/* for AppStoreHelper start ———————————- */
.app-date {
width: auto;
word-break: break-all;
font-size: 100%;
margin-bottom: -25px!important;
}

.app-date img {
margin-top: 1px!important;
margin-right: 10px!important;
}

.app-date a {
text-decoration: none !important;
}

.app-sale {
color: rgb(255, 0, 0);
font-size: 120%;
font-weight:bold;
}

.app-2 {
width: 75px;
argin-right: border-radius: 11px 11px 11px 11px;
-moz-border-radius: 11px 11px 11px 11px;
-webkit-border-radius: 11px 11px 11px 11px;
box-shadow: 1px 4px 6px 1px #999999;
-moz-box-shadow: 1px 4px 6px 1px #999999;
-webkit-box-shadow: 1px 4px 6px 1px #999999;
margin: -5px 15px 1px 5px !important;
}

.saleimg {
padding: 40px 0 0 0;
margin: 0 0 -25px 0;
}

.iPhoneLandscape {
width: 300px;
}

.appDownloadButton{

margin: -50px 0 0px 0;

}

/* for AppStoreHelper end ———————————- */
[/code]

関連リンク

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール必須
お名前(姓)必須
お名前(名)必須
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

博士課程中退 / WEB・ITコンサルタント(業界歴 9年以上) / 岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年) / ニックネーム : ものくろ / ブロガー / WordPress & Woocommerceが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

講座・ワークショップ 開催予定

2023-01-07 09:30 – 19:30
2023年1月7日 18きっぷを楽しむ1日
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-12 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 1月12日
詳細・お申し込みはこちら

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】イカの塩辛作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-18 19:00 – 20:30
あみだすマインドフルネス 瞑想会
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-27 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 1月27日
詳細・お申し込みはこちら

2023-01-28 14:00 – 17:30
”職場のコミュニケーションが良くなる”働く人のための傾聴講座 3回連続講座
詳細・お申し込みはこちら

2023-02-09 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 2月9日
詳細・お申し込みはこちら

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


カテゴリー 一覧