ブログ

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

2018年2月7日

追記:2021年3月4日

現在は別のテーマを使用しておりますが、備忘録として残しています。

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

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

続きを見る

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

スポンサーリンク

使用した有料テーマ

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

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

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

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

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

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


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


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

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

テーマ購入時に設定したアカウントでログインすると閲覧できます。

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

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

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

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

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

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


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

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

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

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

設定した、主なCSS

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

目次のデザイン

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

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

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

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

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

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

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

タグクラウドのデザイン

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


こっそり作っていた、カテゴリー・タグ一覧ページ(現・サイトマップ)でも確認できます。

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

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

ボタンデザイン・追加

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

マシュマロを投げる

お問い合わせフォーム

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

コードは以下を参考にさせていただきました。

参考リンク:CSSで作る!押したくなるボタンデザイン100(Web用)|サルワカ

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

参考リンク:【CSS】内部・外部リンクにアイコン表示 - ieha * Web Design

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

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

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

他、設定したもの

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

セキュリティまわり

リダイレクトまわり

スポンサーリンク

まとめ

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

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

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

Ayumu Michino

道乃歩みちのあゆむと申します。
創作と写真と一人時間をこよなく愛する人。

OFUSEで応援する

この記事をシェアする▼

-ブログ
-,