sacchi'n mind share

ライター兼フォトグラファー田中佐江子/sacchiがお届けする写真とグルメとコスメと雑貨とスポーツ中心のライフスタイルWEBマガジン

【WordPress】有料テーマは早めに導入!DigiPressのFancie NOTEにしてわかったこと/後編

約 10 分

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

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

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

前編はこちらから!

OFFICIAL SITE
DigiPress
DigiPress/Fancie NOTE

スポンサーリンク

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

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

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

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

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

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

と・こ・ろ・が・だ

BEFORE

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

BEFORE

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

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

BEFORE

AFTER

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

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

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

AFTER

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

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

BEFORE

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

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

BEFORE

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

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

結果、すべて手作業でひとつひとつ、余白調整まで加えた新たなショートコードを記述して変更するエンドレス状態。どうよ?「投げ出し魔さんはすぐに逃げ出す」の意味がわかったでしょう?(真顔)

AFTER

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

フォント変更

BEFORE

AFTER

無料ブログ時代からずっと行ってきた定番調整といえば、全体のフォント変更。英数字は「Raleway」、日本語は「メイリオ」が大のお気に入り。眺めながらごはん3杯イケますよね(だから食べすぎです)。

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

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

AFTER

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

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

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

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

BEFORE

AFTER

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

た・だ・し

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

全部統一する(真顔)。

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

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

新プロフィール設置

AFTER

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

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

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

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

AFTER

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

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

AFTER

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

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

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

どの有料テーマを導入する?判断基準は「その会社のテーマを使いつづけたいかどうか」

SEOに強い有料テーマは現在、数多く出まわっています。じゃあ、どれを選んだらいいんだろう?値段?デザイン?サポート?悩みますよね。

最終的な判断基準は「その会社のテーマを使いつづけたいかどうか」。

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

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

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

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

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

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

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

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

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

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

またDigiPressFancie NOTEに関しては書く予定でいます。そちらもよかったらお楽しみに!

前編はこちらから!

OFFICIAL SITE
DigiPress
DigiPress/Fancie NOTE

Profile image
Nikon一眼レフとiPhoneを愛する東京生まれ東京育ちのライター兼フォトグラファー。
写真と雑貨とおいしいごはんとサッカーとスポーツと桜と青空ラブ。

sacchi'n mind shareは、注目トピックスをはじめ、街歩き・グルメ・スポーツなど、あらゆる“今”のアレコレを、写真と文章でわかりやすく楽しく面白く、“sacchi視点&sacchiテイスト”でお届けするライフスタイルWEBマガジンです。

もちろん、お仕事のご依頼も大歓迎です!
SEE MORE INFO