自分プロデュース。セルフブランディングを応援する
ブランディングホームページ制作・WEBサイト制作のShape Dream(シェイプドリーム)

「夢「考えを形あるものに。

当サイトへのお問合せは、下記「お問合せ」よりお問合せをお願いいたします。

お問合せはこちら


WPtouchを利用したスマホ用デザインカスタマイズが完了



使用したのは「WPtouch 1.9.6」です。

元々細かいデザイン設定があったので、プログラムがおかしくならないように調整していくので、ちょっと奮闘しましたが、とりあえず、カスタマイズが完了しました!

 

WPtouchデザインカスタマイズ – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

全てをソース上で調整するのではなく、「WPtouch」の管理画面と連動しながら、カスタマイズしてみました(´∀`)

 

参考にさせて頂いたサイトはコチラです↓

WPtouchをカスタマイズしてブログをオリジナルデザインでスマフォ対応させたよ!(カスタマイズ編)

 

まずは、上記サイトを参考に、マイページ用のディレクトリを作成することをお勧めします!

 

まずは管理画面はこんな感じで設定しました。

 

WPtouch一般設定 – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

「一般設定」は自分の希望情報に合わせて、設定しました。

ちなみに、初めに言語設定を「Japanese」と選んで、一番下にある「オプションを保存」ボタンを押すと、表示が「英語→日本語」に変わります。

 

私は、サムネイルを表示したいので、「記事一覧オプション」「記事のサムネイルまたは指定画像を投稿」にしています。

このサムネイル表示ですが、設定をすると、同じ写真がグラデーションされ、これは要らない…と思ったので、私はこのグラデーションを削除しました。

この削除方法は、また次回投稿します。

 

あと、個人的なポイントは、スタイル上でテキストの調整を行いたかったので、「スタイル & カラーオプション」は下記のように設定しました。

 

WPtouchスタイル&カラーオプション – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

赤枠の部分を全て空にしておくと、後々調整しやすいと思うので、スタイル調整される方にお勧めです。

 

あとは、細かい設定になりますが、アイコン登録をしてオフィシャル感を出しました。

管理画面の設定はこんな感じです↓

 

WPtouchロゴアイコンーメニュー項目 & ページアイコン – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

「Home」というのは、アイコン画像の名前を「Home.png」で設定したからです。

こちらを設定すると、メニュー表示がこんな感じになります↓

 

WPtouchアイコン設定 – ブランディングホームページ作成・Webサイト制作のShape Dream(シェイプドリーム)

 

まずは、管理画面で設定できることからはじめると、個人的には調整しやすいかなと思います。

細かいスタイル調整は、また次回投稿します。




コメントを残す

(※大変申し訳ありませんが、コメント投稿のスパムチェックのため、確認してから公開させていただいております。)