有料テーマは早めに導入!DigiPressのFancie NOTEでわかった本当のこと/後編

前回投稿でお伝えした「有料テーマを導入するなら早めが大吉」、題して「DigiPressのFancie NOTEでわかった本当のこと/前編」。

「無料テーマ間のテーマ変更以上に、デザイン性・機能性に優れた有料テーマに変更すると、さらに調整作業が多岐にわたって必要になる」との理由から、WordPressでのブログ運営者向けにお届けしました。

今回は、その後編。無料テーマStinger5から、有料テーマDigiPressFancie NOTEに切り替えたことで、どんな調整作業を行っているのか?ちょっとした舞台裏をお見せします!

前編はこちらから!

有料テーマは早めに導入!DigiPressのFancie NOTEでわかった本当のこと/前編
...

OFFICIAL SITE

DigiPress
DigiPress/Fancie NOTE

Fancie NOTE導入!調整作業のほんの一部を裏話としてご紹介

調整作業のすべてを公開だと、公開するためにスクリーンショットをとるなど作業が増えてしまい本末転倒なので、よく目につくところに絞ってご紹介します!

※パソコン画面でご紹介しますがモバイルも同じです。DigiPressのテーマはレスポンシブではなく軽量化のためモバイル専用が用意されており、パソコンとモバイルでコンテンツや並びを変えたのでその違いはあり。

記事タイトル上部にアイキャッチを表示

DigiPressのテーマの中でもFancie NOTEに決めた理由のひとつが、記事タイトル上部にアイキャッチを指定するとタイトルバックに画像が表示されるデザイン。

「カッコよすぎワロタ。やっぱりこのテーマにしよう」と最後の決め手になったほど。

と・こ・ろ・が・だ。


BEFORE

なんということでしょう!テーマ変更しただけでは反映されません!(BEFOREなのにAFTERのナレーションはやめてください)

BEFORE

テーマを適用しただけだと、タイトルバックにアイキャッチが表示されないどころか、記事トップに画像が2枚並んでしまうことに。

この解決方法はたったひとつ。ひとつひとつの投稿画面を開き、「記事の先頭にアイキャッチ画像を表示する」「投稿タイトルよりも上に表示する」にチェックを入れること。


BEFORE

AFTER

軽く700記事以上ある我がブログよ、オマエはどこまでお父さんに手間をかけさせるのだ(すでにお母さんを通り越しお父さんの領域に到達する達観ぶり)。

彫りが深く目鼻立ちがくっきりとしたワイルド系男前なくせに、口を開けば自覚のないトボけた発言を連発し、お父さんに全力フォローさせる、どこぞのセンターバックにそっくりだなオマエは(真顔)。

2015-2016シーズンラストマッチは劇的な一戦!今だからこそ記すドイツカップ決勝ドルトムントVSバイエルン戦
...

よし!我がブログを今後、マッツ・フンメルスと呼ぼう!もしくはマヌエル・ノイアーだな!(呼ばんでええ)


AFTER

その結果がこちら。

あらためて……なんということでしょう!洗練さが光り、まばゆいばかりに蘇ったかの光景です!(これがやりたかったんでしょ?との真顔ツッコミはいっさい聞こえません)

ブログカードのデザイン変更

BEFORE

以前はプラグインで対応していたブログカード(はてなブログカード形式の外部&内部リンク)ですが、DigiPressには専用のショートコードがあり、そのデザインが気に入ったので変更。

実はプラグインで使用していたコードそのままでも一応表示されました。「変更が必要ない!やったー!」……と喜んだのも束の間……。


BEFORE

……………カード下部の余白が大きすぎる……………。

もうこうなると気になって仕方ない……。もともと無料テーマ時代からこうした細部にまでこだわる人間が、わざわざお金を払って綺麗なデザインにしたとなると、なおさらどうにかしたい。

結果、すべて手作業でひとつひとつ、余白調整まで加えた新たなショートコードを記述して変更するエンドレス状態。

どうよ?「投げ出し魔さんは間違いなくすぐに逃げ出す」の意味がわかったでしょう?(真顔)


AFTER

これが調整完了の状態!ひたすら地道な作業の繰り返しですぞ。

フォント変更

BEFORE

AFTER

無料ブログ時代からずっと行ってきた定番調整といえば、全体のフォント変更。英数字は「Railway」、日本語は「メイリオ」が現在の採用フォントです!


DigiPressテーマの場合、まず最初にDigiPress→ビジュアル設定→オリジナルスタイルシートにCSSを記述。

プラス、「Raleway」をGoogle Web Fontsから適用するために、DigiPress→詳細設定→HTMLヘッダーの<head>~</head>内のユーザー定義にCSSを記述します。


AFTER

なぜかいつものfont-family記述を読み込んでくれなくて、検証のfont-familyを活かして手直ししたら適用されたという不思議な現象が起こったとはいえ、とりあえずこちらも完成。

ただし、メイリオはWindowsフォントなので、そのままだとMacでは表示されません。わたしの場合、MacBookを導入した時点で、MacBookでメイリオを表示させるようにしました!

MacBookさんが可愛すぎる件についてー!長年のiPhone使いがMacデビューして“逃げ恥”状態クリスマス
...

もし「メイリオが指定されたサイトはMacでもすべてメイリオで表示させたい!」という人は、こちらのサイトをご参考までに。わたしもこちらにお世話になりました!

Windows の標準フォントを Mac で使う方法 - Macにスイッチしました
Windows の標準フォントを Mac で使う方法

アイコンフォント導入&表記・デザイン統一

BEFORE

AFTER

Stinger5からWEBフォントを少しずつ使いはじめましたが、Fancie NOTEに切り替えたのでDigiPress専用のアイコンフォントを導入することに。WEBフォントなのでコード記述だけです!

た・だ・し

「今後の投稿からアイコンフォントをプラスした表記やデザインに調整した上で統一」でおさまるわけがありません。このわたしが。

全部統一する(真顔)。

こうして大変な想いをしながらも、ひとつひとつ綺麗にしては眺めてニヤニヤする……完全にマゾですよね(違います)。

OFFICIAL SITEの装飾はほんの一例です!こんな感じであらためて表記やデザインを統一した箇所が多々あり。

新プロフィール設置

AFTER

全投稿に表示されるプロフィールを新しくしました。以前のプロフィールのスクショがないのですが、イメージがガラリと変わったかと。

設置方法は、プロフ画像バックグラウンド画像をメディアにアップした後、ウィジェットのカスタムテキストを使用し、DigiPress専用ショートコードを記述して「記事(エントリー)の最後」に挿入。

これでOK!デザインなどの変更はひとつひとつやってみて、確認のため表示させ、また記述して。すべてこの繰り返しですね。膨大なデータを構築・分析する感覚が活きる瞬間です(笑)。

グローバルメニュー&隠れフルスクリーンメニュー設置

AFTER

ページ上部に表示されるグローバルメニューを、各親カテゴリーにし、第2階層をプルダウンさせる仕組みに調整しました。

Fancie NOTEのデザイン性を考えると、これが一番見やすいかなあ、と。スクショはとっていませんが、ページ下部のフッターメニューに、今までグローバルメニューにしていた項目を移動しています。


AFTER

加えて、フッターメニューの項目を隠れフルスクリーンメニューにも採用しました!

ユーザーの動線を考え、グローバル・フッター・隠れフルスクリーンの3つをすべて活かし、この形が一番スムーズにブログメニューを見てもらいやすいと判断した結果です。

モバイルは、モバイルのユーザー動線にあわせて最適な配置にしているので、よかったらそちらも確認してみてください!

有料テーマの判断基準は「その会社のテーマを使いつづけたいか」

SEOに強い有料テーマは現在、数多く出まわっています。じゃあ、どれを選んだらいいんだろう?

値段?デザイン?サポート?悩みますよね。

そこで今回の実体験からひとつの目安として提示したいのが、最終的な判断基準は「その会社のテーマを使いつづけたいかどうか」。

今回ご紹介した一例だけでも、DigiPressが独自開発した機能を使いまくっています。これら機能はDigiPressのテーマであればすべて引き継いでくれる反面、他社に変えると新たな独自設定にあわせて再び変更です。

これと似たような作業をもう一度すべて行う。しかもそのときにはさらに記事数が増えている。……………気が狂うわワロタ。

そんなわけで、有料テーマ導入までにかなりの時間をかけて調べ、「やっぱりここのテーマにしよう」と決めて採用したので、今後このブログのテーマをDigiPressから変えることはよほどじゃなければありません。

懸念点はあったとはいえ、他社にはない洗練されたデザインがわたしのツボにドンピシャだった。これが肝かな、と。有料テーマ導入にあたってわたしが重要視したポイントのひとつです。

仕事に本気で取り組む人ほど理解してくれる「自分ってマゾ」感覚

さておき。今回ご紹介した調整がほんの一例というね(真顔)。

仕事でもそうですが、わたしがこういう作業に没頭しているとき、頭の中でなにを考えているかというと、「こうしたほうがいいかな」などアレコレ熟考は別として、完成したときの達成感。

もうひたすらそれのみ!

アレですよ、マラソンランナーがゴールしたときの晴れやかさ。アレですよアレ。もうアレしかない(アレで押し通そうとする自分自身を小一時間ほど問い詰めたい)。

良い意味でマゾである、は否定しきれません。でも、仕事に本気で取り組んでいる人ほど、この「自分ってマゾだわー」の得も言われぬ感覚を理解してくれるはず……大体「同意!」で盛り上がるからですw

「なにごとも徹底的にやり抜くべし」の強い意志は昔から変わらず。そんなお父さんが愛してやまない娘・マツコのようなこのブログ(いろいろと間違ってます)、これからも楽しんでくださると幸せです!

前編はこちらから!

有料テーマは早めに導入!DigiPressのFancie NOTEでわかった本当のこと/前編
...

OFFICIAL SITE

DigiPress
DigiPress/Fancie NOTE

GADGETandWEB
スポンサーリンク

この記事が気に入ったら
いいね!しよう
Thank you for the like!!
\FOLLOWして最新情報&InstagramをCHECK/
SACCHI'N MIND SHARE
タイトルとURLをコピーしました