【やった作業まとめ】はてなブログProからWordPressへの引っ越し完了:その2

-shared-img-thumb-PAK85_Blogcc20141206203244_TP_V.jpg

前回のまとめ記事の続きです。

正直、2回にわけるほど長くなるとは思いませんでしたw
あれこれ設定しまくってたんだなーと。どんだけ無心で作業してたんだと。

スポンサーリンク

使用した有料テーマ

DigiPressの『COLORS』を導入しました。
見た目がよかった・値段が安め、という理由がほぼですw

本当にデザインセンスが皆無なので、オシャンティーなブログに変身できて嬉しいです。

ちなみに、テーマの編集は以下のようなオリジナルの管理画面で行います。

もうひとつのブログでは「Simplicity」を利用させていただいているので、最初はその違いに四苦八苦しましたが少しずつ慣れてきました。

<head>〜</head>に設定可・オリジナルCSS設定可

個人的に気になっていた点もばっちりでした。

<head>設定
(詳細設定→HTMLヘッダー設定)

head-customize-min.jpg

オリジナルCSS設定
(ビジュアル設定→オリジナルスタイルシート設定)

css-customize-min.jpg

CSSに関しては、「外観→カスタマイズ→追加CSS(CSSエディター)」だとリアルタイムプレビューで確認しながら編集できるのが便利なために、その機能が使えないのはちょっと痛いです。。
何かいい方法はないものか……と思ったら、Chromeならデベロッパーツールがありましたね。

困ったときはサポートフォーラムへ

テーマ購入時にユーザー登録をするのですが、そのアカウントでログインすると閲覧できます。

ですが、テーマをアップデートしたら動かなくなってしまったとか、そういうトラブル以外は自力で解決する感じかなーと思います。
無理なら有償サポートを検討しましょうと。

運がよければ(?)詳しいユーザーの方が答えてくれる場合もあるみたいです。

私は大抵「自分で設定したCSSがうまく反映されない!」だったりするので、フォーラム内を検索してみて、だめならGoogle先生に質問しにいってます。
このCSSの設定が一番時間のかかったところかもしれません。

子テーマは配布されていません

私自身ほんとうに久しぶりなWordPressだったので、最初は「子テーマ」という存在自体を知りませんでした。

どうやら、テーマファイルにカスタマイズをしたい場合に必須なもののようですね。

WordPress-theme.jpg

図でまとめてみるとこういう感じかなーと。

「テーマのアップデート……したほうがいいのはわかってるけど、カスタマイズしたのが全部初期化されるのめんどい……どうしよ……」っていう葛藤が、子テーマの存在でなくなるのはありがたいですよね。

有料テーマでも子テーマを配布しているところは見かけますが、DigiPressに関してはありません。
フォーラムを覗いてみると、「子テーマを作ってカスタマイズしました」という文面をちょこちょこ見かけたので、サポート外になるけど自分でやってみてね、という感じっぽいです。

私は、今のところはCSSいじりぐらいしかやってないので必要ありませんが、その時が来たらやってみようと思います。
……実は一度チャレンジしてみたんですが、カスタマイズが反映されなくて一旦やめました(;´∀`)

スポンサーリンク



設定した、主なCSS

ほぼ、知恵をお借りしているだけとも言う←

カエレバ・ヨメレバ

はてなブログ時代からお世話になっております。

目次のデザイン

※要:Table of Contents Plusプラグイン

各見出し前にある数字と▶アイコン部分のCSSはコメントアウトしました。

おそらくテーマとの相性の問題で、テキストとずれて配置されてしまうためです。修正しきれませんでした。。

記事の見出しのデザインを変更

はてなブログ時代からお世話になっております。

ただ、そのまま設定してしまうと、もともとのデザインとカブってしまいます。
それを防ぐため、まず下記のコードでデザインを解除してあげる必要があります。

/*スタイルを解除*/
border-top: initial;
border-bottom: initial;

タグクラウドのデザイン

スマホ版だと、ページの下部で確認できます。

clip_now_20180204_102415-min.png

こっそり作っていた、カテゴリー・タグ一覧ページでも確認できます。

プロフィール欄(PC版・サイドバー:スマホ版・フッター)

シンプルだけど可愛らしく、馴染みやすいデザインです❤

吹き出しのデザイン

管理人
管理人
こんなやつです。
管理人
管理人
プラグインなしで実現できて、嬉しいです。
管理人
管理人
色付きもばっちり。

コードはこちらを参考にさせていただきました。

ボタンデザイン・追加

PC版だとサイドバー、スマホ版だとフッターに表示されているボタンです。

匿名一言フォーム

お問い合わせフォーム

COLORSテーマに組み込まれているデザインだと、少し使いづらかったためです。

こんなデザインです

色も変えられます

コードはこちらを参考にさせていただきました。

外部リンクにだけアイコンをつける

こちらの記事を参考に、だいぶ四苦八苦しましたがとりあえず実現できました……。

コードはご覧の通り、ごっちゃごちゃになってしまったのですが。。
私自身も頭を整理するため、改行を入れる+自分で設定したところにコメントを書いています。

もっとスマートな書き方があると思います。私の実力ではこんなもんですw

他、設定したもの

WordPressのログイン画面へのアクセス制御をしたり、リダイレクト処理を追加したりしました。
それぞれ、以下のサイトを参考にさせていただきました。

セキュリティまわり

リダイレクトまわり

まとめ

チェック漏れの箇所などありそうな気はしますが、ひとまず区切りをつけて更新を再開していきたいと思います。

改めて、WordPressは「あれやりたい」「これやりたい」がわりと簡単に叶えられるよな〜と実感した次第ですw

それでは、今後も当ブログをどうぞよろしくお願い致します!💕

スポンサーリンク