Stockholmはポートフォリオサイト構築に適したWordpressテーマです。ただ、海外製テーマのため解説は英語のみという難点がありました。なのでこのブログでは日本語で使い方をまとめています。
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
万能なテーマなのでぜひ皆さんにも使っていただきたいです。今回はインポートしたデモのカスタマイズについて説明します。
デモをインポートすることで、簡単にデザイン性の高いサイトが構築できます。Stockholmは100種類以上のデモが用意されているので、お気に入りのデザインが見つかるはずです。
Stockholmが向いてる人
- フォトグラファー
- イラストレーター
- その他クリエイター
ポートフォリオを作りたいクリエイターに最適です。
Stockholmのインストール方法は下記の記事でまとめています。
![](https://takaprex.com/wp-content/uploads/2022/04/stockholm_manual_アートボード-1-300x184.jpg)
![](https://takaprex.com/wp-content/uploads/2022/04/stockholm_manual_アートボード-1-300x184.jpg)
今回は、サンプルとしてSigfridというデモを使ってご紹介します。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-22-20.45.27-1024x732.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-22-20.45.27-1024x732.png)
Stockholmテーマでまず必要なカスタマイズをしよう
![](https://takaprex.com/wp-content/uploads/2022/04/iStock-1304327602-1024x676.jpeg)
![](https://takaprex.com/wp-content/uploads/2022/04/iStock-1304327602-1024x676.jpeg)
デモの種類に関わらず、下記についてはカスタマイズが必要です。
- サイトのロゴ
- フッターの記載
- SNSアイコンのリンク
1. サイトのロゴを変更する
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-22-21.01.58-1024x654.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-22-21.01.58-1024x654.png)
デフォルトでは、画面左上の“STKLM”のようにStockholmのロゴが入っています。自分のサイトのロゴに変更する必要がありますので、ダッシュボードの「Select Options」→「Logo」のメニューで設定します。以下の動画を参照してください。
ロゴの画像サイズはおおよ420 x 200pxくらいで作成すると収まりが良くてオススメです。
2. フッターの記載を変更する
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-18.59-1024x543.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-18.59-1024x543.png)
デフォルトでは”@Copyright Select Themes”となっていますので、自分のサイトに合わせて変更しましょう。
「@Copyright +自分のサイト名」としておけば大丈夫です。
「外観」→「カスタマイズ」→「ウィジェット」→「Footer Text」と進みます。一番下にスクロールすると、”Copyright Select Themes”という文字列があるので、Select Themesを自分のサイト名に修正します。
3. SNSアイコンの編集
![](https://takaprex.com/wp-content/uploads/2022/04/SNSアイコン-1024x543.png)
![](https://takaprex.com/wp-content/uploads/2022/04/SNSアイコン-1024x543.png)
画面下部のSNSアイコンを編集します。
編集内容は下記です。
- 必要なSNSアイコンを追加し、不要なものを削除する
- 各アイコンごとに自分のプロフィールへのリンクを貼る
画面下部(フッター)のSNSアイコンは、「外観」→「ウィジェット」の中の「Footer Text」の中にショートコードで設定されています。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-20.54.09-1024x587.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-20.54.09-1024x587.png)
一つの方法は、”link=”の後のURLを自分のプロフィールURLに書き換える方法です。ただし、そのやり方ですと間違って消してしまってコードが崩れるリスクがあるので、今回は別の方法を紹介します。
「外観」→「カスタマイズ」→「ウィジェット」に進み、Footer Textを開きます。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-21.00-1024x716.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-21.00-1024x716.png)
下の図のピンクで囲んだショートコードの編集と、新規のアイコン追加を行います。今回はインスタグラムのアイコンを追加したいと思います。
![](https://takaprex.com/wp-content/uploads/2022/04/SNS編集-1024x683.png)
![](https://takaprex.com/wp-content/uploads/2022/04/SNS編集-1024x683.png)
- 既存のアイコンのショートコードを削除(【vc_separator〜・・・より上を削除します)
- +のマークからソーシャルアイコンのウィジェットを追加
- 目的のSNSアイコンを追加
- SNSアイコンにリンク先(自分のプロフィールページのURL)をコピペ→適用
- アイコンの配置を必要に応じて変更
この流れを以下の動画で確認できます。
アイコンにURLを適用しないとライブビュー画面では表示されないのでご注意ください。アイコンの色などを変更したい場合には、ダッシュボートに戻って「外観」→「ウィジェット」の画面で編集可能です。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-21.20-1024x579.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-25-21.20-1024x579.png)
まとめ:外観の修正はウィジェットエリアを使いこなそう
今回はロゴ、フッター、SNSアイコンの編集について説明しました。
これらの設定はどのデモをインポートしても必要になりますので、最初にやってしまいましょう。
外側に見えている要素の編集は基本的には「外観」の「ウイジェット」で制御されているものがほとんどなので、まずはウィジェットの編集に慣れましょう。