ランサーズエンジニアブログをリニューアルしました!!!

ランサーズエンジニアブログをリニューアルしました!!!

こんにちは!3月からインターン生として働いている橋口です。

 

昨年のコロナ禍にプログラミングを始めた新米文系エンジニアの私が、歴史あるランサーズエンジニアブログのテーマを変更する機会をいただいたので、一連の流れや難しかったことを記しておきます。

(始まって以来の変更だそうです。ちなみに以下は以前のテーマになります。)

いざテーマ選定

 

Githubflowにようやく慣れ始めた今日この頃、安達/@adachin0817さんにissueをまとめていただき、

 

WordPressでは既存テーマである「masterblog」を選定しました。

 

目立つキービジュアルから始まるブログサイトだとかっこいいと思い決めました!

テーマ変更をしたことで、既存のブログ記事やプラグインなどがしっかりと反映されているかを確認していきます。

 

次に、細かい修正をCSSでおこないます。

ブログ一覧の画像の調整や、スマホ・タブレットサイズに即したレスポンシブコーディングを追記する等の微調整をしました。

ヘッダー画像をエンジニアブログ感のあるフリー画像に変更し、

 

配色もランサーズカラーを意識してコーディングしていきます。

青系の見出しカラーに変更

使用したプラグイン

 

まずは、ソースコードを見やすく & 書きやすくする「Highlighting Code Block」というプラグインを導入しました。

技術的な記事を書くことが多いので、執筆者が直感的に操作しやすく、読者にストレスをあたえないUIを搭載しているプラグインを探します。

上記の条件を満たし、評価も高かったプラグインを入れてみたところ、既存のエディタプラグインと競合して動作しない場合もあったので、「最終更新が最近」かつ「競合しない」プラグインに絞り込んでいきました。

言語も指定できる便利なプラグイン

 

ダウンロードしていたものの、競合プラグインの存在により無効化していた「JP Markdown」プラグインを有効化にしました。

 

余談ですが、私が以前WordPressを触っていたときは、ブロックエディタで操作しながら記事を書いていたので、「マークダウンでゴリゴリ執筆する先輩たちかっこいい!」と思いながらプラグインいじってました。

 

このような流れで無事移行することができ、先輩エンジニアの承認を経て本番公開することができました!

苦労したこと、学んだこと

 

WordPressのプラグインは簡単に導入でき、非常に便利です。

しかし中には、容量が重く動作に影響を及ぼすプラグインや、開発者による最終更新が5年以上前のプラグインも混在しているので、むやみやたらに入れるものではないと感じました。

今後いじる際には、便利さを追求してプラグインを多用するのではなく、既存のプラグインとの互換性を調査したり、自分で書けるところは実装して最低限のプラグインで運用したいです。

 

また、既存テーマを使用するにあたって、細かいCSS修正をするファイルや場所を探すのに少し手こずりました。

修正したいコードが書かれているファイルを探す→CSSを修正キャッシュを消して反映を確認する、という作業に時間がかかったので、もっと効率化する方法を調べたり聞いたりするべきだったなと反省しています。

テーマ変更を通じて感じたこと

 

インターン生としての初業務では、簡単なタスクを先輩方にいつでも聞ける状態で開発に慣れていくものでしたが、今回は一人での作業が多い中リリースすることができたので、改めて開発チームに所属していると認識できました。

ブログ改修という小さな一歩ですが、これからも開発者としての責任感や、コーダーとしての技術力をあげてランサーズに貢献していけるように頑張ります!